VSCodeをインストールできるようになります。

Node.jsをお使いのマシンにインストールできるようになります。

Reactの開発環境をスムーズに構築できるように説明しています。

Reactライブラリの細かい内部の説明と整理をしています。

Reactを開発する上で便利なプラグインの説明とインストール方法を解説しています。

Array.map()の詳しい説明とデモを示しています。

Array.filter()の詳しい説明とデモを示しています。

Array.splice()の詳しい説明とデモを示しています。

参考演算子の使い方を詳細に説明しています。

スプレッド構文の使う場面、使い方を説明しています。

React-beautiful-dndのデモと開発環境を構築します。

ドラッグ＆ドロップのイメージを概念図を用いて説明します。

基本的なドラッグ＆ドロップを実装します。

ドラッグする要素のスタイルを変更します。

ドロップした後の要素の並び替えの関数を作成します。

map関数を使って要素を出力します。

今回の講座で作成するTrelloアプリの全体像をデモにて説明します。

Trelloアプリの全体図を概念図を用いて説明します。

TrelloアプリのHeader部分を作成しています。

アプリの雰囲気作りの背景画像をHTMLとCSSで記述します。

タスクカードをまとめるTaskCardsコンポーネントを概念図を用いて説明し、作成します。

Trelloにおいて重要なタスクカードを作成します。

タスクカードのタイトル入力欄を作成します。

タスクカードタイトルの入力欄の微調整を行います。

タスクカードにタスクを追加する重要な入力要素を作成します。

ReactHooksであるuseStateを用いてタスクを配列で管理します。

実際にタスクを入力して追加する実装を行います。

Tasksコンポーネントを１つ１つのTaskコンポーネントに分割します。

タスクのレイアウトをcssを解説しながら整形します。

ゴミ箱ボタンを押したらタスクを削除する機能をfilter関数を用いて実装します。

React-beautiful-dndライブラリを用いてドラッグ＆ドロップを実装します。

reorder関数を実装し、ドロップ後の並び替えを調整します。

uuidを用いて重複しないIDを指定し、削除後のバグを解消します。

タスクカードのドラッグ＆ドロップのデモです。

タスクカードを追加するボタンをcssを用いて説明します。

実際にボタンを押してタスクカードの追加を実装します。

バツボタンをfontawesomeを利用して配置します。

バツボタンを押すとタスクカードが削除される実装を行います。

タスクカードのドラッグ＆ドロップを実装します。

タスクカードをドロップした後の並び替えの処理を実装します。

GitHubのアカウント作成して、リポジトリ作成とpushまで行います。

Vercel(Now)を用いて、世界に向けてデプロイします。

最後に贈る言葉。さらに挑戦してほしいこと。