リバーシで学ぶアプリケーション設計入門〜仕様の整理からTypeScriptでの実装まで〜

TypeScript の概要と、このコースで Node.js をインストールする方針について説明します。

Node.js をインストールするためのツールとして、asdf をインストールしてセットアップします。

asdf を使って Node.js をインストールします。

ts-node を使って TypeScript のコードを実行し、Hello World を表示します。

TypeScript と JavaScript の関係や、このコースで使う TypeScript の機能について説明します。

TypeScript で JavaScript と比べて最も特徴的とも言える、型注釈と型推論を、変数や配列の定義を通して学びます。

TypeScript での関数の基本を学び、型注釈や型推論の理解を深めます。

TypeScript でのクラス・コンストラクタ・getter の書き方を学びます。

クラスにメソッドを追加し、呼び出す方法を学びます。

小さなコードの例で、インタフェースの記法と用途の概要を学びます。

JavaScript や TypeScript でよく使われる、3 種類の方法で関数を定義する方法を学びます。

いくつかの例を実装しながら、関数の「コールバック」について学びます。

forEach・map・filter・reduce といったメソッドで、コールバックを使った配列の操作を学びます。

ファイル読み込みの例を使って、非同期処理の概要を学びます。

非同期処理のコードを読みやすくする第一段階として、Promise を使った記述方法を学びます。

非同期処理のコードを読みやすくする第二段階として、async/await を使った記述方法を学びます。

このコースでリバーシを題材にした理由と、アプリケーション設計の練習に適した題材の条件について説明します。

このセクションでの仕様検討の進め方について説明します。

仕様の整理・設計で様々な図を作成するために、VSCode の Draw.io プラグインをインストールして設定します。

仕様の整理の最初のステップとして、コンテキスト図の概要を学び、実際に作図してみます。

ユースケース図を書きながら、このコースで実装するスコープを明確にします。

クラス図を使って、リバーシのアプリケーションに登場する概念を整理します。

ユースケース図や概念モデルをもとに、実装する機能を一覧化します。

仕様の整理の最後のステップとして、簡易的な画面イメージを作成します。

このセクションで実施した仕様の整理の流れをふりかえります。

このコースで使用する各技術要素について、選んだ理由を説明します。

フロントエンドとサーバサイドが連携するための API の設計を行います。

独自形式の API 設計を、OpenAPI の形式に書き換えます。

概念モデルや API 設計を参考にしながら、ER 図を作成します。

このコースでターンごとのマス目の状態を保存する理由について補足します。

Web フレームワークの Express をインストールして、Hello World を実行してみます。

開発をスムーズにするため、nodemon を使ったホットリロードを設定します。

開発用に、Express のアクセスログの設定を行います。

開発を始めるのに必要な最小限だけ、エラーハンドリングの設定を行います。

今回実装するアプリケーションの仕組みと、このセクションで実施する内容を確認します。

Express での静的ファイル配信の設定を行います。

対戦画面の HTML を作成して、表示してみます。

CSS を作成して、リバーシの対戦画面の UI を完成させます。

ブラウザで JavaScript の Hello World を実行します。

JavaScript を使ってリバーシの盤面を表示する処理を実装します。

アプリケーションを開発する際の、サーバサイドの必要性について説明します。

Docker を使って MySQL を起動し、接続してみます。

ER 図をもとに、DDL を作成します。

DDL を実行するためのシェルスクリプトを作成し、データベースの準備を完了します。

フロントエンドとサーバサイドで、対戦を開始する API を疎通させます。

対戦を開始したことを MySQL に保存する処理を実装します。

対戦を開始したときの盤面を保存する処理を実装します。

盤面の状況を取得する API を実装します。

盤面を取得して表示する処理をフロントエンドに実装します。

フロントエンドに石を打つ API を呼び出す処理を実装します。

石を打つための API を実装し、フロントエンドと疎通させます。

フロントエンドを修正し、リバーシの盤面に石を打つことができるようにします。