1
/
5

【独学】プログラミング未経験の僕がWeb系エンジニアになるために半年間でやったこと

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

meepa | 子どもの本当の好きに出会う 課外活動マッチングサービス
meepaは「子どもの本当の好きに出会う」を目指して、幼稚園・保育園・学童などで子どもたちが様々な体験の機会を得られるように、園と課外活動提供者をマッチングするサービスです。
https://meepa.io/

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

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

▼目次

  • 1ヶ月目
  • 2ヶ月目
  • 3ヶ月目
  • 4ヶ月目
  • 5~6ヶ月目
  • (おまけ)6ヶ月目以降
  • まとめ

1ヶ月目

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

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

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


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

Webサイトをコーディング模写するやり方と使用するツール | HPcode(えいちぴーこーど)
コーディング上達の近道にサイト模写があります。コーディング模写は公開されているWebサイトを見て、ソースコードを見ずに似たようにコーディングすることですね。 実際に公開されているサイトですので、実践力を身につけるには最適な方法かと思います。
https://haniwaman.com/replication-coding/

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

2ヶ月目

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

KENTA / 雑食系エンジニアTV
テクノロジーやビジネスやライフスタイルに関する様々な情報を発信する、ワイドショー的なチャンネルです。 ビジネス、キャリアハック、ライフハック、メンタルヘルス、資産運用、節税、ブロックチェーン、暗号資産、AI、NoCode、ファッション、メンズ美容などのトピックが多いです。
https://www.youtube.com/channel/UC_HLK-ksslL-Z_2wiIZDlMg

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

キタミ式イラストIT塾 基本情報技術者 令和03年
Amazonできたみりゅうじのキタミ式イラストIT塾 基本情報技術者 令和03年。アマゾンならポイント還元本が多数。きたみりゅうじ作品ほか、お急ぎ便対象商品は当日お届けも可能。またキタミ式イラストIT塾 基本情報技術者 令和03年もアマゾン配送商品なら通常配送無料。
https://www.amazon.co.jp/dp/4297117819?tag=note0e2a-22&linkCode=ogi&th=1&psc=1

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

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

3ヶ月目

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

Ruby on Rails チュートリアル:プロダクト開発の0→1を学ぼう
SNS開発やWebサイト制作が学べる大型チュートリアル。作りながら学ぶのが特徴で、電子書籍や解説動画、質問対応、社員研修、教材利用にも対応しています。
https://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の記事で学びました。

https://y-ohgi.com/introduction-docker/

5~6ヶ月目

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

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

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

(おまけ)6ヶ月目以降

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

まとめ

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

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

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

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


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


Invitation from 株式会社dotD
If this story triggered your interest, have a chat with the team?
株式会社dotD's job postings
3 Likes
3 Likes

Weekly ranking

Show other rankings
Like funabashi yukiko's Story
Let funabashi yukiko's company know you're interested in their content