独学プログラミングハック

プログラミング独学をハックする初心者のためのTips

プログラミング独学ロードマップ - ③JavaScript編

ホワイトボードのロードマップを見ている開発者

私は、東京でスタートアップを立ち上げています。

同時に、プログラミング初心者向けの勉強会やコミュニティを主催しています。

 

この記事では、 「プログラミング独学はまず何からやればいいですか?」
という方に向けて、無料サイトと学習ロードマップについての知見をまとめました。

今回は、JavaScriptについての内容です。

この記事が少しでも、効果的な学習や時間の節約になれば嬉しいです!

 

 

全5パートのロードマップ

  1. HTML, CSS
  2. Github
  3. JavaScript ←この記事
  4. React/ TypeScript
  5. Next.js

適宜、必要な箇所から読んで、区切りがついたらまたこの記事に戻ってきてロードマップを確認してみてください!

なお、ロードマップに関しては、世界で最も有名な開発者向けのロードマップの1つである、以下のサイトも参考にしています!

Developer Roadmaps - roadmap.sh

 

プログラミング独学はまず何から? 独学ロードマップ③JavaScript編

0からJavaScriptを学ぶロードマップと、おすすめの無料の教材を紹介していきます!

 

まずJavaScriptの基礎を学習する

まずはともあれ、JavaScriptに触れてみることが重要です。

実際にコードを書いて、JavaScriptの基礎文法などを学んでいきましょう。

もちろんProgateもおすすめですが、ここではfreeCodeCampをおすすめします。

世界では、1番人気の無料のプログラミング学習サービスです。

https://www.freecodecamp.org/japanese/learn/javascript-algorithms-and-data-structures

 

そして書籍で体系的に学びたい方は、JSPrimerがおすすめです。

オンライン上で無料公開されているJavaScriptの本であり、こちらもとても人気です。

jsprimer.net

 

ここまで重要なのは、よくコードを書き、よく本や記事で調べて、自分なりの理解を持って進むことです。

JavaScriptに少しずつ慣れていく必要があります。

 

次にDOM操作を学ぶ

プログラミング言語としてプログラムを組む以外にも、JavaScriptはさまざまなWebの機能を使うことができます。

なので、WebとJavaScriptは切っても切り離せません。

DOM操作や、ブラウザ上で行われるさまざまなイベント処理についても学習しましょう。

これに関しては、Web制作を目指されている方には必須になります。

jQueryを使うことも多いですが、まずは素のJavaScriptで学習してみることがおすすめです。

また、Web開発の学習としても重要です。

 

英語なので適宜翻訳の必要はありますが、おすすめは以下の動画です。

www.youtube.com

 

そして実践的にJavaScriptを使った、さまざまなプロジェクトを作成する

ここまで学習した事を踏まえて、簡単なアプリをいくつか自作してみましょう。

なお、ここまでを順番に進まなくても、基礎を学習してミニアプリを作る、という事を繰り返していくアプローチは特におすすめです。

忘れる前に、しっかり定着させることがでいると考えています。

 

その際に、以下を参考にしてみてください。

ブロック崩し、カウントダウンアプリなど、JavaScriptで作成された20個のミニアプリが、ソースコード+ライブデモ付きで掲載されているプロジェクトです。

 

github.com

 

また、学習を効果的に進めるには、
簡単なポートフォリオサイトを作成するのがおすすめです。

実際に動くミニアプリを掲載したり、学んだことを記事にして掲載したりなど。

細かく成果物を積み上げていくことは、割と簡単にできて、理解も定着して、就活で必要になるポートフォリオが明確に充実します。

成果物を積み上げていく重要性に関しては、下記で解説しています。

programming-hack.hatenablog.com

 

 

おまけ:

そして次回は、

独学ロードマップ④Reactでモダンフロントエンド(SPA)開発をする

です!

React は、昨今のフロントエンド開発の中で最も重要な技術の1つです。

Reactを使ったSPA開発を学ぶことで、

現在多くの有名なWebアプリケーションで採用されている技術に触れ、モダンなUI/UXのアプリケーションを作成できるようになります!

 

🌱JavaScript/ React 初心者のためのコミュニティ

この記事の技術を中心に、プログラミング初心者向けの勉強会を定期開催しているので、
ぜひ参加して学習のモチベーションを高めてください!

1ヶ月間限定のDiscordを使ったアクセラレーションも、定期開催しています。
オンラインコミュニティで学習のコミットメントを高めたい方は、ぜひご参加ください!

 

 

おわりに

最後まで読んでいただきありがとうございます!

今後も引き続き、独学プログラマー向けの記事を作成していきます。
もし参考になったらスター読者になるボタンを押して頂けると励みになります!

 

また、X(Twitter)では、積極的にプログラミング学習に関する投稿をしています。

様々な方と繋がり、学習のモチベーションを高めていけることを楽しみにしています!

 

Happy Hacking !

 

programming-hack.hatenablog.com