[Javascript] 初心者がプログラミングを学ぶ時の学習効率を考える話（学習カリキュラム編）

今年に入ってウチの娘の桃が、本格的にWebエンジニアとしての学習をスタートしました。 三日坊主で終わるかな？とか、気変わりするかな〜？と思っていたけど、色々と与えた課題をこなして着々とスキルを伸ばしてきています。 Webを主体にエンジニア学習するという路線でどうしてもHTMLとCSSから覚え始めたのですが、次にやる学習はやっぱりJavascriptでしょう！ という事で、今はProgateでJavascriptの学習中です。 でも、これ無料領域だけでは基本の学習のみなので、深くまで学習をしたい場合はどうすれば良いのかということを、考えてみたいと思います。 これからプログラミングの学習をしたいと思っている人の参考になればいいかと思って、ブログで書いておきます。

何故Javascriptなのか？

多言語の、RubyやPythonやGo言語では駄目なのか？ プログラミング学習はC言語から始める、という昔ながらのやり方では駄目なのか？ 学習の目的がAIや機械学習などであれば、Pythonから始めるのが一番いいし、 SIerとしての仕事を欲しいと思っていれば、C言語から始めるのは悪くはないでしょう。 でも、Webという領域で少なくてもホームページやWebシステムという、インターネットブラウザブラウザを使う領域に行く場合、必ずJavascriptは学習しなければいけなくなるので、学習環境が他のプログラミング言語よりも圧倒的に楽に準備できるjavascriptは、初心者が学習するプログラミングとしては、悪くないという事です。 また、ホームページを作る仕事を請け負うというのは、今時の仕事に繋がりやすいというのもポイント高いかもしれませんね。 悪いことは言わないから、よほど目的が明確でない場合は、Javascriptから学習を始めるというのがオススメだと思いますね。 ちなみに、どのプログラム言語を学んだとしても、そのプログラム言語特有のクセというものがあり、それらは言語間での汎用性は無いと考えたほうがいいですね。

Javascriptの学習手順フロー

そこで、Javascriptのプログラミング学習をどのように行っていくのがいいかという手順を考えてみました。 学習を始める前に、HTMLとCSSの学習が完了しているという事が条件です。

基本編

1. 学習環境の整え : ブラウザとエディタ
2. 文字列と数値などの型について : numeric , string , object
3. 真偽値 : true , false , undefined , null , blank , NaN
4. コメントアウトとconsoleログ
5. エスケープシーケンスと3つのクォーテーション
6. 変数と定数 : var , let , const
7. 演算 : (+-*/%)
8. 条件分岐 : if , switch
9. ==と===の違い
10. 繰り返し処理 : for , while
11. 関数 : function , アロー関数
12. リテラルとスコープの理解
13. 配列と連想配列
14. オブジェクト型とjsonオブジェクト
15. クラス : class , import , export
16. 三項演算子
17. use strictについて
18. グローバルデータとローカルデータ : window

Dom操作編

1. ページ情報 : window , document , location , navigator
2. 要素（エレメント）アクセス方法 : getElement... , querySelector
3. テキストの書き換え
4. class処理
5. nameとidについて
6. attribute処理
7. style処理
8. form処理
9. 要素の追加と削除

イベント編

1. onイベント : load , click , focus , blue
2. イベントの設定方法
3. マウス操作系イベント
4. キーボード操作系イベント
5. スマホ操作系イベント
6. formタグのイベント処理
7. onloadとDomContentloaded
8. 注意点 : ページ読み込みとDom

非同期編

1. 非同期とは？
2. 同期処理
3. イベント処理は非同期
4. コールバック処理
5. setTimeout
6. Ajax
7. promise / async

記憶領域

1. Cookie
2. LocalStorage
3. FileAPI

配列操作とオブジェクト操作

1. 配列関数について
2. オブジェクト関数について

thisの概念

1. コンテキストの理解
2. bind / apply / call

Javascriptの書き方3パターン

1. normalタイプ
2. moduleタイプ
3. Nodejsタイプ : require

学習サイト（無料）

下記のサイトで、基本部分の内容が分かりやすく動画やサービス専用ツールで学習することができます。 Progate 基本部分が学べます。 paiza 動画で基礎部分が解説されています。 とほほのJavascriptリファレンス webページで学習工程がリファレンス形式で掲載されています。 MDN web docs 詳細が記載されている、リファレンスサイトです。

あとがき

Javascriptって簡単に思われがちだけど、実際に使いこなしている人は熟知できたプログラマーです。 他人の書いたソースコードをコピペすることはできるけど、自分でゼロから作り出すことはかなりハードルが高い為、苦手としている人も多いようです。 確かに必要なスキルの学習を一覧で書き出してみたら、こんなにたくさんの工程があるから、ちゃんと順番に学習していかないとなかなか習得できませんよね。 学習サイトや教材などは、上記の基本編と若干の応用編でいきなりサービス構築などの手順に行くため、十分な知識量が無く理解度が低いまま進むため、挫折しやすいのかもしれません。 誰でも完了すれば習得ができてしまう学習工程を作りたいな〜と思ったので、上記のカリキュラムを実際の学習講座にするように考えています。 次回以降に、それぞれの詳細をブログで書いていきたいと思います。 完成したら、書籍ができちゃうかもね。

• 学習カリキュラム編
• 基本編
• Dom操作編
• イベント編
• 非同期編
• 記憶領域編
• 配列操作とオブジェクト操作編
• thisの概念
• サンプル編