【🔰独学】完全未経験から独学でポートフォリオ「だてまき」を開発しました【Laravel / Docker / AWS / CircleCI】

# はじめに
**この記事は、私がWebエンジニアへの転職を目指す過程において作成したポートフォリオの紹介記事です。**

ポートフォリオの概要や、工夫点、苦労した点などをこちらに書かせていただいております。
また、独学でどのように学習してきたかもこちらに書かせていただいたので、参考程度にさらっと見ていただけると大喜びです。

~~採用ご担当者が読んでいただいておりましたら~~、アプリの概要だけではなく、私のこれまでの独学での学習の道筋やアプリ開発で工夫した点・苦労した点なども一度、読んでいただけたら幸いです。

# 作成者（投稿時点）
 - サーバサイドエンジニアを目指す24歳
 - 大学時代に日本語教員養成課程を修了:flag_jp:
 - たまに筋トレ、ラジオ、カフェ巡り :coffee:
 - 推しはダイアンのユースケ
 -  2022年1月から本格的に独学を開始（2023年6月14日時点、学習時間合計で931時間到達しました:confetti_ball:）
 
# 目次
[1. 作成したアプリについて](#1-作成したアプリについて)
[2. 使用技術](#2-使用技術)
[3. 基本設計](#3-基本設計)
[4. このアプリを作成した背景と目的](#4-このアプリを作成した背景と目的)
[5. アプリ作成から完成までの振り返り](#5-アプリ作成から完成までの振り返り)
[6. 独学での学習の道筋](#6-独学での学習の道筋)
[7. お世話になったサービスや記事](#7-お世話になったサービスや記事)
[8. おわりに](#8-おわりに)

# 1. 作成したアプリについて
学習内容のアウトプットとして、Webサービスを個人開発しました。
![スクリーンショット 2023-05-30 14.26.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2916460/94f24778-4883-c9b3-474d-a9936b87621e.png)

## アプリ概要

### アプリ名　:　だてまき

URL ： https://----　(AWS無料期間終了に伴い、公開終了させていただきました:bow_tone1:)
（レスポンシブ対応済み、スマホからも閲覧できます）
GitHub : https://github.com/yuyamh/datemaki-blade

- **日本語教師向けの、作成した「教案」を共有・検索・保存できるWebアプリケーション**です。
:::note info
教案とは
日本語教師が各授業のコマごとに作成する、授業の計画案を指します。
教える単語や項目、時間配分、使用教材を中心に、どのように学習者に日本語を教えるかをあらかじめ授業前に決めておくものです。
:::

- アプリ名は「_<font color="FF9900">**Da**</font>tabase for <font color="FF9900">**Te**</font>achers <font color="FF9900">**Maki**</font>ng Japanese Lesson Plans_」の頭文字を取って「**だてまき**」と付けました。

## アプリの特徴
だてまきの主な特徴は以下の通りです。
- 作成した教案や教材の投稿・編集機能（画像・ファイルアップロード）
- 対象学習者の日本語レベル、使用テキスト、キーワード、ユーザー名からの投稿検索機能
- 気に入った投稿のブックマーク機能

### 画像イメージ
#### ホーム画面
![スクリーンショット 2023-05-30 14.26.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2916460/94f24778-4883-c9b3-474d-a9936b87621e.png)

#### 投稿一覧画面
##### みんなの教案一覧
ユーザーが投稿した教案、教材、授業のアイディアを見ることができます。
![スクリーンショット 2023-05-30 15.13.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2916460/f458b0f8-0f4c-553d-7ad0-dad87e5967ce.png)

みんなの教案一覧以外に、投稿一覧画面には次の機能があります。
<dl>
  <dt>じぶんの教案一覧</dt>
  <dd>自分が投稿した教案、教材、授業のアイディアをここで見ることができます。</dd>
  <dt>ブックマーク一覧</dt>
  <dd>ブックマーク（お気に入り）した教案を見ることができます。ブックマーク自体は後述の教案詳細画面で可能です。</dd>
  <dt>教案検索フォーム</dt>
  <dd>教案・教材は、検索フォームからキーワード、学習者レベル、使用テキストの項目から絞り込んで検索することができます。↓</dd>
</dl>

![search_record](https://github.com/yuyamh/datemaki-blade/assets/97832522/b4b1a728-943a-4337-a9c1-dca2f7875ed6)

#### 投稿詳細画面
気になる投稿の内容が詳しく見られます。
ここでファイルのダウンロード・教案のブックマークが可能です。
![スクリーンショット 2023-06-07 23.10.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2916460/36be6d39-b1c8-254a-6f27-53177cce5be3.png)
なお、投稿のサンプルデータとして、ぱんず先生という方から特別に教案を30件ほど拝借いたしました。協力してくださり、本当にありがとうございました。

ぱんず先生のブログはこちら↓

https://sensei-nihongo.com/


#### 投稿作成・編集画面
投稿の作成・編集ができます（教案ファイルの添付は任意）。
概要はマークダウン記法にも対応させました。
![スクリーンショット 2023-05-30 15.26.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2916460/b69896c6-16cc-2865-3702-2b33bd206d46.png)

#### マイページ
アカウント情報の確認（アイコン・名前・パスワードなど）ができます。
ここでアカウント設定の変更・削除が可能です。
なおゲストログインした場合は、アカウント情報が変更できないように実装いたしました。
![スクリーンショット 2023-06-07 23.21.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2916460/a3136290-2f20-84e3-3208-04ad6f45b4e6.png)

## アプリの機能一覧
今後も機能追加していく予定ですが、現時点での機能としては、以下の通りです。
### :pencil:メイン機能
 - **教案投稿機能（CRUD）**
 - **AWS S3を用いたファイルアップロード機能（ファイル形式 : pdf, docx, zip, xlsx, jpeg, jpg, png）**
 - **ページネーション機能**
 - **ブックマーク登録・一覧機能**
 - **教案検索機能（キーワード、学習者レベル、使用テキスト）**
 - **ユーザー検索機能（キーワード）**
 - **PHPUnitテスト（CircleCI）**
 - **レスポンシブデザイン（スマホ版対応）**

### :lock:認証機能
 - 会員登録 / ログイン / ログアウト
 - ゲストログイン
 - パスワード変更（ログイン中）
 - パスワードリセット（非ログイン）
 - アカウント情報編集（アイコン、名前、メールアドレス）
 - アカウント削除

##### ブックマーク登録
教案詳細画面から、ボタンクリックで登録可能です。
![ezgif.com-video-to-gif (2).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2916460/183bff8b-ef3b-ec23-6f4a-3ad681165857.gif)

##### レスポンシブ対応
全画面対応済みです。
![ezgif.com-resize.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2916460/e9c1bb72-f738-a128-7218-04527507c94e.gif)


##### ゲストログイン
わざわざ会員登録しなくても機能を試せるよう、ゲストユーザーを用意しました。
ログイン画面及びナビゲーションバーのゲストログインボタンから利用できます。
![ezgif.com-video-to-gif (3).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2916460/3c6de8d6-f201-3a55-8ebb-09b46eb55202.gif)

# 2. 使用技術
### フロントエンド
- HTML / CSS / Tailwind CSS
- JavaScript

### バックエンド
- PHP 8.2.5
- Laravel 9.52.7
- MySQL 8.0.32
- composer 2.5.5
- PHPUnit 9.6.7
- Node.js 16.20.0 / npm 9.6.6

### インフラ
- Docker 23.0.5 / docker-compose 1.29.2（開発環境）
- AWS (EC2, ALB, ACM, S3, RDS, CloudFormation, Route53, VPC, EIP, IAM, CloudWatch)
- nginx 1.22.1
- CircleCI 2.1

なお、開発環境の構築はLaravel Sailを用いて行いました。

### その他
- Git 2.39.0 / GitHub
- PHPMyAdmin
- Visual Studio Code
- iTerm2
- Notion
- draw.io
- Google Sheets
- Google Slides
- Google Document
- MacOS

## ◾️ なぜこの技術選定なのか（メインのみ解説）

メインの技術であるPHP(Laravel)とAWS、Laravel　Sailを選定した理由を簡単に述べます。

- PHP(Laravel)
PHPを選んだ理由としては、調べた限り初学者でも理解しやすく、求人数が比較的多い言語だからです。また、作りたかったWebサービス（だてまき）がPHPで作成可能だったため選定しました。

- AWS
AWSを選んだ理由は、デプロイの際によく使われているサービスだったというのと、サーバサイドエンジニアを目指しているので、ある程度インフラの知識を学習したかったためです。

- Laravel Sail
開発環境の構築がスピーディーにできるため、ポートフォリオの完成を最優先で進めていた私にとって最適な選定でした。また、学んできたDockerの知識を活かすことができるため、あえてLaravel Sailを選びました。

# 3. 基本設計

## インセプションデッキ
別途、記事を作成予定です。

## 画面遷移図
![スクリーンショット 2023-05-30 23.26.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2916460/1cb7ca85-c7ea-bda7-4573-c274d2cca3fc.png)

## ER図
IDEF1X記法で、簡易的に作成しました。
![スクリーンショット 2023-05-31 17.54.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2916460/c7edf93a-e336-8410-3b66-55ce6eb758f3.png)

## テーブル定義書
上に記載した概要レベルのER図を元に、テーブル定義書（スキーマ設計書）を作成しました。

##### postsテーブル（投稿情報を管理）
![スクリーンショット 2023-05-31 18.04.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2916460/aea06f33-6375-d10f-b1ed-ec97ee4423ed.png)

##### usersテーブル（ユーザー情報を管理）
![スクリーンショット 2023-05-31 18.09.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2916460/fc180d86-e9d1-191b-ead2-45d44daea476.png)

##### textsテーブル（使用テキストの情報を管理）
![スクリーンショット 2023-05-31 18.04.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2916460/bb12e0a7-5fec-4b9f-154d-3dfa0f4e7a13.png)

##### bookmarksテーブル（どのユーザーがどの投稿をブックマークしたかを管理）
![スクリーンショット 2023-06-11 22.30.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2916460/2a678590-1153-ca64-886b-143f3d0e87cc.png)


# 4. このアプリを作成した背景と目的
### なぜこのアプリを作成したのか
　大学時代に**日本語教員養成課程**という、日本語を母語としない方々へ日本語教育を行う教師を育成するプログラムに参加しておりました。
　日本語教育について学習する中で、日本語教育の現場において解決すべき課題は何かと考える機会が多くありました。また、同時にプログラミングの学習を始めており、何かITの力で日本語教育現場の課題の解決サポートができたら良いな、と考えていました。
　そこで日本語教師を志していた友人の協力を得て、自分が解決できそうな課題を割り出し、その問題解決の一つの策として、この教案共有アプリ「だてまき」を作成しました。

主に日本語教育現場において、現状自分が課題だと思っている部分は以下の2点です。
#### ①日本語教師の業務外での負担が大きい。
　近年、教員の方々の業務時間外労働が問題になっていて、日本語教師もかなり多い傾向があります。ただでさえ、課題添削や学校運営・行事準備などに時間を取られる中、教案の作成に時間を割けません。そこで、だてまきで他の先生が作った教案を検索・参考することにより、教案作成に掛ける時間が短縮され、**結果的に業務時間外労働を減らす**サポートになります。

#### ②日本語教師が教材・教案・授業アイディアを共有する場がそもそも少ない。
　これは自分自身が教育実習に向けて教案を作成していた際、自分の授業に取り入れられるような活動はないかな、と調べていたときに感じました。教案や教材、授業のアイディアを自由にシェア・投稿できるサイトやWebサービス等はそもそも少ない上、教案の作成に特化したものは調べてみた限り発見できませんでした。
　誰でも気軽に自分の授業のアイディアをシェアできる場を提供することで、日本語教師間での教案の共有のハードルを下げます。同時に、日本語教師間での情報交換ができる場になることで、作ってきた教案を見直し、ブラッシュアップする機会を作ることができます。多くのアイディアに触れて、より質の良い授業作りを目指してほしい、という願いを込めて、このアプリを作成しました。

# 5. アプリ作成から完成までの振り返り
## 工夫したこと
#### ①アクセサを用いた、開発環境と本番環境におけるアップロードファイルのパスの統一化。
　ファイルアップロード時、開発環境においてはstorage/app/public以下へ、本番環境においてはAmazon S3バケットへ保存されるため、パスが異なります。
　安易にif文で分岐させるのではなく、モデルクラスにアクセサを記述することで、コードの重複をなくし、ファイルパスの取得方法を統一しました。
```php:app/Models/Post.php
<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    use HasFactory;

        /**
     * The attributes that are mass assignable.
     *
     * @var array<int, string>
     */
    protected $fillable = [
        'title',
        'description',
        'level',
        'user_id',
        'file_name',
        'file_mimetype',
        'file_size',
        'text_id',
    ];

    // アクセサの戻り値をプロパティとして使用する。
    protected $appends = ['file_url'];

    // 中略

    // アップロードされた教案ファイルのアクセサ
    public function getFileUrlAttribute()
    {
        // Storage::url()で得られる結果は、使用するストレージドライバによって変わるため、ここで環境差異によるパスの変化を吸収する。
        return \Storage::url('public/files/' . $this->file_name);
    }
}
```

#### ②ファイルのアップロード・削除
このアプリの肝はファイルのアップロードなので、ここは妥協せずに作成しました。
工夫して開発した点として、下記が挙げられます。

 - 本番環境において、アップロードされたファイルはAmazon S3へ保存する。
 - 開発環境でのシーダー実行時、ファクトリで投稿データが作成されるのと同時にstorage/app/public以下にダミーのファイルが保存される。
 - マイグレーションのロールバック・リフレッシュ時に、storage/app/public以下に保存されたファイルが一括削除される。
 - 投稿時に、アップロードファイルのサイズ（KB・MBへ変換）、MIMEタイプを取得する（機能追加した時の使いやすさを想定して実装）。
 - 退会時に、自分がアップロードしたファイルが削除される。

#### ③PHPUnitを取り入れたバグの検知
　デプロイ時に自動でテストが実行されるようにインフラを構築し、バグがない状態でデプロイされるようにしました。
　FeatureテストとUnitテストのどちらもチャレンジしました。カバレッジとして、投稿時点で70％ほどあります。

#### ④ゲストログインの実装
　わざわざメールアドレスとパスワードを用意する手間を省き、ログインしなくとも機能を試せるように、ゲストユーザーを用意しました。
　アカウント情報の変更以外は、一通り機能を試すことができるように実装しました。また、アカウント情報の変更はフォーム側で防ぐだけではなく、ポリシーやゲートを使って不正な操作による変更も防げるよう工夫して実装しました。
![スクリーンショット 2023-06-12 23.26.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2916460/fa1c57a3-e5b0-7bd2-afa1-4f90b5f2034e.png)

#### ⑤ユーザにレビューしてもらい、指摘を元に改善（現在修正中）
　大学時代の友人たちに、このアプリを使ってもらい、使いごごちや改善すべき箇所を教えてもらいました。
　以下に、改善点の一部を抜粋します。
- レスポンシブ対応において、イラストと文字が逆の方が読みやすい。
- 「マークダウン記法」という用語には馴染みがない人もいるので、注釈を付けて説明した方が良い。
- 色が見づらい部分があるので、修正すべき。
- 検索フォームの項目にあまり必要ないものも入っているので、削除すべき。

　実際、自分で開発するだけでは絶対に気づけなかった部分の指摘をもらうことができ、ユーザ目線で制作物を見ることがいかに重要なものかを再認識することができました。

## 苦労したこと
#### ①UI/UXの調整（Tailwind CSS）
　サーバサイドエンジニアを目指しているとはいえ、デザインがボロボロのポートフォリオを作るわけにはいかないと思い、気合いを入れて学習しました。
　しかし元々教材で学習していたBootstrapではなく、自由度の高いTailwind CSSを利用したため、より高いCSSの知識が求められました。
　元々デザインを考えるのは苦手だったため、特にテーブルのレイアウトや、ホーム画面・ナビゲーションバーなどに独自性を持たせて作成するのは本当に骨が折れました。そこは頑張って、持ち前である継続力と根性で学習しました。GridレイアウトやFlexboxなど、使えるものは積極的に使い方を学習し、ポートフォリオにふんだんに取り入れました。
　また、妥協せずにレスポンシブデザインにも挑戦しました。努力の甲斐あって、スマホ版でもアプリを見ることができるようになっています。

#### ②FormRequestクラスを用いたバリデーションの実装
　投稿登録・更新処理でのバリデーションでは、事前に作成したテーブル定義書に沿ってルールを決めました。しかし、どのようにルールを設定したら良いか、最初は戸惑いました。また投稿のしやすさも考慮して設定する必要がありました。全てを必須項目にしてしまうと、気軽に投稿ができなくなってしまい、投稿するまでのハードルが上がってしまいますので、バランスを考えるのが大変でした。
　ルールの設定は、最新のLaravel公式ドキュメントや、他の方のGitHubを参考にしながら、使えそうと思った部分を参考にしながら記述しました。またテーブルがどのように関係し合っているか、つながりを意識してルールを記述しました。加えて、必須が多くても良いように下書き機能を追加しようと思いましたが、あえてファイル添付を必須項目から外しました。そうすることで、より簡単に投稿できるようになり、投稿のハードルが低くなったと思います。
　この点は、ユーザに実際に使ってもらって、そのレビューを参考に改善させていただきました。

#### ③S3からのオブジェクト保存・取得・削除
　ファイルアップロードの方法やS3の設定を深く理解する必要があり、本当に苦労しました。
　本番環境の構築において、今回はファイルの保存先にAmazon S3を利用しました。S3バケットへのファイル保存・削除は、なんとかうまく実装できましたが、ファイルの表示は一筋縄ではいきませんでした。
　うまくいかない原因を徹底的に考えました。「IAMユーザの権限に間違いはないか」「ファイルパスは間違っていないか」など、一つ一つ確認し試行しましたが何度やってもS3上のファイルにはアクセスできない状態が続きました。
最終的に判明した原因として、S3バケットポリシーに、ファイルへのアクセスが特定のIAMユーザにのみ許可されていたためでした。

**【S3バケットへのアクセス】**
**アップロード：IAMユーザ（S3FullAccess付与）**
**画像表示：不特定多数**

　上記が理解不足だったため、バケットポリシーにはバケットへのアクセスは、全員へ許可ではなく、「S3FullAccessを付与したIAMユーザのみ許可」という記述にしてしまいました。

#### ④AWS + CircleCIでの自動テスト・デプロイ
　インフラ構成図に記載させていただいたとおり、本番環境の構築ではCI/CDパイプラインとしてCircleCIを利用しました。
　インフラの領域だったというのもあり、ちょっととっつきにくかったなと個人的に思いました。
　苦労した点としては、自動デプロイ・自動テストの流れから勉強する必要があったため、理解にも構築にもがかかったところです。参考にした教材をそのまま真似るのではなく、自分の構築したい環境に合わせてカスタムする必要がありました。そのためテスト環境や各ツールの連携など、広範囲の設定をある程度把握する必要があり、学習から構築完了まで、約1ヶ月半ほどかかりました。幾度となく「build failed」の文字が画面上に突きつけられ泣きそうになりましたが、流れの把握や各種設定の見直しを行い、なんとか無事CI/CDパイプラインを導入できました。

## 今後の課題
　だてまきの開発における今後の課題は山ほどありますが、特に改善したい点・盛り込みたい点におきましては下記の通りです。

#### ①フロントエンドフレームワークの導入
　今回の開発では、**学習期間と転職開始時期を考慮し、ポートフォリオの完成を優先させたため**、JavaScriptフレームワークを利用せず、全てBlade Componentsのみで実装しました。そのため、JavaScript自体は学習しましたが、Vue.jsやReactといったフレームワークの学習はしませんでした。より優れたUI/UXを導入したいので、今後フロントエンドフレームワークの学習をしていきたいと思っております。

#### ②本格的な運営を意識した、セキュリティ面の強化
　管理者権限を持ったユーザを用意し、すべての機能を実行できるように設定しておりますが、それだけでセキュリティ面を補うには足りないと思っております。管理者画面を作成し、悪意あるユーザーの強制退会やコンテンツの削除などリジェクト機能を追加するだけではなく、セキュリティの知識をもっと学習して、より安全性の高いアプリ開発ができるようになっていきたいです。

#### ③Web技術の基本的知識
　基本情報技術者試験の教科書を読み全般的に学習しましたが、アプリ開発を通じてまだまだわかっていない部分が多いと感じました。プログラミングだけではなく、土台となるWeb技術の全般的知識を学習し基礎固めをしっかりしていくことで、より質の高いアプリ開発ができるエンジニアを目指します。

# 6. 独学での学習の道筋
ここからは、私自身の学習ロードマップにフォーカスして述べていきます。

## 独学を選んだ理由
　単純にお金がなかったという理由もありますが、なぜスクールに通わず独学での学習を選んだかについて、下記2点の理由があります。
（スクールや専門学校に通いたいという強い思いももちろんありました、スクールと独学、どちらが良い・悪いの話ではございませんのでご理解いただけますと幸いです。）

#### ①自分が本当にエンジニアになりたいのか、覚悟を試したかったから。
　元々、大学4年生中期にWebエンジニアという職業を知り、自分もエンジニアになりたい、と考え始めました。しかし、そういう憧れを抱いているだけで、実際のところは諦めずに本当に仕事をやり切れるのか、技術が好きになれるのか、と自問しました。実際にエンジニアとして働きだしてからは、次々と大きな壁に直面すると思いますし、それを自分の力で乗り越えていく必要があると思います。
　ただやってみたい、という憧れだけでやっていけるような職業ではないと感じました。自分が本当にやり切れるのか、**根性を試すために**あえてスクールや専門学校に通わず、自分で課題解決せざるを得ない環境に身を置きました。

#### ②自走力をつけたかったから。
　上記の理由と繋がっていますが、エンジニアとして働くためにより一層高い自走力を身につけることが重要だと感じました。独学で学習を進めることにより、自分の覚悟を試せるのと同時に、課題を自己解決できる自走力を身につけられるのではないかと思いました。
　実際、自分の学習状況や開発の進捗状況の管理してくれる人はいなかったため、独学を続けるためには高い自己管理能力が必要でした。学習を開始する前は、自分の自走力や積極性はまだまだ生半可であると自認するほど中途半端な人間でしたが、今現在ポートフォリオを一段落作り終えてみて、やりきる力が以前よりも付いたなと自分の成長に自信が持てるようになりました。

　**実際に独学は辛い面もありましたが、もちろん楽しい面も多くありました。単純に面白さや探究心などが生まれ技術に触れるのが好きになり、1年以上と長い間学習をコツコツと続けられました。技術が好きになった部分が大きいです。**

## 学習期間
- 2022年1月〜学習開始
- 2023年6月にアプリを一旦完成させる。

　週5日、働きながら学習を続けたため、ポートフォリオ完成までに割と時間が掛かってしまいました。
開始時点で、学習期間は1年間と想定しておりましたが、1年が経過した時点で目標のレベルには到底達していなかっため、学習期間を伸ばしました。
　学習の進捗管理や継続させた証明として、2022年2月からTwitterに学習記録を残しております。
　現状、学習を開始してからは、予定がある日を除いてほぼ毎日、コツコツ継続させてきました。

https://twitter.com/Mnsr_3/status/1597982628397080578

## 学習時に工夫したこと
自己学習を継続・管理するため、下記の工夫を凝らしました。

#### ①勉強会への参加・主催
　ZoomやGoogle Meetで友人たちと決まった時間に毎日、各々好きなことを勉強する場を開きました。開催することで、勉強するきっかけを毎日作ることができ、学習意欲を維持できました。また、勉強会の終わりに勉強内容を報告し合うことで、学習内容のアウトプットができました。

#### ②実務を想定した開発
　実務未経験なので、今後プロジェクトに参画したときにすぐに戦力になれるよう、少しでも実務を想定してポートフォリオを作成しました。特に意識付けした部分は下記のとおりです。

- **Git/GitHubの使い方**
　機能の追加、修正をする際は、必ずブランチを切って開発しました。また、プッシュする際はプルリクエストを出し、レビューをしてからマージするよう心がけました。また、積極的にissueを発行し、解決したらクローズするといった手順を踏んで開発を進めました。

- **なるべく公式のドキュメントを読む**
　新しい技術に触れるときや、実装の仕方がわからなくなったときは、まずは公式ドキュメントに目を通しました。難しい言い回しや技術用語が列挙しており少々読みづらいですが、事前知識として先にわからない用語を調べ、それから公式ドキュメントに戻るようにして、読み慣れるように努力しました。

- **エラー時は、エラー文を読んで仮説を立ててから修正する**
　エラーメッセージが出たときは、目を通して理解するようにしました。読んでも理解できないときは翻訳して内容を大まかに理解したあと、エラーの特定に移行するようにしました。
　その時に頭の中で、こうしたからこのようなエラーが出たのではないか、と自分の中で仮説を立てていました。そうすることで、エラー原因を特定できたときの理解度が上がり、「なんとなく直したらうまく動いた」という状況を回避できます。

#### ③目標を設定し、スケジュールを立てて開発する
　Notionを使用し、1週間の作業内容をざっくり考えてから学習・開発を進めました。また、目標達成度がどれくらいであるか、自分なりに振り返り、明日進めるタスクを割り出してから寝るように心がけました。
　特に独学での学習なので、スケジュール計画と進捗管理は怠らないよう意識して、学習・開発を進めました。

## 7. お世話になったサービスや記事
技術別に、メインで使用した学習教材やサイト、記事を紹介させていただきます。

#### ■ HTML/CSS/PHP/SQL/Docker
- [独学エンジニア](https://dokugaku-engineer.com/)
- [Progate](https://prog-8.com/)
- [ドットインストール](https://dotinstall.com/home)
こちらはHTMLやCSS、SQLの知識だけではなく、Docker、Laravelの基礎知識をつけるためにもお世話になりました。

- [Udemy](https://www.udemy.com/)
  - [ちゃんと学ぶ、PHP+MySQL（MariaDB）入門講座](https://www.udemy.com/course/php7basic/)
  - [ちゃんと学ぶ、PHP 7/8入門講座](https://www.udemy.com/course/php-master/)
 
#### ■ Laravel
- [Newmonz Laravel入門&実践](https://newmonz.jp/lesson)
これが無料で見られるのか！って思うほど、このサイトだけでかなり学習できます。
Laravelの学習において、相当お世話になりました。控えめに言って神教材です。
人におすすめするときは絶対にこちらを紹介します。

https://newmonz.jp

- Youtube
  - [Laravel入門(全13回)](https://www.youtube.com/watch?v=cO9Kfh3lypg&list=PLCyDm9NTxdhLnA4tH5ToQR1K1LcWIAdOa)
  - [【Laravelチュートリアル決定版】初心者でも作れるノートアプリを現役Laravelエンジニアが解説](https://www.youtube.com/watch?v=NLqO2b3xEW0&t=1465s)

https://www.youtube.com/@fuku-programming

https://www.youtube.com/@yumaapp

#### ■ AWS
- [Udemy](https://www.udemy.com/)
  - [AWS：ゼロから実践するAmazon Web Services。手を動かしながらインフラの基礎を習得](https://www.udemy.com/course/aws-and-infra/)

#### ■ CircleCI
- [Techpit](https://www.techpit.jp/)
  - [Laravel × CircleCI × AWSで学ぶCI/CD](https://www.techpit.jp/courses/78)

#### ■ テストコード（PHPUnit）
- [Techpit](https://www.techpit.jp/)
  - [Laravelでテスト駆動開発を学ぼう！](https://www.techpit.jp/courses/92)
- [SLスタジオ](https://sls.ideal-growth.jp/)　
  - [PHPUnitテストコース](https://sls.ideal-growth.jp/24/chapter)

#### ■ その他
- 山浦清透さんの教材
  - [Git： もう怖くないGit！チーム開発で必要なGitを完全マスター](https://www.udemy.com/course/unscared_git/)
  - [もう怖くないLinuxコマンド。手を動かしながらLinuxコマンドラインを5日間で身に付けよう](https://www.udemy.com/course/unscared_linux/)
  - [JavaScriptの「基礎」が1時間で分かる「超」入門講座【初心者向け】](https://www.youtube.com/watch?v=E08jeQBa1D0)
  - [ゼロから半年でWeb系エンジニアになろう【完全まとめ版】](https://www.youtube.com/watch?v=O9D18lhLa2Y&t=2683s)
 
- [Linux標準教科書](https://linuc.org/textbooks/linux/)
- [サル先生のGit入門](https://backlog.com/ja/git-tutorial/)

- [キタミ式イラストIT塾 基本情報技術者](https://www.amazon.co.jp/%E3%82%AD%E3%82%BF%E3%83%9F%E5%BC%8F%E3%82%A4%E3%83%A9%E3%82%B9%E3%83%88IT%E5%A1%BE-%E5%9F%BA%E6%9C%AC%E6%83%85%E5%A0%B1%E6%8A%80%E8%A1%93%E8%80%85-%E4%BB%A4%E5%92%8C03%E5%B9%B4-%E3%81%8D%E3%81%9F%E3%81%BF%E3%82%8A%E3%82%85%E3%81%86%E3%81%98/dp/4297117819/ref=sr_1_8?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=FC0PE5GHYDJH&keywords=%E5%8C%97%E8%A6%8B%E5%BC%8F+%E6%9C%AC+%E4%BB%A4%E5%92%8C3&qid=1686725506&sprefix=%E5%8C%97%E8%A6%8B%E5%BC%8F+%E5%9F%BA%E6%9C%AC+%E4%BB%A4%E5%92%8C3%2Caps%2C163&sr=8-8)

- [アジャイルサムライ−達人開発者への道](https://www.amazon.co.jp/%E3%82%A2%E3%82%B8%E3%83%A3%E3%82%A4%E3%83%AB%E3%82%B5%E3%83%A0%E3%83%A9%E3%82%A4%E2%88%92%E9%81%94%E4%BA%BA%E9%96%8B%E7%99%BA%E8%80%85%E3%81%B8%E3%81%AE%E9%81%93%E2%88%92-Jonathan-Rasmusson/dp/4274068560/ref=sr_1_1?crid=2VMMX7JR527SI&keywords=%E3%82%A2%E3%82%B8%E3%83%A3%E3%82%A4%E3%83%AB%E3%82%B5%E3%83%A0%E3%83%A9%E3%82%A4&qid=1686725324&sprefix=%E3%82%A2%E3%82%B8%E3%83%A3%E3%82%A4%E3%83%AB%2Caps%2C191&sr=8-1)

- [リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック](https://www.amazon.co.jp/%E3%83%AA%E3%83%BC%E3%83%80%E3%83%96%E3%83%AB%E3%82%B3%E3%83%BC%E3%83%89-%E2%80%95%E3%82%88%E3%82%8A%E8%89%AF%E3%81%84%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E6%9B%B8%E3%81%8F%E3%81%9F%E3%82%81%E3%81%AE%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%81%A7%E5%AE%9F%E8%B7%B5%E7%9A%84%E3%81%AA%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF-Theory-practice-Boswell/dp/4873115655/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=RE5YQHIFA03&keywords=%E3%83%AA%E3%83%BC%E3%83%80%E3%83%96%E3%83%AB%E3%82%B3%E3%83%BC%E3%83%89&qid=1686725392&sprefix=%E3%83%AA%E3%83%BC%E3%83%80%E3%83%96%E3%83%AB%E3%81%93%2Caps%2C179&sr=8-1)

#### ■ ポートフォリオ作成時に参考にさせていただいた記事やサイト
何度も何度も拝見するうちにファンになりました。
- [【Laravel / Vue / Docker / AWS / CircleCI】実務未経験がポートフォリオとして独学WEBアプリ開発](https://qiita.com/kazumakishimoto/items/2ac669119c968e30ae37)
- [【独学ポートフォリオ録🔰】エンジニア転職までの半年間【Laravel・Docker・AWS】](https://qiita.com/derasado/items/ed8b22881c8bc1f28c21)
- [ポートフォリオとして、絵本読み聞かせ記録のWebアプリを作成しました。【Laravel / Docker / AWS / CircleCI】](https://qiita.com/ryamate/items/c3b4f63f8d94ab090bf8)
上の記事を執筆されたやまてさんに、以前Twitterにて質問のDMをさせていただいたのですが、非常に丁寧にお返事をくださいました。優しくて本当に良い方でした。

- [もんしょーさんのYoutube動画・ブログ](https://www.youtube.com/@Monsho_)
独学で学習している人にとってためになる知識をたくさん配信されています。
  - [【これだけでOK】ゼロからPHP入門【環境構築〜作品作りまで】](https://www.youtube.com/watch?v=8NvbH08cYnc&t=565s)
  - [【シンプル解説】Laravel9でゴミ箱付きToDoリストアプリを作る](https://simablog.net/todo-app-laravel/)
こちらのYoutube・ブログを運営されている、もんしょーさんのランチ相談会に参加させていただきました。当時私が感じていた不安や悩みを真摯に聞いてくださり、本当に嬉しかったです。また機会があったらぜひ会ってお話ししたいです。

## 8. おわりに
　ここまでの勉強期間を振り返ってみて、難しいな、辛いなと思うような大きな壁に何度もぶち当たってきたなと感じます。しかし、それを上回る楽しさやワクワク感があったからこそ、学習を続けることができました。自分でちょっとやってみよう、解決してみようとなんでも積極的にトライしてきたからこそ、楽しさ・面白みを大きく感じることができたのではないかと思っています。なので、たとえこの道が遠回りになっていたとしても、独学を選択して本当に良かったと思っております。
　これから転職活動をしていく予定ですが、エンジニアとしてスタートを切れた後も、学び続ける姿勢を忘れず、日々貪欲に学習していきます。そして**ユーザのニーズに適切に応え、価値を提供できるエンジニア**に必ずなってみせます。

 （2023/11/3 追記）
 約2ヶ月半の転職活動の末、Web系受託開発企業から内定をいただくことができました。
 2023年9月からサーバサイドエンジニアとして働き始めました！
 遠回りにはなってしまいましたが、ここまで地道に頑張ってきて本当に良かったです👍


稚拙な文章にも関わらず、この記事を読んでくださり、本当にありがとうございました:bow_tone1:
もし何か、間違っている点がありましたら、教えていただけますと幸いです。