このワークショップで作成するWebアプリケーションとその開発で利用する、サービスやフレームワーク、ライブラリについて、概要を説明します。

サーバーの環境として利用する、Google Firebase の概要を説明します。

サーバー及び開発環境で使用する Node.js と npm /yarn および Express.js の説明をします。

クライアント（ブラウザ）のプログラムで利用するライブラリ等の説明です。

開発環境（開発するPC）で利用するツール類について解説をします。

開発環境を作成します。PCをご用意ください。

下記ツールをインストールします。

• Google Chrome

• nvm (Node.js バージョン管理ツール)

JavaScript のパッケージマネージャである、yarn と、コードエディタの Visual Studio Code のインストールを行います。

Visual Studio Code は、日本語化まで行います。

クライアントの実行環境や開発環境で利用するパッケージをインストールします。

ESLint と Prettier の設定ファイルを作成します。ESLint は、 ウィザードを利用して作成します。

Visual Studio Code の拡張を利用して、リアルタイムで ESLint や Prettier のチェックが行われるようにします。

Webpackのインストールと設定ファイルの作成、簡単なソースコードの変換を行います。

JavaScriptの新しい ES6 以降に追加された仕様の解説です。

この動画では、let , const について説明します。

リソースに、サンプルコードがあるので、合わせて御覧ください。

JavaScriptの新しい ES6 以降に追加された仕様の解説です。

この動画では、Arrow関数定義と、文字列リテラルについて説明します。

リソースに、サンプルコードがあるので、合わせて御覧ください。

JavaScriptの新しい ES6 以降に追加された仕様の解説です。

この動画では、配列オブジェクトの便利なメソッドについて説明します。

リソースに、サンプルコードがあるので、合わせて御覧ください。

JavaScriptの新しい ES6 以降に追加された仕様の解説です。

この動画では、クラス、スプレッド構文、三項演算子、論理和について説明します。

リソースに、サンプルコードがあるので、合わせて御覧ください。

2021-10-25追記

三項演算子の説明で、誤記がありました。動画は追って修正させていだきます。

x 「[式1]の値がtrueなら、[式1]」

o 「[式1]の値がtrueなら、[式2]」

TypeScriptの仕様について、基本的なものについて説明します。

リソースにある、サンプルコードも合わせて御覧ください。

JavaScriptの非同期処理についての説明です。

リソースに、サンプルコードがあるので、合わせて御覧ください。

Material UI の導入を行います。

使用するコマンド

yarn add @material-ui/core @material-ui/icons

コンポーネント内で CSS を定義してスタイルを当てます。

Material UI の makeStyles を利用します。

設備予約画面のフォームを作成します。まずは、モデル(インターフェース)の作成とコンポーネントとして、設備画面のコンポーネントからコピーして、必要な修正を行います。

Material UI Pickers を使って、日時を入力するピッカーを導入します。

予約一覧画面を作成していきます。初回は使用の確認を行います。

予約した時間帯に表示する予約バーの実装を行います。(1/2 回目)

Material UI の makeStyles を利用した CSS の値を動的に変更するテクニックを紹介します。

ここでは、Style の定義を行います。

予約した時間帯に表示する予約バーの実装を行います。(2/2 回目)

Material UI の makeStyles を利用した CSS の値を動的に変更するテクニックを紹介します。

ここでは、Compoent の作成を行います。

設備の行となる設備レーンのコンポーネントを作成します。(1/2 回目)

CSS の Flex を利用して、全体の幅が動的に変わり、かつ等幅でボックスを配置する方法を紹介します。

ここでは、スタイルの定義を行います。

設備の行となる設備レーンのコンポーネントを作成します。(2/2 回目)

CSS の Flex を利用して、全体の幅が動的に変わり、かつ等幅でボックスを配置する方法を紹介します。

ここでは、コンポーネントの作成を行います。

前に作成した予約バーも、この設備レーンに重なるように配置します。

予約一覧前回までに作成した、設備レーンを並べて表示します。(1/3 回目)

まずは、基本的なレイアウトを実装します。

予約一覧前回までに作成した、設備レーンを並べて表示します。(2/3 回目)

設備レーンに渡す、1時間毎のセルの幅の取得を行います。実際にレンダリングした幅を取得することができます。

予約一覧前回までに作成した、設備レーンを並べて表示します。(3/3 回目)

ブラウザ画面の大きさに合わせて伸縮する実装を行います。

画面ヘッダのレイアウトについて実装します。

CSS を使ったテクニックを紹介します。

React の Context を利用して、親で管理する値を、子・孫のコンポーネントで参照する実装を行います。

React の Reducer を使って、Context の内容を子供のコンポーネントから変更する処理を実装します。

React Router を使った、シングル・ページ・アプリケーションの画面遷移の処理をボタンなどに実装します。

コンポーネントのプロパティを使った方法と、プログラムでの方法を紹介します。

Jest のインストールと設定、およびテストの基本的な書き方を実施について説明します。

ReservatonList に定義してある、Reducer の関数のテストを作成します。

Webクライアント側の WebAPI のコールに使用している、Controller のテストを作成します。

ここでは、モックの作成と、非同期関数のテストを書く必要があります。それを学びます。

superagent のモック化を例に、メソッドチェーンのように関数を返す関数のモックを作成します。

Express で処理する関数を、Firestoer をモック化したテストを作成します。

@testing-library/react を使って React のコンポーネントのテストを書いてみましょう。

Jest でモックを作成するときの注意点について、useStyles の検証をもとに説明します。

React Component のイベント処理のテストについて解説します。

テストの評価で重要なDOM要素の取得に関して、testing-library での取得方法を解説します。

testid を使った要素の取得と、Material UI のコンポーネントの値を確認します。