この記事はdotD公式noteの転載です。

執筆者は、Server-side Engineer　前田翔平さんです。

https://www.wantedly.com/companies/company_7005547/post_articles/372001

こんにちは！dotDでmeepaの開発を担当している前田です。

meepa | 子どもの本当の好きに出会う 課外活動マッチングサービス子どもの本当の好きに出会う 課外活動マッチングサービス。meepaは親の思い込みや限られた情報にとらわれない、子どもの「本meepa.io

今回は、Web系エンジニア2年目の僕が、大学生4年生の頃に「Web系エンジニアになるために半年間でやったこと」をまとめてみました。

Web系エンジニアを目指してプログラミング学習を行なっている方や、独学したいけどプログラミングの学習方法がよくわからないという方にぜひご覧いただきたいです！

目次

1. 1ヶ月目
2. 2ヶ月目
3. 3ヶ月目
4. 4ヶ月目
5. 5~6ヶ月目
6. （おまけ）6ヶ月目以降
7. まとめ

1ヶ月目

まず何を始めたらいいのかが全然わからなかったので、「プログラミング学習方法」「プログラミング 独学」などといったキーワードでググりまくったり、YouTubeでプログラミング系動画を見たりしていました。

色々調べていると、Progateというブラウザ上で学べる初心者向けプログラミング学習サービスがどうやら良さそうということで、まずは「HTML & CSSコース」「JavaScriptコース」「jQueryコース」を2日か3日くらいで一気にやりました。

Progate(プロゲート) | Learn to code, learn to be creative.Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。prog-8.com

次に、学んだことを使って何か自分で作ってみたいと思い、Webページを作ろうと思いました。
ですが、「こんなWebページを作りたい！」という思いは特になかったので、実際に存在するWebページを模写してみようと思いました。
模写を始めるために、以下の記事を参考にして、HTML / CSS / jQueryでiSaraというページを模写しました。

Webサイトをコーディング模写するやり方と使用するツール | HPcode（えいちぴーこーど）コーディング上達の近道にサイト模写があります。コーディング模写は公開されているWebサイトを見て、ソースコードを見ずに似たhaniwaman.com

模写の段階で、Chromeのデベロッパーツールの基本的な使い方を学び、Bracketsというテキストエディタでコードを書きました。

2ヶ月目

2ヶ月目もプログラミングに関連することについてググったり、YouTubeで色々な動画を漁っていました。
そして、現役のWeb系エンジニアの勝又健太さんというエンジニア系YouTuberさんの動画を見つけ、他のエンジニア系YouTuberさんよりもとても説得力があり信頼できそうだなということで勝又さんの動画を沢山見るようになりました。

KENTA / 雑食系エンジニアTVテクノロジーやビジネスやライフスタイルに関する様々な情報を発信する、ワイドショー的なチャンネルです。 ビジネス、キャリアwww.youtube.com

勝又さんの動画を見て、いきなりプログラミングを始めるよりまずはコンピューターサイエンスの基礎知識を身につけることが重要だと知り、以下の参考書でコンピューターサイエンスの基礎知識を学びました。

キタミ式イラストIT塾 基本情報技術者 令和03年www.amazon.co.jp2,700円(2022年06月24日 01:06時点 詳しくはこちら)Amazon.co.jpで購入する

次に、色々調べてWebアプリケーションを開発する言語としてRubyが良さそうだったので、Progateで「Rubyコース」とそのフレームワークの「Ruby on Railsコース」を学びました。

また、エンジニアとしての必須知識を身につけるために「Command Lineコース」「Gitコース」「SQLコース」もあわせて学びました。

3ヶ月目

1、2ヶ月でWebアプリケーションを開発する準備を整えて、実際にWebアプリケーション開発を経験するために、「Railsチュートリアル」という有名な学習サービスを使って、TwitterのようなWebアプリケーションを作りました。

Ruby on Rails チュートリアル：プロダクト開発の０→１を学ぼうSNS開発やWebサイト制作が学べる大型チュートリアル。作りながら学ぶのが特徴で、電子書籍や解説動画、質問対応、社員研修、railstutorial.jp

教材通りにコードを書いても面白くないなと思ったので、自分なりに機能を追加したりカスタマイズしたりして取り組んでいました。
テストコードを書くのにMinitestではなくRSpecを使ったり、静的コード解析ツールのRuboCopを入れたり、CicleCIを導入してGitHubへのpush時にRSpecとRuboCopを走らせたりしていました。
これらのツールの導入方法と使い方は主にQiitaの記事を参考にしていました。

ちなみに、3ヶ月目からエディタはBracketsからVisual Studio Codeに変えました。

4ヶ月目

RailsチュートリアルでWebアプリケーション開発の流れを学べたので、「自分でオリジナルアプリを作ってみたい！」と思い、作りたいアプリを思い浮かべ、どんなアプリを作るのかが決まってからは、夢中で開発していました。

また、コンテナ型の仮想化プラットフォームである「Docker」を知り、「すごく便利 & Dockerを使っているチームは多いだろう」と思ってDockerを学び、オリジナルアプリに導入しました。
Dockerは入門DockerやQiitaの記事で学びました。

入門 Dockery-ohgi.com

オリジナルアプリの使用技術一覧【フロントエンド】・HTML・CSS・jQuery【バックエンド】・Ruby・Ruby on Rails【データベース】・MySQL【開発環境】・Docker・Docker Compose・nginx・puma【テスト】・RSpec・FactoryBot【その他】・RuboCop・CircleCI

5~6ヶ月目

オリジナルアプリを作ってみて、バックエンドだけではなくフロントエンド開発もバリバリやってみたいと思い立ち、「React・Vue・Angular」といったモダンなフロントエンド技術を学ぼうと思いました。
色々調査してReactが良さそうということでReact、それと同時にTypeScriptも学びました。

ReactとTypeScriptは、トラハックさんというYouTuberさんの動画を中心にして適宜公式ドキュメントを読みながら学びました。

【とらゼミ】トラハックのエンジニア学習講座🙋‍♂️ 自己紹介 どうも、トラハックです。 ベンチャー企業にフロントエンドエンジニアとして勤めています。 バックエンドもwww.youtube.com

トラハックさんの動画を一通り見てReactとTypeScriptを学んだ後は、オリジナルアプリを作ってフロントエンド開発をバリバリ行いました。

オリジナルアプリの使用技術一覧・React・Redux・TypeScript・Material-UI・JSX・Firebase（Cloud Firestore, Authentication, Hosting）

（おまけ）6ヶ月目以降

6ヶ月目以降は、単一のページでコンテンツの切り替えを行うSPAを作っていました。

SPAの使用技術一覧【フロントエンド】・React・Redux・TypeScript・Material-UI・JSX・CSS【バックエンド】・Ruby・Ruby on Rails【データベース】・MySQL【開発環境】・Docker・Docker Compose・nginx・puma【本番環境】・Heroku・AWS（VPC、RDS、S3）・puma【テスト】・RSpec・FactoryBot【その他】・Prettier・RuboCop・CircleCI・hadolint

まとめ

ざっくりとですが、僕がプログラミング独学時代の半年間でやっていたことをまとめました。

大体1日6~8時間ほど開発をやっていて、アプリケーションを作りつつわからないことが出てきたら都度調べて自己解決する の繰り返しでした。

この記事が少しでもプログラミング学習を頑張っている方の参考になれば大変嬉しく思います！！

最後に、dotDでは、新しい事業を共に作っていくためのエンジニアのメンバーを募集しています！
少しでも興味を持ってくださった方はお気軽にご連絡ください！！

株式会社dotD | 事業創造ファームdotDはB2B,B2Cに関わらずのデジタルを活用した事業を連続的、非連続的に作り出すことによって社会の基盤になることを目dotd-inc.com