カテゴリー
サインイン 新規登録
学習時間 12時間
難易度 初級
質問投稿
価格 ¥1,980
月額 ¥2,980
Unlimited会員はこちらの教材を含む100種類以上のUnlimited対象教材が学び放題

React × TypeScript で手を動かながら学ぶ!モダンなフロントエンド開発入門

本教材は React と TypeScript を使ってマークダウンエディタを作成しながらモダンなフロントエンド開発に入門します。webpackを使ったフロントエンド開発の環境構築から GitHub Pages を使った静的Webサイトの公開方法まで解説。

5
最終更新 2021/8
MORIYA Hiroyuki

Reactの基礎からWeb Storage, ServiceWorkerといったブラウザの機能までを一連の開発過程の中で手を動かしながら学ぶ

本教材は UI フレームワークの1つである React と静的型付け言語の TypeScript を使い、ブラウザだけで動くマークダウンエディタを制作します。 ライブラリを最小限に使い、設定ファイルなども0から作成することで、モダンなフロントエンド開発の基本を学んでいきます。

学習内容

作成するアプリケーションのイメージをつかもう

このようなブラウザで動作するマークダウンエディタを作成します。 左側へテキストを入力すると、右側にリアルタイムでプレビュー表示できるエディタを作ります。

app image

開発する主な機能(詳しくは「0-4 エディタの設計」で解説しています。)

  • テキストの入力機能
  • マークダウンのリアルタイムプレビュー機能
  • テキストの保存と復元機能

この教材の対象者

主に以下のような方を対象に執筆しています。

  • React を使ったフロントエンド開発にチャレンジしたい方
  • ブラウザの機能を使った開発を試してみたい方
  • フロントエンド開発を基礎から学びたい方
  • create-react-app などで開発をしたことがあるが、どうやって動いているのかを理解したい方
  • 実際にコードを書いて、どう動いているのかをキチンと理解して学習したい方
  • Mac をお使いの方(Mac 以外の環境での学習は、質問対応などのサポート対象外とさせていただきます)

よって以下のような方には向かない内容になっています。

  • 豊富なライブラリをどんどん使って効率のよい開発を学習したい方
  • 基本的なことを理解しており、たくさんコードを書いて練習したい方

受講における必要条件

  • HTML, CSS の基礎知識
  • JavaScript の基礎知識
  • ターミナルの基本操作(cd ls などの操作ができるレベル)

学ばないこと

本教材は、モダンなフロントエンド開発の基本を一通り学んで理解することで、より発展的な開発をしてくための基礎を作ることを目的としております。

  • 大規模なアプリケーション開発のノウハウや、扱うライブラリの詳細なオプションやチューニングなどは対象としていません。
  • Google Chrome のみで動作確認をし、ブラウザごとの差異については解説しません。
  • スタイリングのために CSS を使いますが、詳細な解説はしません。

本教材の対応バージョン

  • macOS Catalina
  • Google Chrome: 81系(執筆時点。基本的に最新版を使ってください)
  • Node: 12系
  • React: 16系
  • Webpack: 4系
  • TypeScript: 3.8系

本教材で質問対応可能なOSや環境

  • Mac OS

本教材の構成について

0章 はじめに

本教材を進める上での環境を整えたり、設計を解説していきます。

1章 プロジェクトを作る

React + TypeScript + webpack を使った開発環境を作ります。

2章 エディタ画面を作る

React で JSX を使ってプレビュー付きのマークダウンエディタ画面を作ります。

3章 テキストを保存する

IndexedDB を使って、入力したテキストを保存する機能を作ります。

4章 保存したテキストを閲覧する

3章で保存したテキストを復元できる画面と機能を作ります。

5章 マークダウンのプレビューをバックグランドスレッドで実行する

WebWorker を使って、大量のテキストを入力してもサクサク動くように変換機能を作ります。

6章 ネイティブアプリのように使えるようにする

いわゆる PWA の一部の機能を使い、ネイティブアプリのような体験ができるサイトを試します。

カリキュラム

Section 0 はじめに
Section 1 プロジェクトを作る
  • 1-1 npm でプロジェクトを作成する
  • 1-2 webpack を導入してビルドができるようにする
  • 1-3 TypeScript を導入して静的型付けを試してみる
  • 1-4 React を導入して最初のビューを作ってみる
  • 1-5 webpack-dev-server を導入して開発効率を上げる
  • 1-6 styled-components の導入してスタイリングする
Section 2 エディタ画面を作る
  • 2-1 React の基本を学ぶ
  • 2-2 エディタ画面の見た目を作る
  • 2-3 入力内容を React Hooks (useState) で管理する
  • 2-4 Web Storage を使って入力内容をブラウザに保存する
  • 2-5 マークダウンのプレビューを作る

講師のプロフィール

教材のレビュー

5.0
16件の評価
100%
0%
0%
0%
0%
寺坂輝弘 3ヶ月以上前
成果物はシンプルですが、構成要素や周辺情報を丁寧に掘り下げられており、はじめてでも少ない負荷で多くの基本的な知識を得られるよう、工夫されていると感じました。
星 享汰 6ヶ月以上前
create-react-appなどを利用せず、一からTypeScriptやReact解説してくれていて、しっかりと基礎から理解できる教材だと感じました。
yuki 1年以上前
質問にも丁寧に対応していただき、ありがとうございました。