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

2022年6月24日 09:59

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

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

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

1ヶ月目

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

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

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

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

2ヶ月目

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

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

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

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

3ヶ月目

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

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

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

4ヶ月目

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

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

オリジナルアプリの使用技術一覧
【フロントエンド】
・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さんの動画を中心にして適宜公式ドキュメントを読みながら学びました。

トラハックさんの動画を一通り見て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では、新しい事業を共に作っていくためのエンジニアのメンバーを募集しています！
少しでも興味を持ってくださった方はお気軽にご連絡ください！！

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