
このコースで学習できることや対象者、前提条件を説明します。
受講にあたっての Q&A やリソースの活用などについて説明します。
Node.js とは何か、JavaScript とはどんな関係なのかを学びます。
Node.js の複数バージョンをインストールするためのツールとして asdf をインストールします。
asdf を使って Node.js の特定のバージョンをインストールします。
Web とインターネットの違いや、Web ブラウザ・Web サーバの概要を学びます。
npm の概要を学び、Web サーバのパッケージをインストールします。
Node.js のパッケージを使い、Web サーバを起動します。
Web サーバで自作した HTML を表示してみて、Web サーバの仕組みの概要を学びます。
Web ブラウザと Web サーバのやり取りを掘り下げて、ネットワークの仕組みの概要を学びます。
JavaScript のプログラムを作成し、Node.js で Hello World を実行します。
JavaScript で現在よく使われる、3 種類の関数の定義方法を学びます。
JavaScript の関数を応用した「コールバック」について学びます。
JavaScript で Echo プログラムを実装し、通信のイメージをつけます。
通信の際に必要な IP アドレス・ポート番号・メッセージについて、それぞれどんな意味なのか学びます。
curl や telnet コマンドで Web サーバと通信することで、HTTP リクエスト・HTTP レスポンスについて学びます。
ネットワークの重要な基礎知識である「TCP/IP モデル」を学びます。
Echo サーバのプログラムをもとに、固定の HTML を返す Web サーバを実装します。
HTTP リクエストに応じたファイルを読み込んで返す処理を実装します。
Web サーバを改修し、「/」というパスへのアクセスに対応させます。
Web サーバを改修し、有名なエラーである 404 Not Found に対応します。
http というパッケージで Web サーバを実装し直し、http パッケージを使うメリットを学びます。
このセクションで実装した内容の整理と、実装したプログラムに関する注意事項の説明を行います。
HTML に他のページへのリンクを追加し、画面遷移時の動作を学びます。
Web アプリケーションの仕組みの概要と、このセクションで実装するアプリケーションについて説明します。
タスク一覧画面の HTML を実装します。
Web アプリケーションとして初めての機能である、タスク一覧画面の HTML の生成を実装します。
タスク登録画面の HTML を実装します。
ここまでに実装したプログラムについて状況を整理し、次に改善すべき点を説明します。
Web サーバにリバースプロキシの機能を実装します。
タスク登録処理を実装し、HTTP メソッドについて学びます。
ここまでの実装の問題点を解消するため、PRG パターンを導入します。
古典的な Web アプリケーションの学習の最後に、より実践的な構成について学びます。
サンプルコードを見ながら、非同期処理とは何かを学びます。
Promise を使った非同期処理について学びます。
Promise を使った非同期処理で、async/await を使う方法を学びます。
簡単な例を実装しながら、ブラウザでの JavaScript の実行に入門します。
これから実装する Web アプリケーションについて理解するため、Web アプリケーションの構成パターンを整理します。
このセクションで実装する Web API を使った Web アプリケーションについて説明します。
タスク一覧取得のサーバサイド (API) を実装します。
タスク一覧取得のフロントエンドを実装し、Ajax について学びます。
タスク登録のフロントエンドを実装します。
タスク登録のサーバサイド (API) を実装します。
タスク登録時のフロントエンドのバグを修正し、挙動を改善します。
フロントエンドでのバリデーションを実装します。
サーバサイドでのバリデーションを実装し、フロントエンドでのバリデーションとの違いを学びます。
このセクションで実装した内容を改めて確認し、知識を定着させます。
Cookie の必要性と仕組みを学びます。
Cookie を保存するコードを実装し、HTTP リクエスト・HTTP レスポンスを見てみることで、Cookie をしっかり理解します。
Webアプリケーションの認証などで使われる「セッション」について学びます。
簡易的なセッション管理機能を実装して、セッションについてしっかり理解します。
Web サーバと API サーバの構成パターンを見つつ、同一オリジンポリシーによる制限の仕組みや必要性を学びます。
CORS を使い、別オリジンのリソースへのアクセスを許可する方法を学びます。
2022 年現在、Web アプリの開発に入門するための情報源は豊富で、Ruby on Rails などを使って「なんとなく」Web アプリが実装できるという方は増えています。
しかし、最近よくある構成の (いわゆるモダンな) Web アプリの開発には、さらに非常にたくさんの知識が必要になります。
例えば、React や Vue.js といったキーワードを聞いたことがある方は多いでしょう。
しかし、Web アプリを「なんとなく」実装できる段階で、より高度な Web アプリを開発しようとしても、よく分からないことだらけで苦戦する方は少なくありません。
Web アプリを「なんとなく」実装できる段階から、より高度な Web アプリの開発に進むには、Web アプリの仕組みと JavaScript の重要知識の 2 つを学ぶ必要があります。
このコースでは、Web アプリの仕組みと JavaScript の重要知識について、実際にコードを書きながら学んでいきます。
キーワード
Web アプリの仕組み:HTTP、Web API、Ajax、Cookie、CORS
JavaScript の重要知識:Node.js、npm、非同期処理、Promise、async/await
更新履歴
2023/05/12「(補足)asdf のセットアップについて」を追加