🗂

【前編】Webフロントエンド開発を学び始めて3ヶ月弱で0からブログを作成した話

2024/05/19に公開

Web開発をする前にデータ分析などでPythonなどのプログラミング言語は1年強くらい勉強していたものの、全くWeb開発については触れてこなかった僕が、Web開発を学び始めて3ヶ月弱で0からブログを作成した経験を紹介します。

プログラミング初心者の人や開発未経験の人にぜひ、見てもらえればと思います。

はじめに

今回は、前編なので開発に手をつける前のプログラミング言語学習のロードマップ・使用教材を紹介したいと思います。

また、大前提として、僕は全て独学なので、勉強法というより使用教材について紹介することになります。

勉強法としては、基本的に教材の順番に沿ってやっただけです。(自分で、ここはやる意味ないとか繰り返しになると思ったところはどんどん飛ばしましたが)

※あくまで僕自身の経験で全てが正しいわけではないので、参考程度にしてください。

重要な心得

突然ですが、プログラミング学習にあたって重要な心得があります。

それは、「適当にやる」です。

は?と思われた方がいると思いますが、よりわかりやすく言うと「完璧主義にならずにどんどん進め」ってことだと思ってください。

なぜかというと、最初からプログラミングは全てを覚えようとしても無理ですし、完璧主義のままノロノロ進んでいると、いつまで経ってもやりたいことができる段階までいかないからです。(というか移り変わりが早い領域なので覚えるより、その都度調べてキャッチアップする方が大切)

だからこそ、軽い気持ちでどんどん進めてください。

正直、この心得は僕が2年前くらいに知りたかったものですし、逆に元々完璧主義に近い自分が、2年弱プログラミングを独学で勉強してきたからこそ言えることだと思ってます。笑

ロードマップ

重要な心得を得たところで、ロードマップについて紹介します。

まず、簡潔にいうと以下の順番で学びました。

  1. HTML/CSS
  2. JavaScript
  3. React
  4. Next.js
  5. TypeScript

なんやこの5つと思われた方がいると思いますが、大丈夫です。こういうプログラミング言語があるんだな〜くらいに思っといてください。(厳密にいうとプログラミング言語ではないものも言語として)

それぞれの学習に使用した教材について詳しく紹介します。

1. HTML/CSS

主に教材は以下の3つを使用しました。が、正直このうち1つか2つやれば十分だと思います。

  • 書籍

正直なんでもいいと思います。

一応、僕が使用したのは、以下の書籍です。

https://amzn.asia/d/0xEETAu

  • YouTube

これもどんなチャンネルでも動画でもいいと思います。

僕のおすすめは、「プログラミングチュートリアル」というチャンネルです。

https://www.youtube.com/@user-hl9uv6cv7k

  • Progate(オンラインのプログラミング学習サービス)

これは、実際に手を動かして学べるという意味でいいと思いますが、月額料金が発生してしまうので、やるなら1ヶ月分だけで済むように早く学習を進めることをお勧めします。

https://prog-8.com/

2. JavaScript

僕は以下の教材を使いましたが、書籍でもYouTubeでもいいと思います。

  • Progate(オンラインのプログラミング学習サービス)

これは先ほどと同様です。

https://prog-8.com

  • Udemy(オンラインの動画教材サービス)

Udemyにもたくさんの教材があるので、正直どれでもいいと思いますが、僕のおすすめは以下の教材です。正直、結構わかりやすかった気がする。

https://www.udemy.com/course/learn-basics-of-javascript/

3. React

これに関しては、書籍と動画など複数の教材を組み合わせるのがいいと思いました。

また、ここら辺からキツくなる人が結構いると思いますが、この困難を乗り越えることがエンジニアになるには必須の能力を身につけることにつながります。

具体的に、Webで自主的に調べることや知識を組み合わせて正しい知識(厳密にいうと最新の知識)を手に入れることが必要になってきます。

それを踏まえた上で、僕自身も取り組みやすかった教材です。

  • 書籍

これは、基礎的な教材で、入門書としては最高だと思います。

いつもAmazonでは新品売り切れているので、Kindle版を買うか、実際に書店に行って買うのをお勧めします。(一応、Kindle版のリンク貼っておきます)

https://amzn.asia/d/2U5ZJzx

  • Udemy

これはJavaScriptからReact・Next.jsまで網羅的に学べるので、おすすめです。(Next.jsに関しては、少し古い部分もありますが)

https://www.udemy.com/course/react-complete-guide/

4. Next.js

ここまで辿り着けば、ここからは学習コストはすごく低くなります。

正直、ここまで来れば1人で考えて学習できるようになっていると思います。

なので、僕が使用した教材を挙げますが、ほんとになんでもいいです。(むしろ、皆さんが自分で考えて行動した方がいい結果になる可能性の方が高いと思います)

  • 書籍

https://amzn.asia/d/9HgAiVw

5. TypeScript

これはやらなくてもいいです。ただ、最近の開発では、必須になりつつあるらしいので(僕がチーム開発をしたことがないので明確にはわかりません)、学んでおいて損はないと思います。

また、学習コストもかなり低いので、ここまでたどり着いた皆さんなら、自分で選んだ教材を使ってください。

  • Udemy

https://www.udemy.com/course/typescript-complete/

最後に

いかがだったでしょうか?

ロードマップのセクションごとに使用教材を紹介してきましたが、それぞれのセクションと教材が網羅している範囲が被っているものもあるので、自分の学習に合わせて、適宜飛ばしたりして学習を進めてください。

教材は参考にしていただければ幸いくらいで、とにかく最初の心得が大切です。

ここまで、読んでくださりありがとうございました。

あの心得を持って学習を進めれば、自分の作りたいものの開発に早く取り組めると思います。

GitHubで編集を提案

Discussion