コロナ渦の中、自社開発企業に内定した学習ロードマップ

けいご

初めまして！けいごと申します。
今回はコロナ渦の中、自社開発企業に内定したl学習ロードマップとして私が最短・最適と考える学習方法について書いていこうと思います。
私の取った学習方法は完全独学のものなので、多くの方との差別化なり、自走力を持った人材として転職活動を有利に進めることができます。
書きたい事が多すぎて9300文字を超えるボリュームになってしまいましたので、ゆるく読み進めて頂ければと思います。内容にご満足頂けなければ返金保証も付けておりますので、ご安心下さい😇
(有料→無料にしましたので、配布物等は停止しています)

駆け出しエンジニアの学習の参考になれば幸いです。

自己紹介

まずは自己紹介から。

・25歳
・建築専門学校卒
・就職した建設会社を3ヶ月で退職した第２新卒
・勉強前は明日生きるお金も厳しい状態
・FXで詐欺にあい、借金80万円
・プログラミング未経験
・完全独学8ヶ月(9/13時点）
・趣味は麻雀とYouTube視聴

こんな感じで学習前は、学歴無し・仕事無し・お金無しの３つを兼ね備えたまさにないない状態でした。（借金は継続中です。）
お金に関しては、実家に戻ったことと週７でバイトすることで約30万円程学習資金を用意しました。
何かご質問あればTwitterのDMまでお気軽にご連絡下さい😊

このnoteについて

このnoteはHTML〜Laravel習得までを記載した学習ロードマップです。
私が完全独学8ヶ月間学習した内容の全てを詰め込み、転職活動を開始する上で最短・最適と言える学習ロードマップに仕上げました。
学習形式としては、このnoteの内容と購入者特典の専用Slackに入って頂き、そこで参考にした教材・サイトをご紹介し、各々のペースで学習して頂く形です。
ただし、AWS・CircleCI・Dockerのインフラ構築まで学べるように作成していますので、習得に要する時間・教材費用なども少なからず必要になってきます。（それでも1.5万〜2万円程です。）
ですので、このnoteをおすすめできるのは以下の方です。

・プログラミングで本気で食べていきたい方
・プログラミングを楽しんで取り組める方
・費用をかけてでもしっかり基礎から学びたい方
・PHP/Laravelを勉強したいけど勉強の仕方がわからない方
・AWS・CircleCI・Dockerを習得したい方
・面接の準備・心得を知りたい方
・同じ言語を学習するコミュニティに所属したい方

逆におすすめしないのは以下の方です。

・楽して学習したい方
・必要最低限の学習で転職活動したい方
・費用を全くかけたくない方
・プログラミングを稼ぐ手段と割り切っている方
・マナーのない方(専用Slackでは強制退会処置をさせて頂きます）

前提でもお伝えしますが、皆さんも知っての通り、プログラミングは難しいです。
簡単と言えば聞こえはいいですが、スキルを習得するのは時間もかかるし、コストもかかります。
ですが、逆に言えば習得さえしてしまえば、それだけ価値がある、希少性があるということです。
私はこれを意識することで毎日モチベーションを保って学習することができましたので、是非皆さんにも意識して頂きたいと思っています。

【購入者特典ご紹介】

・購入者特典その1

私が実際に作成した成果物のソースコードの共有
５つの成果物のソースコードを参考にご自身の成果物を作成頂けたらと思います。
私が作成したポートフォリオサイトで何を作ればいいのか、具体的なイメージが掴めるかと思います。

・購入者特典その2

私が実際に使用した職務経歴書の共有
私が転職活動時、実際に使用した職務経歴書です。
参考にしてご自身の職務経歴書を作成して頂ければと思います。

・購入者特典その3

専用Slackへの招待
チャンネル総数は25チャンネル。
ポートフォリオの共有・共同開発・格安のメンターサポートなど、オンラインサロンに引けを取らないほど充実したコミュニティになるよう作成しました。
note内でご紹介する教材・サイト等はそちらで共有致します。
また、下記のGoogle検索の考え方のコツを使っても、どうしてもわからないところ等があればそこでご質問頂ければと思います。
人数が増えれば同じFWのLaravelを学習しているので、共同開発も容易だと思います。
交流し、共同開発の実績を積んで頂ければと思います。

前提

プログラミングは楽しいこと

わざわざこのnoteを見て下さった方に一番お伝えしたいのが
プログラミングは楽しいということです。
確かに難しい部分は多いです。
事実、私も１０回以上は１０万円以上するMacを地面（ベットの上）に叩きつけました（笑）。
行き詰まって成果が出ず、ストレスも貯まりますし、「自分には才能がない・・・」と思って辞めたくもなります。
ですが、まずはそれでも楽しいと思うことが第一歩です。
私は完全に独りで学習を続けていたので、それが一番大事だと感じました。

また、ひとつでも一から成果物を作り上げた方なら感じると思うのですが、
「こんなことができるのか！！ならこれを使って、あんなこともできるかもしれないし、こんなことができるじゃん！！」
と思う瞬間があります。
その時、ワクワク・ドキドキしますし、何より楽しいです。
私は今後もこの気持ちで学習を続けていきたいですし、是非皆さんにもこの気持ちを味わって欲しいです。
何かできるようになったときに色々妄想に浸るのが最高におすすめです（笑）。
成果物を作成したことがない方は以下のロードマップに沿って、まずは一つ作成してみましょう。

Google検索の考え方のコツ

Google検索は、初心者が難しいと感じる部分かと思いますが、実際は特に難しいというわけではありません。
「わからない！ でも、私（天才）がわからないのなら同じ思いの人は絶対にネットにいる！」
こう考えられれば、もう勝ちです（笑）。
Googleは知識の宝庫です。
手を替え、品を替え、検索すると必ず自分の欲しかった情報に辿り着けます。（ニッチな技術、あまり使われていない技術を除く）
私が検索した例でいえば、一つのサーバーで複数のサイトのバーチャルホスト作成したい時、「バーチャルホスト 複数」といった感じです。
「公式リファレンスでいいじゃないか」という声も聞こえてきそうですが、初心者には難しく、情報量が多すぎてよくわからないと感じています。
私は特にQiitaでわかりやすい記事を探すのをおすすめします。
LGTMが多い記事が一番いいですね。

後もう一つは、自分のレベルに合った学習教材を選ぶことも重要です。
「自分には難しそうだな・・・」と感じたら一旦撤退するのも手です。
本や記事での学習はハンズオン形式のものをおすすめします。
詳しい理由は専用Slackでも共有しますが、技術書はあくまで「インデックス」として利用し、深く読み込まない方がいいかと思います。

伝えておくべきこと

学習ロードマップについて
この学習ロードマップには、8ヶ月間の私の学習内容全てを詰め込みましたが、内容は至って特別なものではないですし、オンラインサービスや良質な教材・サイトを最大限活用して学習していくものです。私もプログラミング学習の際に高額のオンラインスクールに入りましたが、正直考え方さえ分かれば「15万円以上も払う必要なかったな…」と感じていて実際身についた技術も大きく向上したという訳ではなかったです。自分で書籍を選んで買って、AWS.Docker.CircleCIを身につけてはじめてスタートラインに立てたと感じました。
私は、何かの技術習得する方法はシンプルなものだと考えています。
基礎を学習する→チュートリアルを真似する→自分のオリジナルで作成する
上記をPDCAサイクルによって高速で回していくことで必ずどんな技術でも習得できます。
Ruby 、RailsやVue、Reactなど、他の言語・スキルを学習中の方も学習ロードマップの流れを参考にして自分の教材学習に取り組んでも全然構いませんし、少しでも技術習得のヒントになればいいと考えています。
購入者特典の専用Slackも最大限ご活用頂ければと思っております。

転職活動について
前提の最後にお伝えしたいのが、コロナ渦の中で現在（2020/9/13)の転職は相当厳しいという事実です。
私自身かなりの準備と時間をかけて動き出し、直接応募で大阪の多くの企業に応募しましたが、感覚的にはポートフォリオも見て貰えていないという印象でした。
（最終手段としてTwitterから会社責任者を探してDMを送ることも検討していました。）
実務未経験の壁は相当大きいです。
東京都市部での転職活動・レベルの高いポートフォリオサイト・考えに考えた職務経歴書など、様々な努力が必要になります。
それでも、私が内定頂けた自社開発企業様には「ポートフォリオを見てやっていけるだろうと判断した」と言って頂けましたので、決して諦めず学習ロードマップに沿って学習を続けていければ、内定は獲得できると思っています。
（現役エンジニアの方からコードレビュー頂いた際に、自社開発に採用されるために改善・追加した方がいいと言われた点を専用Slackで共有致します。）

第1章〜HTML・CSS・JavaScriptを学ぼう〜

HTML・CSSの学習
最初の教材として私のおすすめはProgateというプログラミング学習サービスです。
環境構築はプログラミング学習最初のハードルと言っても過言ではなく、挫折する初心者はとても多いです。
Progateは環境構築を自分でする必要がないので、すぐに学習に取り組めます。
私も最初に取り組み、簡単に学ぶ事が出来ました。
HTML ＆ CSS 初級編 〜 HTML ＆ CSS 上級編 から取り組んでいきましょう。 

理解するだけで覚えなくていい
お伝えしておきたいのがプログラミング学習においては覚えなくていいということです。
個人的にはh1、divタグですら覚えなくていいと思っています。
たまに覚えておきたい！頻出〇〇タグみたいな記事がありますが、普通に忘れますし、作ったものを見返したり、ググれば十分です。
書いていたら勝手に覚えていきますので、安心してください。

道場編は出来なくても気にしなくていい
Progateに取り組み、まず躓くのが道場編かと思いますが、ページを見返してもわからなければ、気にせず答えを見て理解し、がんがん進めていきましょう。
重要なのは成果物の作成です。
ここで本当に理解できているか問われるひとつのポイントになります。

Bootstrapの学習
道場編で成果物を作成できる力はもうあると思いますが、一緒にBootstrapも身につけておきましょう。
Build A Complete HTML & CSS Website with Bootstrap 4
Responsive Bootstrap Website Start To Finish with Bootstrap 4, HTML5 & CSS3
上記の２つの動画は英語ですが、字幕をつければなんとか理解できます。
個人的には難しかったので、写経だけはして動画と同じように動かすことをおすすめします。
7~8割ぐらい理解できたかな？と思えれば次に進んでいいかと思います。

Javascript・jQueryの学習
Javascriptに関しては正直あまり勉強した記憶がありません。
私が使ったのは基礎中の基礎の技術かと思うので、フロントエンドエンジニアを目指される方は別の知識が必要です。
ProgateのJavascript I をすれば十分かと思います。
後はググれば大体は理解出来ますし、記述もそこまで難しくないです。
どうしてもわからなければ、専用Slackでご質問頂ければと思います。

成果物の作成
ここが1つ目のステップです。
ここまでの知識で一つ成果物を作ってみましょう。
題材はなんでもいいのですが、それでは混乱させてしまうと思うので私が作ったものをご紹介します。

画像1

ソースコード GitHub(keigooba/korona)
コロナを題材にした特設サイトです。（コード自体はかなり汚いので、書き方は参考にはしないでください🙇）
デザインはWantedly（ウォンテッドリー）のLPや「おしゃれなLP」などで検索し、ヒットしたLPの再現を目指しました。
成果物を作成する。それがゴールです。
固く考えず、簡単そうなLPを探して再現を目指しましょう。（デプロイにはHerokuを使用しましょう。私が作成した下記記事をご参照下さい。herokuでLPを無料で公開する方法）

WFの作成
ここは個人で作成するか判断して頂いても構わないのですが、個人的には成果物を作成する前にWFの作成をおすすめします。
初学者がHTML、CSSで詰まる原因は主にレイアウトの理解にあるかと思っています。Adobe XDで再現したいLPを真似てWFを作成すると、文字の位置などを考えることになるので、同時にコーディングする際に使用するHTMLタグやCSS設計を明確に考える事ができます。
私が初めてWFを作成したのはLaravelでの開発時ですが、もっと早くから作成すればよかったと後悔しました。
まずコードが綺麗になりますし、コーディング時に全く詰まることがなくなります。私が実際に作成したのがこちらです。

画像2

Adobe XDで作成したWF   Attendance（WF）
 時間は掛かりますが、AdobeサイトのAdobe XDチュートリアルで作成方法を理解して、是非作成に取り組んで頂きたいです。

エディタについて
特にこだわりがなければVSCodeを使用しましょう。
私も他のエディタの使用経験がありますが、VSCodeが一番使いやすかったです。（初期設定は「VSCode 初期設定」でググって設定）
色々なエディタを試して自分に合ったものを選ぶのもいいかと思います。

Gitを使用しよう
バージョン管理には、モダンな自社開発企業ではほぼ間違いなく使われているGitを使用しましょう。
Githubの毎日の使用（通称草生やし）は初学者が考えている以上に転職活動時、重要視されています。(かなりの確率で使っているか確認されます。）
個人開発でも面倒ですが、すぐにでもタスクを切り分けて、こまめにコミットしましょう。
Gitの使用方法は私が作成した下記の記事をご参照下さい。
プログラミング初学者がGitで擬似開発する方法

コードの書き方
コードの書き方は今まで作成した道場編のコードやBootstrapのコードを真似しましょう。
実務未経験が最初に読むべきと言われるリーダブルコードに習って書くことができれば転職活動時の評価も上がります。
最初は難しいですが、私が作成した下記の記事を参考頂ければ、かなり綺麗なコードが書けるかと思います。
リーダブルコード ~実務未経験が知っておきたい15のポイント~

ここまでの学習について
ここまでの学習お疲れさまでした！！
ここまでの学習過程を終えれば、作成までの考え方・ 作成する力はついているかと思います。
成果物を作ることで理解できますし、格段に成長します。
この後の学習も基本的には同じことです。
コツコツ積み上げれば必ずできるようになります。
作りたいものがあればこれからもどんどん作成していきましょう。

第2章〜PHP・MYSQLを学ぼう〜

PHP・MYSQLの学習
PHP・MYSQLの学習もProgateを使用します。
PHP I と MYSQL I をすれば基礎的な部分は十分かと思います。
PHPの練習用として私が作成したのがこちらです。

画像3

ソースコード GitHub(keigooba/Opanda)
身内の会社のマスコットキャラを題材にした四択問題サイトです。
ifの分岐処理とPHPのpost送信の理解を深めるために作成しました。
作成の参考にしたサイトは、専用Slackにてご紹介します。

環境構築について
PHPの環境構築にはMAMPを使用しましょう。（WindowsならXAMPP）
最初からDocker等で環境構築しても構わないのですが、少しハードルが高いですし、開発するまでに時間がかかるので、挫折率も高まります。
（私はDockerで環境構築するのに一週間程掛かりました。）
すぐに開発に着手できるMAMPで学習を進めていきましょう。

CRUDの作成
CRUDとは、登録・参照・更新・削除の4つの主要機能を指します。
この機能を持たせたシステム開発ができることが2つ目のステップです。
これらの機能については、オンライン学習サービス「ドットインストール」の「PHP5.6でログイン機能を実装しよう」で一通り学習することができます。
持たせる機能は、「PHP5.6でTodo管理アプリを作ろう」で学習できるかと思います。
かなりのボリュームで内容も難しいかと思いますが、私もPHP・MYSQLの理解に1ヶ月、作成に1ヶ月の期間を要しました。
その際に作成したのがこちらです。

画像4

ソースコード  GitHub(keigooba/yourself)
様々な求職者と連絡を取れる連絡掲示板アプリです。
前職、年代別、年代表示順を指定したユーザー検索を可能にしたり、ユーザー詳細ページで詳細情報を表示させる処理等を作成しました。
この学習で「プログラミング辞めたい・・・」と何度思ったか、数えたらキリがありません（笑）。
そんな私からの学習のアドバイスとしては、理解した内容をそのままコピペして色々動かしてみるのが一番理解が深まるかと思います。
まずは名前やメソッド名を変えてちゃんと動かしてみることからです。
「なるほど、こう書いてあるからこう動くのか〜」ぐらいの理解でOKです。
休憩を挟みながら、コツコツ積み上げていきましょう。

第3章〜AWS・Docker・CircleCIを学ぼう〜

AWS・Dockerの学習
ここからはいよいよインフラ構築に入っていきます。
私は、ここが3つ目のステップであり、1番楽しくない学習ですが、1番大事な学習かと思っています。
今まで理解していなかった設定ファイルの内容や隠しファイルの意味をここで明確に理解することが出来ました。
ここを理解することでプログラミングがもっと楽しくなると思います。
参考にした教材・サイトは、専用Slackにてご紹介します。

LAMP環境構築
Dockerでローカル環境構築・AWSで本番環境構築・CircleCIでCI/CDパイプラインを構築します。
FWにLaravelを使用するので、LAMP環境（Linux・Apache・MySQL・PHP（perl, python））を構築しました。
私が作成した下記の記事は使用したLaravelの技術を纏めましたが参考文献を参照すれば、LAMP環境・CI/CDパイプラインが構築できると思います。
Laravel7 わたしのインデックス
一応下記に私が作成したDocker環境のソースコードを記載しますが、できる限り見ないで作成して頂くようお願い致します。
ソースコード  GitHub(main_attendance_docker)

第4章〜Laravelを学ぼう〜

Laravelの学習
ここが最後のステップです。
ここまで学習を終えた方ならFWの習得にそれ程時間は掛からないかと思います。
Laravel習得の参考にしたサイトは先程のLaravel7 わたしのインデックスの記事に記載しています。
チュートリアルを一通りすれば、MVCモデルの簡単なアプリケーションなら作成できるかと思います。
成果物として最後に私が作成したのがこちらです。（AWSでデプロイしているので、現在稼働は停止しています）

画像5

ソースコード  GitHub(keigooba/main_attendance)
身内の会社が勤怠管理システムが欲しいと要望があり作成しました。
ユーザー登録をすることで追加され、出勤・退勤の打刻を可能にし、出退勤状況から日付検索・削除するなどを可能にしました。

設計書の作成
成果物の作成に入る前に設計書を作成しましょう。
私が作成したのがこちらです。
設計書（Googleドライブ）
要件定義で機能の洗い出しを表に簡単にまとめたり、draw.io使用してイメージ図などを作成しました。
設計書は、システムの流れを明確にしたり、考えたテーブル設計を記録するのに大変便利です。
私は今回あまり設計書通りできなかったですが、excelやdraw.ioの勉強になりましたし、タスク管理は受託開発の見積もり書を作成する際の練習にもなるかと思います。

第5章〜面接の準備・心得〜

面接の準備
私は紙に手書きで言うことを書いたりしてメモしてましたが、それはあんまり役立ちませんでした。
実際は面接というより「会話」でしたので。
なので、準備すべきことは一つだと思っています。
・徹底した企業研究
企業研究すれば色々なことが見えてきます。
その企業がどういった経営・システム開発をしているのか、どうやって収益化しているのか・・など。
企業側も「自社の経営・システムに関心がある人」に入社して貰いたいはずです。
実際、「自社システムのこういった点が気になっている・どう作成しているのか」といった話で凄く盛り上がりました。
この点はしっかり覚えて面接に望みましょう。

面接の心得
私が面接直前に一番意識したことは一つで、色々考えましたが必要なことは結局それだけでした。
「自分の未来の展望を自信を持ってキラキラ楽しそうに話す。」
これで面接は余裕で突破できるでしょう。

第6章〜購入者特典のご案内〜

・購入者特典その1
私が実際に作成した成果物のソースコードを共有します。
ソースコード  GitHub(keigooba）
是非自由にご活用頂ければと思います。

・購入者特典その2
私が実際に使用した職務経歴書を共有します。
【Word】20200827_職務経歴書_大庭慶吾（Googleドライブ）
転職に成功した方の職務経歴書を参考に作成しましたので、ご活用頂けるかと思います。

・購入者特典その3
専用Slack「Laravel学習サロン」へご招待致します。
多数のチャンネルを取り揃え、メンターサポートもございますので、最大限ご活用頂き、ご自身の学習に役立てて頂ければと思います。
下記に私のメールアドレスを記載しますので、そちらにお名前と「専用Slack招待希望です」とご記載頂き、お送り下さい。
確認出来次第、専用Slackにご招待させて頂きます。
慶吾のメールアドレス

第7章〜あとがき〜

ここまで長文にお付き合い頂きまして、誠にありがとうございました。
ご購入頂きました全ての方々に感謝申し上げます。

最後に、私のTwitterのトップ固定ツイートにいいねと感想のコメント付きリツイートをして下さった方には
1.TwitterのDMでなんでもご相談
2.私が今でも活用しているBoost Noteの具体的な学習方法のnote
上記をプレゼントさせて頂きます。
noteは確認でき次第、TwitterのDMにてお送りさせて頂きます。
（その際、TwitterのDMを送れるよう設定お願い致します。）

このnoteを通じてあなたのエンジニアライフが楽しくなる事を心から祈っております。
ありがとうございました。


この記事が気に入ったらサポートをしてみませんか？