Rating 4.5 out of 5 (7 ratings in Udemy)
What you'll learn- ES Moduleによるimport/export の利用方法
- Visual Studio Codeのショートカットキーの使用
- ゲーム作成を元にした「アイデアを形にしていく」技術（タイピング、スライドパズル、メモリーカード、ゲームオブライフとTodoリスト）
- DOM操作（getElementById / querySelector / createElement などのElement取得。classList / textContent / setAttributeなどによるElementの操作）
- addEventListener / removeEventListener によるclick / mouseover / change などのイベントに応じた動作の実行
- event_target/ event_key / event_offsetX などの扱い
- or / and / not operator、ternary operator …
Rating 4.5 out of 5 (7 ratings in Udemy)
What you'll learn- ES Moduleによるimport/export の利用方法
- Visual Studio Codeのショートカットキーの使用
- ゲーム作成を元にした「アイデアを形にしていく」技術（タイピング、スライドパズル、メモリーカード、ゲームオブライフとTodoリスト）
- DOM操作（getElementById / querySelector / createElement などのElement取得。classList / textContent / setAttributeなどによるElementの操作）
- addEventListener / removeEventListener によるclick / mouseover / change などのイベントに応じた動作の実行
- event_target/ event_key / event_offsetX などの扱い
- or / and / not operator、ternary operator の扱い
- Browserの Local Storage を利用したデータの保存、取得
- data属性の使用方法
- input / textarea に入力された値の操作
- setTimeout / setInterval / clearInterval によるタイマー操作
- fetch によるAPI利用（request / response、jsonファイルの取り扱い）
- Promise(pending, fullfilled, rejected)の理解
- async / await の使用
- display none / flex / block を利用した表示の切り替え
- isPlaying などのフラグを用いたゲーム進行の制御
- clickイベントを利用したgrid、HTML 要素の入れ替えロジック
- naturalWidth / naturalHeight を用いたオリジナルイメージのサイズや比率の取得
- Array要素のシャッフルや入れ替えロジック
- 再帰関数の考え方
- grid X-Y座標の作成と扱い
- Canvas APIの使用方法
- canvasアニメーションのための requestAnimationFrame / cancelAnimationFrameの使用方法
- react, vuejsで最初に提供されるファイル群の理解
- package_jsonの主要部分の理解と記述方法
- webpackの主要な使用方法（moduleのbundle、minification、output）
- webpack configurationファイルの作成方法
- webpack-dev-serverの使用方法
- loaderやpluginを使用したファイルの出力、最適化
- babel、core-jsを用いたJsファイルのコンパイル
Description 本コースはJavaScriptの基礎を一通り学び、次のステップを模索している方、これからReact、Vuejsを始めようとお考えの方（後述）に向けた内容となっています。「ArrayやObject、forEachなどは理解できたけど、実際どんな場面で使えばいい？」、「DOMを操作してウェブサイトを自由に操りたい」、「DOM操作はある程度できるけど、さらなるスキルアップとして何をすればいい？」とお考えの方に向けて作られたコースです。
ドロップダウンメニュー、アコーディオン、スライダーなどのウェブサイトで頻繁に利用される部品については触れていませんが、それらを自分の思うように作り上げていくために必要となるスキルや手順などを学習していただけます。実現したいサイト内の動きを、ご自身のアイデアを元にゼロから作り上げましょう。
コース内では５つのアプリを作成します。Todoリスト、タイピングゲーム、スライドパズルゲーム、メモリーカードゲーム、コンウェイのゲームオブライフ。アプリ制作だけでも非常に楽しい作業ですが、デザインの変更や機能の追加など、その後も引き続いて楽しんでいただけるはずです。見た目はシンプルですが、アプリの組み立てやそのロジックにはそれなりの深みがあります。これらを学ぶことで「自分で考えて作る」ことへの扉が開かれるに違いありません。
また、ReactやVuejsなどのライブラリやフレームワークへ挑戦する方々がまず初めに戸惑うのが、そのディレクトリ構成であり、node_module、pakage.jsonなどの初めて出会うファイル群だと思います。これらへの理解がなくても文法の学習を進めることは可能ですが、これらが何のために存在しているのかが分からず、そのブラックボックス性に不安を抱え続けるかもしれません。そこで、本コースではファイルのバンドル、コンパイルなどの取り付きにくい分野にも入っていきます。そこで学習するのが、現在その中心的存在となっているWebpackです。ひとまずこれだけ分かっていれば大丈夫という安心を得られるコンパクトな内容にまとめました。ReactやVuejsはそれぞれに独自の設定を持っていますが、共通するその本質をしっかりと押さえることができます。この設定を押さえておけば、今後npmライブラリをどんどんと取り込みウェブサイトに導入することができるようになります。
日進月歩で進化するこのプログラミングの分野ではありますが、そのベースとなる考え方や作る面白さをこのコースではお伝えしていきたいと思います。ぜひ本コースにチャレンジしてみてください。
