Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
5つのアプリ作成とファイルのバンドリング~JavaScriptのプログラミングとWebpackの使い方を学ぶ~
Rating: 4.4 out of 5(60 ratings)
749 students

5つのアプリ作成とファイルのバンドリング~JavaScriptのプログラミングとWebpackの使い方を学ぶ~

ハンズオン形式でゲームアプリを作成!JavaScriptのコーディングスキル、アプリの構成と制作手順を学びます。特にDOM操作を駆使して多彩な動きを実現します。さらに、必要十分なWebpackについて簡潔かつ納得できる解説でお届けします。
Created byKaiki Fukunaga
Last updated 2/2025
Japanese

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ファイルのコンパイル

Course content

9 sections70 lectures7h 32m total length
  • コースの紹介(作成するアプリとWebpackについて)2:18

    最終制作物であるアプリケーションの動作を確認します。

  • 5つのアプリの紹介7:24
  • VSCodeプラグインとNode.jsのインストール2:04
  • VSCodeショートカットキーの紹介2:40
  • コースファイルのダウンロード0:41
  • ストレスのないご受講のために0:23

Requirements

  • HTML、CSSの基礎知識とJavascriptの基本構文の理解(完全な初心者の方には不向きなコースとなっています)
  • Javascriptに関してはひとつずつ丁寧な解説を心掛けていますので、基礎を一周学んだ程度で構いません。
  • コース内ではIDEとしてVisual Studio Codeを使用しています。同じIDEの使用を推奨します。
  • ブラウザは最新に近いGoogle Chromeをご用意ください。
  • コース内ではOSとしてWindowsを使用しますが。MacOSでも全く問題はありません。ただし、紹介するショートカットキーが異なりますので、ご承知願います。

Description

 本コースはJavaScriptの基礎を一通り学び、次のステップを模索している方、

いずれはReactやVuejsなどを始めたいとお考えの方(後述)に向けた内容となっています。

「ArrayやObject、forEachなどは理解できたけど、実際どんな場面で使えばいい?」、

「DOMを操作してウェブサイトを自由に操りたい」、

「DOM操作はある程度できるけど、さらなるスキルアップとして何をすればいい?」

とお考えの方に向けて作られたコースです。


 ドロップダウンメニュー、アコーディオン、スライダーなどの

ウェブサイトで頻繁に利用される部品については触れていませんが、

それらを自分の思うように作り上げていくために必要となるスキルや手順などを学習していただけます。

実現したいサイト内の動きを、ご自身のアイデアを元にゼロから作り上げましょう。


 コース内では5つのアプリを作成します。

Todoリスト、タイピングゲーム、スライドパズルゲーム、

メモリーカードゲーム、コンウェイのゲームオブライフ。

アプリ制作だけでも非常に楽しい作業ですが、

デザインの変更や機能の追加など、その後も引き続いて楽しんでいただけるはずです。

見た目はシンプルですが、アプリの組み立てやそのロジックにはそれなりの深みがあります。

これらを学ぶことで「自分で考えて作る」ことへの扉が開かれるに違いありません。


 また、ReactやVuejsなどのライブラリやフレームワークへ挑戦する方々がまず初めに戸惑うのが、

そのディレクトリ構成であり、node_module、pakage.jsonなどの初めて出会うファイル群だと思います。

これらへの理解がなくても文法の学習を進めることは可能ですが、

これらが何のために存在しているのかが分からず、そのブラックボックス性に不安を抱え続けるかもしれません。

そこで、本コースではファイルのバンドル、コンパイルなどの取り付きにくい分野にも入っていきます。

そこで学習するのが、現在その中心的存在となっているWebpackです。

ひとまずこれだけ分かっていれば大丈夫という安心を得られるコンパクトな内容にまとめました。

ReactやVuejsはそれぞれに独自の設定を持っていますが、

共通するその本質をしっかりと押さえることができます。

この設定を押さえておけば、今後npmライブラリをどんどんと取り込み

ウェブサイトに導入することができるようになります。


 日進月歩で進化するこのプログラミングの分野ではありますが、

そのベースとなる考え方や作る面白さをこのコースではお伝えしていきたいと思います。

ぜひ本コースにチャレンジしてみてください。

Who this course is for:

  • プログラミングの導入としてHTML、CSS、Javascriptの基礎を学んで、次のステップをお考えの方
  • JavascriptでDOM操作を学びたい方
  • Javascriptを使い、自分で考えてプログラムを組みたいと考えている方
  • Javascriptでアプリケーションを作り始めたいと考えている方
  • Javascriptでウェブサイト制作のスキルを高めたい方(ゲーム制作はより自由自在な動きを考えるヒントになります)
  • これからReactやVuejsを学び始めようとしている方
  • webpackの必要最小限をコンパクトに学びたい方(React、Vuejsはそれぞれに独自性がありますが、基本の仕組みを知っておくことで突然に現れる複数のファイル群に戸惑わずに済みます)