├── .gitignore ├── 05_react-app ├── 022 │ ├── 01_必要なパッケージのインストール │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ └── package.json │ ├── 04_UIライブラリで利用する定数の準備 │ │ ├── src │ │ │ ├── App.tsx │ │ │ ├── index.tsx │ │ │ └── lib │ │ │ │ └── constants │ │ │ │ └── index.ts │ │ ├── index.html │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ └── package.json │ ├── 03_Reactアプリケーションを実行する準備 │ │ ├── src │ │ │ ├── App.tsx │ │ │ └── index.tsx │ │ ├── index.html │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ └── package.json │ └── 02_ビルド設定 │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ └── package.json └── 023 │ ├── 01_「Text」コンポーネント │ ├── index.html │ ├── src │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── libs │ │ │ ├── Text.tsx │ │ │ └── constants │ │ │ └── index.ts │ ├── tsconfig.json │ ├── webpack.config.js │ └── package.json │ ├── 02_「Heading」コンポーネント │ ├── index.html │ ├── src │ │ ├── index.tsx │ │ ├── App.tsx │ │ └── libs │ │ │ ├── Text.tsx │ │ │ ├── constants │ │ │ └── index.ts │ │ │ └── Heading.tsx │ ├── tsconfig.json │ ├── webpack.config.js │ └── package.json │ ├── 03_「Button」コンポーネント │ ├── index.html │ ├── src │ │ ├── index.tsx │ │ ├── libs │ │ │ ├── Text.tsx │ │ │ ├── constants │ │ │ │ └── index.ts │ │ │ ├── Heading.tsx │ │ │ └── Button.tsx │ │ └── App.tsx │ ├── tsconfig.json │ ├── webpack.config.js │ └── package.json │ ├── 04_「Textarea」コンポーネント │ ├── index.html │ ├── src │ │ ├── index.tsx │ │ ├── libs │ │ │ ├── Text.tsx │ │ │ ├── constants │ │ │ │ └── index.ts │ │ │ ├── Heading.tsx │ │ │ ├── Button.tsx │ │ │ └── Textarea.tsx │ │ └── App.tsx │ ├── tsconfig.json │ ├── webpack.config.js │ └── package.json │ ├── 05_「Input」コンポーネント │ ├── index.html │ ├── src │ │ ├── index.tsx │ │ ├── libs │ │ │ ├── Text.tsx │ │ │ ├── constants │ │ │ │ └── index.ts │ │ │ ├── Heading.tsx │ │ │ ├── Input.tsx │ │ │ ├── Button.tsx │ │ │ └── Textarea.tsx │ │ └── App.tsx │ ├── tsconfig.json │ ├── webpack.config.js │ └── package.json │ └── 06_「PasswordForm」コンポーネント │ ├── index.html │ ├── src │ ├── index.tsx │ ├── libs │ │ ├── Text.tsx │ │ ├── constants │ │ │ └── index.ts │ │ ├── Heading.tsx │ │ ├── Input.tsx │ │ ├── Button.tsx │ │ ├── Textarea.tsx │ │ └── PasswordForm.tsx │ └── App.tsx │ ├── tsconfig.json │ ├── webpack.config.js │ └── package.json ├── 04_browser-app ├── 016 │ ├── 04_HTMLとCSSの用意 │ │ ├── ts │ │ │ └── index.ts │ │ ├── tsconfig.json │ │ ├── package.json │ │ ├── webpack.config.js │ │ └── index.html │ ├── 03_TypeScriptの設定の詳細 │ │ ├── ts │ │ │ ├── sum.ts │ │ │ └── index.ts │ │ ├── index.html │ │ ├── tsconfig.json │ │ ├── package.json │ │ └── webpack.config.js │ └── 02_webpackによるモジュールの依存関係の解決 │ │ ├── ts │ │ ├── sum.ts │ │ └── index.ts │ │ ├── tsconfig.json │ │ ├── index.html │ │ ├── package.json │ │ └── webpack.config.js ├── 018 │ ├── 02_「Task」クラスの作成 │ │ ├── ts │ │ │ ├── Task.ts │ │ │ ├── EventListener.ts │ │ │ └── index.ts │ │ ├── tsconfig.json │ │ ├── package.json │ │ ├── webpack.config.js │ │ └── index.html │ ├── 06_作成したタスクの描画 │ │ ├── ts │ │ │ ├── TaskCollection.ts │ │ │ ├── Task.ts │ │ │ ├── EventListener.ts │ │ │ ├── TaskRenderer.ts │ │ │ └── index.ts │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ ├── package.json │ │ └── index.html │ ├── 05_「TaskCollection」クラスの作成 │ │ ├── ts │ │ │ ├── TaskCollection.ts │ │ │ ├── Task.ts │ │ │ ├── EventListener.ts │ │ │ └── index.ts │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ ├── package.json │ │ └── index.html │ ├── 03_外部ライブラリの使用とDefinitelyTyped │ │ ├── ts │ │ │ ├── Task.ts │ │ │ ├── EventListener.ts │ │ │ └── index.ts │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ ├── package.json │ │ └── index.html │ ├── 07_タスクの削除 │ │ ├── ts │ │ │ ├── TaskCollection.ts │ │ │ ├── Task.ts │ │ │ ├── EventListener.ts │ │ │ ├── TaskRenderer.ts │ │ │ └── index.ts │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ ├── package.json │ │ └── index.html │ ├── 08_タスクの更新 │ │ ├── ts │ │ │ ├── TaskCollection.ts │ │ │ ├── Task.ts │ │ │ ├── EventListener.ts │ │ │ ├── TaskRenderer.ts │ │ │ └── index.ts │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ ├── package.json │ │ └── index.html │ ├── 04_列挙型 │ │ ├── tsconfig.json │ │ ├── ts │ │ │ ├── Task.ts │ │ │ ├── EventListener.ts │ │ │ └── index.ts │ │ ├── webpack.config.js │ │ ├── package.json │ │ └── index.html │ └── 09_ドラッグ&ドロップの実装 │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ ├── ts │ │ ├── TaskCollection.ts │ │ ├── Task.ts │ │ └── EventListener.ts │ │ ├── package.json │ │ └── index.html ├── 017 │ ├── 02_「Application」クラス │ │ ├── ts │ │ │ └── index.ts │ │ ├── tsconfig.json │ │ ├── package.json │ │ ├── webpack.config.js │ │ └── index.html │ ├── 03_「EventListener」クラス:DOM APIの型定義 │ │ ├── ts │ │ │ └── index.ts │ │ ├── tsconfig.json │ │ ├── package.json │ │ ├── webpack.config.js │ │ └── index.html │ ├── 04_「EventListener」クラス:「add」メソッド │ │ ├── tsconfig.json │ │ ├── package.json │ │ ├── ts │ │ │ ├── index.ts │ │ │ └── EventListener.ts │ │ ├── webpack.config.js │ │ └── index.html │ └── 05_「EventListener」クラス:「remove」メソッド │ │ ├── tsconfig.json │ │ ├── package.json │ │ ├── webpack.config.js │ │ ├── ts │ │ ├── index.ts │ │ └── EventListener.ts │ │ └── index.html ├── 019 │ ├── 02_一括削除機能の作成 │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ ├── package.json │ │ ├── ts │ │ │ ├── Task.ts │ │ │ ├── TaskCollection.ts │ │ │ └── EventListener.ts │ │ └── index.html │ ├── 03_データの永続化 │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ ├── package.json │ │ ├── ts │ │ │ ├── Task.ts │ │ │ ├── EventListener.ts │ │ │ └── TaskCollection.ts │ │ └── index.html │ ├── 04_Assertion Functions │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ ├── package.json │ │ ├── ts │ │ │ ├── EventListener.ts │ │ │ ├── Task.ts │ │ │ └── TaskCollection.ts │ │ └── index.html │ └── 05_アプリ起動時のタスク一覧の表示 │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ ├── package.json │ │ ├── ts │ │ ├── EventListener.ts │ │ └── Task.ts │ │ └── index.html ├── 020 │ ├── 04_型定義の改善 │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ ├── package.json │ │ ├── ts │ │ │ ├── EventListener.ts │ │ │ └── Task.ts │ │ └── index.html │ └── 01_ロジックのリファクタリング │ │ ├── tsconfig.json │ │ ├── webpack.config.js │ │ ├── package.json │ │ ├── ts │ │ ├── EventListener.ts │ │ └── Task.ts │ │ └── index.html └── 021 │ └── 01_本番用ビルド設定の追加 │ ├── tsconfig.json │ ├── webpack.config.js │ ├── package.json │ ├── ts │ ├── EventListener.ts │ └── Task.ts │ └── index.html ├── 03_node-app ├── 010 │ ├── 01_作業環境の準備 │ │ ├── src │ │ │ └── index.ts │ │ ├── tsconfig.json │ │ ├── package.json │ │ └── package-lock.json │ └── 02_Node.js環境用のセットアップ │ │ ├── tsconfig.json │ │ ├── src │ │ └── index.ts │ │ └── package.json ├── 012 │ ├── 08_モードの概念の導入 │ │ ├── tsconfig.json │ │ └── package.json │ ├── 03_ゲーム開始時の処理の追加 │ │ ├── tsconfig.json │ │ ├── package.json │ │ ├── src │ │ │ └── index.ts │ │ └── package-lock.json │ ├── 04_ゲームのロジックの追加 │ │ ├── tsconfig.json │ │ └── package.json │ ├── 06_ゲーム終了時の処理の追加 │ │ ├── tsconfig.json │ │ └── package.json │ ├── 07_バリデーションの追加 │ │ ├── tsconfig.json │ │ └── package.json │ ├── 11_型エイリアスを使った型の表現 │ │ ├── tsconfig.json │ │ └── package.json │ ├── 13_モード設定のバグ回避 │ │ ├── tsconfig.json │ │ └── package.json │ ├── 01_「HitAndBlow」クラスの作成 │ │ ├── tsconfig.json │ │ ├── package.json │ │ └── src │ │ │ └── index.ts │ ├── 10_never型によるエラーの検知 │ │ ├── tsconfig.json │ │ └── package.json │ ├── 12_ユーザーによるモードの選択機能 │ │ ├── tsconfig.json │ │ └── package.json │ ├── 19_「Mode」型のリファクタリング3 │ │ ├── tsconfig.json │ │ └── package.json │ ├── 09_指定のモードに応じたゲームの難易度の変更 │ │ ├── tsconfig.json │ │ └── package.json │ ├── 14_「promptSelect」のリファクタリング1 │ │ ├── tsconfig.json │ │ └── package.json │ ├── 15_「promptSelect」のリファクタリング2 │ │ ├── tsconfig.json │ │ └── package.json │ ├── 16_「promptSelect」のリファクタリング3 │ │ ├── tsconfig.json │ │ └── package.json │ ├── 02_「HitAndBlow」クラスのリファクタリング1 │ │ ├── tsconfig.json │ │ ├── package.json │ │ └── src │ │ │ └── index.ts │ └── 05_「HitAndBlow」クラスのリファクタリング2 │ │ ├── tsconfig.json │ │ └── package.json ├── 011 │ ├── 01_printLine関数の追加 │ │ ├── tsconfig.json │ │ ├── src │ │ │ └── index.ts │ │ └── package.json │ └── 02_promptInput関数の追加 │ │ ├── tsconfig.json │ │ ├── package.json │ │ └── src │ │ └── index.ts └── 013 │ ├── 05_ゲームの選択機能の実装2 │ ├── tsconfig.json │ └── package.json │ ├── 06_ゲームの選択機能の実装3 │ ├── tsconfig.json │ └── package.json │ ├── 07_ゲームの選択機能の実装4 │ ├── tsconfig.json │ └── package.json │ ├── 08_ゲームの変更機能の実装 │ ├── tsconfig.json │ └── package.json │ ├── 11_抽象クラス「Game」の追加 │ ├── tsconfig.json │ └── package.json │ ├── 03_ゲームを繰り返し遊ぶ機能の実装 │ ├── tsconfig.json │ └── package.json │ ├── 02_「GameProcedure」クラスの作成2 │ ├── tsconfig.json │ └── package.json │ ├── 09_「GameStore」型のリファクタリング1 │ ├── tsconfig.json │ └── package.json │ └── 10_「GameStore」型のリファクタリング2 │ ├── tsconfig.json │ └── package.json └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | -------------------------------------------------------------------------------- /05_react-app/022/01_必要なパッケージのインストール/tsconfig.json: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /05_react-app/022/01_必要なパッケージのインストール/webpack.config.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /04_browser-app/016/04_HTMLとCSSの用意/ts/index.ts: -------------------------------------------------------------------------------- 1 | console.log('hello world') 2 | -------------------------------------------------------------------------------- /04_browser-app/016/03_TypeScriptの設定の詳細/ts/sum.ts: -------------------------------------------------------------------------------- 1 | export const sum = (a: number, b: number) => a + b 2 | -------------------------------------------------------------------------------- /04_browser-app/016/02_webpackによるモジュールの依存関係の解決/ts/sum.ts: -------------------------------------------------------------------------------- 1 | export const sum = (a: number, b: number) => a + b 2 | -------------------------------------------------------------------------------- /04_browser-app/016/03_TypeScriptの設定の詳細/ts/index.ts: -------------------------------------------------------------------------------- 1 | import { sum } from './sum' 2 | 3 | console.log(sum(1, 2)) 4 | -------------------------------------------------------------------------------- /04_browser-app/016/02_webpackによるモジュールの依存関係の解決/ts/index.ts: -------------------------------------------------------------------------------- 1 | import { sum } from './sum' 2 | 3 | console.log(sum(1, 2)) 4 | -------------------------------------------------------------------------------- /04_browser-app/016/02_webpackによるモジュールの依存関係の解決/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "sourceMap": true 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /05_react-app/022/04_UIライブラリで利用する定数の準備/src/App.tsx: -------------------------------------------------------------------------------- 1 | export const App = () => { 2 | return ( 3 |

React App

4 | ) 5 | } 6 | -------------------------------------------------------------------------------- /05_react-app/022/03_Reactアプリケーションを実行する準備/src/App.tsx: -------------------------------------------------------------------------------- 1 | export const App = () => { 2 | return ( 3 |

React App

4 | ) 5 | } 6 | -------------------------------------------------------------------------------- /04_browser-app/016/03_TypeScriptの設定の詳細/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /03_node-app/010/01_作業環境の準備/src/index.ts: -------------------------------------------------------------------------------- 1 | const sayHello = (name: string) => { 2 | return `Hello, ${name}!` 3 | } 4 | 5 | console.log(sayHello('Michael Jackson')) 6 | -------------------------------------------------------------------------------- /03_node-app/010/01_作業環境の準備/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist", 4 | "rootDir": "./src", 5 | "strict": true 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /03_node-app/012/08_モードの概念の導入/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist", 4 | "rootDir": "./src", 5 | "strict": true 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /04_browser-app/016/02_webpackによるモジュールの依存関係の解決/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /03_node-app/011/01_printLine関数の追加/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist", 4 | "rootDir": "./src", 5 | "strict": true 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /03_node-app/012/03_ゲーム開始時の処理の追加/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist", 4 | "rootDir": "./src", 5 | "strict": true 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /03_node-app/012/04_ゲームのロジックの追加/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist", 4 | "rootDir": "./src", 5 | "strict": true 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /03_node-app/012/06_ゲーム終了時の処理の追加/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist", 4 | "rootDir": "./src", 5 | "strict": true 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /03_node-app/012/07_バリデーションの追加/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist", 4 | "rootDir": "./src", 5 | "strict": true 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /03_node-app/012/11_型エイリアスを使った型の表現/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist", 4 | "rootDir": "./src", 5 | "strict": true 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /03_node-app/012/13_モード設定のバグ回避/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist", 4 | "rootDir": "./src", 5 | "strict": true 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /03_node-app/013/05_ゲームの選択機能の実装2/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist", 4 | "rootDir": "./src", 5 | "strict": true 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /03_node-app/013/06_ゲームの選択機能の実装3/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist", 4 | "rootDir": "./src", 5 | "strict": true 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /03_node-app/013/07_ゲームの選択機能の実装4/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist", 4 | "rootDir": "./src", 5 | "strict": true 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /03_node-app/013/08_ゲームの変更機能の実装/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist", 4 | "rootDir": "./src", 5 | "strict": true 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /03_node-app/013/11_抽象クラス「Game」の追加/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist", 4 | "rootDir": "./src", 5 | "strict": true 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /05_react-app/022/04_UIライブラリで利用する定数の準備/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /05_react-app/023/01_「Text」コンポーネント/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /05_react-app/023/02_「Heading」コンポーネント/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /05_react-app/023/03_「Button」コンポーネント/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /05_react-app/023/04_「Textarea」コンポーネント/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /05_react-app/023/05_「Input」コンポーネント/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /03_node-app/010/02_Node.js環境用のセットアップ/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist", 4 | "rootDir": "./src", 5 | "strict": true 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /03_node-app/011/02_promptInput関数の追加/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist", 4 | "rootDir": "./src", 5 | "strict": true 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /03_node-app/012/01_「HitAndBlow」クラスの作成/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist", 4 | "rootDir": "./src", 5 | "strict": true 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /03_node-app/012/10_never型によるエラーの検知/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist", 4 | "rootDir": "./src", 5 | "strict": true 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /03_node-app/012/12_ユーザーによるモードの選択機能/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist", 4 | "rootDir": "./src", 5 | "strict": true 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /03_node-app/012/19_「Mode」型のリファクタリング3/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist", 4 | "rootDir": "./src", 5 | "strict": true 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /03_node-app/013/03_ゲームを繰り返し遊ぶ機能の実装/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist", 4 | "rootDir": "./src", 5 | "strict": true 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /05_react-app/022/03_Reactアプリケーションを実行する準備/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /05_react-app/023/01_「Text」コンポーネント/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { Text } from './libs/Text' 2 | 3 | export const App = () => { 4 | return ( 5 | 6 | ) 7 | } 8 | -------------------------------------------------------------------------------- /05_react-app/023/06_「PasswordForm」コンポーネント/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /03_node-app/011/01_printLine関数の追加/src/index.ts: -------------------------------------------------------------------------------- 1 | const printLine = (text: string, breakLine: boolean = true) => { 2 | process.stdout.write(text + (breakLine ? '\n' : '')) 3 | } 4 | -------------------------------------------------------------------------------- /03_node-app/012/09_指定のモードに応じたゲームの難易度の変更/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist", 4 | "rootDir": "./src", 5 | "strict": true 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /03_node-app/012/14_「promptSelect」のリファクタリング1/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist", 4 | "rootDir": "./src", 5 | "strict": true 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /03_node-app/012/15_「promptSelect」のリファクタリング2/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist", 4 | "rootDir": "./src", 5 | "strict": true 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /03_node-app/012/16_「promptSelect」のリファクタリング3/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist", 4 | "rootDir": "./src", 5 | "strict": true 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /03_node-app/013/02_「GameProcedure」クラスの作成2/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist", 4 | "rootDir": "./src", 5 | "strict": true 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /03_node-app/013/09_「GameStore」型のリファクタリング1/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist", 4 | "rootDir": "./src", 5 | "strict": true 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /03_node-app/013/10_「GameStore」型のリファクタリング2/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist", 4 | "rootDir": "./src", 5 | "strict": true 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /03_node-app/010/02_Node.js環境用のセットアップ/src/index.ts: -------------------------------------------------------------------------------- 1 | const sayHello = (name: string) => { 2 | return `Hello, ${name}!` 3 | } 4 | 5 | process.stdout.write(sayHello('Michael Jackson')) 6 | -------------------------------------------------------------------------------- /03_node-app/012/02_「HitAndBlow」クラスのリファクタリング1/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist", 4 | "rootDir": "./src", 5 | "strict": true 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /03_node-app/012/05_「HitAndBlow」クラスのリファクタリング2/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist", 4 | "rootDir": "./src", 5 | "strict": true 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /05_react-app/023/01_「Text」コンポーネント/src/index.tsx: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom' 2 | 3 | import { App } from './App' 4 | 5 | ReactDOM.render(, document.getElementById('app')) 6 | -------------------------------------------------------------------------------- /05_react-app/023/05_「Input」コンポーネント/src/index.tsx: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom' 2 | 3 | import { App } from './App' 4 | 5 | ReactDOM.render(, document.getElementById('app')) 6 | -------------------------------------------------------------------------------- /04_browser-app/018/02_「Task」クラスの作成/ts/Task.ts: -------------------------------------------------------------------------------- 1 | export class Task { 2 | title 3 | 4 | constructor(properties: { title: string }) { 5 | this.title = properties.title 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /05_react-app/022/04_UIライブラリで利用する定数の準備/src/index.tsx: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom' 2 | 3 | import { App } from './App' 4 | 5 | ReactDOM.render(, document.getElementById('app')) 6 | -------------------------------------------------------------------------------- /05_react-app/023/02_「Heading」コンポーネント/src/index.tsx: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom' 2 | 3 | import { App } from './App' 4 | 5 | ReactDOM.render(, document.getElementById('app')) 6 | -------------------------------------------------------------------------------- /05_react-app/023/03_「Button」コンポーネント/src/index.tsx: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom' 2 | 3 | import { App } from './App' 4 | 5 | ReactDOM.render(, document.getElementById('app')) 6 | -------------------------------------------------------------------------------- /05_react-app/023/04_「Textarea」コンポーネント/src/index.tsx: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom' 2 | 3 | import { App } from './App' 4 | 5 | ReactDOM.render(, document.getElementById('app')) 6 | -------------------------------------------------------------------------------- /05_react-app/022/03_Reactアプリケーションを実行する準備/src/index.tsx: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom' 2 | 3 | import { App } from './App' 4 | 5 | ReactDOM.render(, document.getElementById('app')) 6 | -------------------------------------------------------------------------------- /05_react-app/023/06_「PasswordForm」コンポーネント/src/index.tsx: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom' 2 | 3 | import { App } from './App' 4 | 5 | ReactDOM.render(, document.getElementById('app')) 6 | -------------------------------------------------------------------------------- /04_browser-app/018/06_作成したタスクの描画/ts/TaskCollection.ts: -------------------------------------------------------------------------------- 1 | import { Task } from './Task' 2 | 3 | export class TaskCollection { 4 | private tasks: Task[] = [] 5 | 6 | add(task: Task) { 7 | this.tasks.push(task) 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /04_browser-app/018/05_「TaskCollection」クラスの作成/ts/TaskCollection.ts: -------------------------------------------------------------------------------- 1 | import { Task } from './Task' 2 | 3 | export class TaskCollection { 4 | private tasks: Task[] = [] 5 | 6 | add(task: Task) { 7 | this.tasks.push(task) 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /04_browser-app/017/02_「Application」クラス/ts/index.ts: -------------------------------------------------------------------------------- 1 | class Application { 2 | start() { 3 | console.log('hello world') 4 | } 5 | } 6 | 7 | window.addEventListener('load', () => { 8 | const app = new Application() 9 | app.start() 10 | }) 11 | -------------------------------------------------------------------------------- /04_browser-app/018/03_外部ライブラリの使用とDefinitelyTyped/ts/Task.ts: -------------------------------------------------------------------------------- 1 | import { v4 as uuid } from 'uuid' 2 | 3 | export class Task { 4 | readonly id 5 | title 6 | 7 | constructor(properties: { title: string }) { 8 | this.id = uuid() 9 | this.title = properties.title 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /04_browser-app/018/07_タスクの削除/ts/TaskCollection.ts: -------------------------------------------------------------------------------- 1 | import { Task } from './Task' 2 | 3 | export class TaskCollection { 4 | private tasks: Task[] = [] 5 | 6 | add(task: Task) { 7 | this.tasks.push(task) 8 | } 9 | 10 | delete(task: Task) { 11 | this.tasks = this.tasks.filter(({ id }) => id !== task.id) 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /04_browser-app/018/08_タスクの更新/ts/TaskCollection.ts: -------------------------------------------------------------------------------- 1 | import { Task } from './Task' 2 | 3 | export class TaskCollection { 4 | private tasks: Task[] = [] 5 | 6 | add(task: Task) { 7 | this.tasks.push(task) 8 | } 9 | 10 | delete(task: Task) { 11 | this.tasks = this.tasks.filter(({ id }) => id !== task.id) 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /04_browser-app/017/03_「EventListener」クラス:DOM APIの型定義/ts/index.ts: -------------------------------------------------------------------------------- 1 | class Application { 2 | start() { 3 | const button = document.getElementById('deleteAllDoneTask') 4 | 5 | if (!button) return 6 | 7 | console.log(button) 8 | } 9 | } 10 | 11 | window.addEventListener('load', () => { 12 | const app = new Application() 13 | app.start() 14 | }) 15 | -------------------------------------------------------------------------------- /05_react-app/023/02_「Heading」コンポーネント/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { Text } from './libs/Text' 2 | import { Heading } from './libs/Heading' 3 | 4 | export const App = () => { 5 | return ( 6 | <> 7 | 8 | 見出し 9 | 10 | hello, world! 11 | 12 | 13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /03_node-app/010/01_作業環境の準備/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_01", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "tsc", 8 | "dev": "tsc -w", 9 | "start": "node dist/index.js" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "typescript": "^4.3.5" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /03_node-app/012/03_ゲーム開始時の処理の追加/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_01", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "tsc", 8 | "dev": "tsc -w", 9 | "start": "node dist/index.js" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/node": "^16.4.13", 16 | "typescript": "^4.3.5" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /03_node-app/012/04_ゲームのロジックの追加/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_01", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "tsc", 8 | "dev": "tsc -w", 9 | "start": "node dist/index.js" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/node": "^16.4.13", 16 | "typescript": "^4.3.5" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /03_node-app/012/06_ゲーム終了時の処理の追加/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_01", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "tsc", 8 | "dev": "tsc -w", 9 | "start": "node dist/index.js" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/node": "^16.4.13", 16 | "typescript": "^4.3.5" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /03_node-app/012/07_バリデーションの追加/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_01", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "tsc", 8 | "dev": "tsc -w", 9 | "start": "node dist/index.js" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/node": "^16.4.13", 16 | "typescript": "^4.3.5" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /03_node-app/012/08_モードの概念の導入/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_01", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "tsc", 8 | "dev": "tsc -w", 9 | "start": "node dist/index.js" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/node": "^16.4.13", 16 | "typescript": "^4.3.5" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /03_node-app/012/13_モード設定のバグ回避/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_01", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "tsc", 8 | "dev": "tsc -w", 9 | "start": "node dist/index.js" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/node": "^16.4.13", 16 | "typescript": "^4.3.5" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /03_node-app/013/05_ゲームの選択機能の実装2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_01", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "tsc", 8 | "dev": "tsc -w", 9 | "start": "node dist/index.js" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/node": "^16.4.13", 16 | "typescript": "^4.3.5" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /03_node-app/013/06_ゲームの選択機能の実装3/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_01", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "tsc", 8 | "dev": "tsc -w", 9 | "start": "node dist/index.js" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/node": "^16.4.13", 16 | "typescript": "^4.3.5" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /03_node-app/013/07_ゲームの選択機能の実装4/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_01", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "tsc", 8 | "dev": "tsc -w", 9 | "start": "node dist/index.js" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/node": "^16.4.13", 16 | "typescript": "^4.3.5" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /03_node-app/013/08_ゲームの変更機能の実装/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_01", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "tsc", 8 | "dev": "tsc -w", 9 | "start": "node dist/index.js" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/node": "^16.4.13", 16 | "typescript": "^4.3.5" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /03_node-app/010/02_Node.js環境用のセットアップ/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_01", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "tsc", 8 | "dev": "tsc -w", 9 | "start": "node dist/index.js" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/node": "^16.4.13", 16 | "typescript": "^4.3.5" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /03_node-app/011/01_printLine関数の追加/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_01", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "tsc", 8 | "dev": "tsc -w", 9 | "start": "node dist/index.js" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/node": "^16.4.13", 16 | "typescript": "^4.3.5" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /03_node-app/011/02_promptInput関数の追加/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_01", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "tsc", 8 | "dev": "tsc -w", 9 | "start": "node dist/index.js" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/node": "^16.4.13", 16 | "typescript": "^4.3.5" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /03_node-app/012/01_「HitAndBlow」クラスの作成/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_01", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "tsc", 8 | "dev": "tsc -w", 9 | "start": "node dist/index.js" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/node": "^16.4.13", 16 | "typescript": "^4.3.5" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /03_node-app/012/10_never型によるエラーの検知/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_01", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "tsc", 8 | "dev": "tsc -w", 9 | "start": "node dist/index.js" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/node": "^16.4.13", 16 | "typescript": "^4.3.5" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /03_node-app/012/11_型エイリアスを使った型の表現/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_01", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "tsc", 8 | "dev": "tsc -w", 9 | "start": "node dist/index.js" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/node": "^16.4.13", 16 | "typescript": "^4.3.5" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /03_node-app/012/12_ユーザーによるモードの選択機能/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_01", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "tsc", 8 | "dev": "tsc -w", 9 | "start": "node dist/index.js" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/node": "^16.4.13", 16 | "typescript": "^4.3.5" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /03_node-app/012/19_「Mode」型のリファクタリング3/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_01", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "tsc", 8 | "dev": "tsc -w", 9 | "start": "node dist/index.js" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/node": "^16.4.13", 16 | "typescript": "^4.3.5" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /03_node-app/013/03_ゲームを繰り返し遊ぶ機能の実装/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_01", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "tsc", 8 | "dev": "tsc -w", 9 | "start": "node dist/index.js" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/node": "^16.4.13", 16 | "typescript": "^4.3.5" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /03_node-app/013/11_抽象クラス「Game」の追加/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_01", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "tsc", 8 | "dev": "tsc -w", 9 | "start": "node dist/index.js" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/node": "^16.4.13", 16 | "typescript": "^4.3.5" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /03_node-app/012/09_指定のモードに応じたゲームの難易度の変更/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_01", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "tsc", 8 | "dev": "tsc -w", 9 | "start": "node dist/index.js" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/node": "^16.4.13", 16 | "typescript": "^4.3.5" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /03_node-app/013/02_「GameProcedure」クラスの作成2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_01", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "tsc", 8 | "dev": "tsc -w", 9 | "start": "node dist/index.js" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/node": "^16.4.13", 16 | "typescript": "^4.3.5" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /03_node-app/013/09_「GameStore」型のリファクタリング1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_01", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "tsc", 8 | "dev": "tsc -w", 9 | "start": "node dist/index.js" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/node": "^16.4.13", 16 | "typescript": "^4.3.5" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /03_node-app/013/10_「GameStore」型のリファクタリング2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_01", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "tsc", 8 | "dev": "tsc -w", 9 | "start": "node dist/index.js" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/node": "^16.4.13", 16 | "typescript": "^4.3.5" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /03_node-app/012/02_「HitAndBlow」クラスのリファクタリング1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_01", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "tsc", 8 | "dev": "tsc -w", 9 | "start": "node dist/index.js" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/node": "^16.4.13", 16 | "typescript": "^4.3.5" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /03_node-app/012/05_「HitAndBlow」クラスのリファクタリング2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_01", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "tsc", 8 | "dev": "tsc -w", 9 | "start": "node dist/index.js" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/node": "^16.4.13", 16 | "typescript": "^4.3.5" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /03_node-app/012/14_「promptSelect」のリファクタリング1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_01", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "tsc", 8 | "dev": "tsc -w", 9 | "start": "node dist/index.js" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/node": "^16.4.13", 16 | "typescript": "^4.3.5" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /03_node-app/012/15_「promptSelect」のリファクタリング2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_01", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "tsc", 8 | "dev": "tsc -w", 9 | "start": "node dist/index.js" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/node": "^16.4.13", 16 | "typescript": "^4.3.5" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /03_node-app/012/16_「promptSelect」のリファクタリング3/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_01", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "tsc", 8 | "dev": "tsc -w", 9 | "start": "node dist/index.js" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/node": "^16.4.13", 16 | "typescript": "^4.3.5" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /04_browser-app/018/04_列挙型/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "sourceMap": true, 4 | "target": "ES2015", 5 | "lib": ["DOM", "ESNext"], 6 | "module": "ES2015", 7 | "esModuleInterop": true, 8 | "strict": true, 9 | "forceConsistentCasingInFileNames": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "noImplicitReturns": true, 12 | "noUnusedLocals": true, 13 | "noUnusedParameters": true 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /05_react-app/023/01_「Text」コンポーネント/src/libs/Text.tsx: -------------------------------------------------------------------------------- 1 | import { VFC } from 'react' 2 | import styled from 'styled-components' 3 | import { fontSize } from './constants' 4 | 5 | type Props = { 6 | text: string 7 | className?: string 8 | } 9 | 10 | export const Text: VFC = ({ text, className = '' }) => { 11 | return {text} 12 | } 13 | 14 | const Wrapper = styled.p` 15 | font-size: ${fontSize.m}; 16 | ` 17 | -------------------------------------------------------------------------------- /04_browser-app/018/07_タスクの削除/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "sourceMap": true, 4 | "target": "ES2015", 5 | "lib": ["DOM", "ESNext"], 6 | "module": "ES2015", 7 | "esModuleInterop": true, 8 | "strict": true, 9 | "forceConsistentCasingInFileNames": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "noImplicitReturns": true, 12 | "noUnusedLocals": true, 13 | "noUnusedParameters": true 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /04_browser-app/018/08_タスクの更新/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "sourceMap": true, 4 | "target": "ES2015", 5 | "lib": ["DOM", "ESNext"], 6 | "module": "ES2015", 7 | "esModuleInterop": true, 8 | "strict": true, 9 | "forceConsistentCasingInFileNames": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "noImplicitReturns": true, 12 | "noUnusedLocals": true, 13 | "noUnusedParameters": true 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /04_browser-app/019/02_一括削除機能の作成/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "sourceMap": true, 4 | "target": "ES2015", 5 | "lib": ["DOM", "ESNext"], 6 | "module": "ES2015", 7 | "esModuleInterop": true, 8 | "strict": true, 9 | "forceConsistentCasingInFileNames": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "noImplicitReturns": true, 12 | "noUnusedLocals": true, 13 | "noUnusedParameters": true 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /04_browser-app/019/03_データの永続化/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "sourceMap": true, 4 | "target": "ES2015", 5 | "lib": ["DOM", "ESNext"], 6 | "module": "ES2015", 7 | "esModuleInterop": true, 8 | "strict": true, 9 | "forceConsistentCasingInFileNames": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "noImplicitReturns": true, 12 | "noUnusedLocals": true, 13 | "noUnusedParameters": true 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /04_browser-app/020/04_型定義の改善/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "sourceMap": true, 4 | "target": "ES2015", 5 | "lib": ["DOM", "ESNext"], 6 | "module": "ES2015", 7 | "esModuleInterop": true, 8 | "strict": true, 9 | "forceConsistentCasingInFileNames": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "noImplicitReturns": true, 12 | "noUnusedLocals": true, 13 | "noUnusedParameters": true 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /05_react-app/023/02_「Heading」コンポーネント/src/libs/Text.tsx: -------------------------------------------------------------------------------- 1 | import { VFC } from 'react' 2 | import styled from 'styled-components' 3 | import { fontSize } from './constants' 4 | 5 | type Props = { 6 | text: string 7 | className?: string 8 | } 9 | 10 | export const Text: VFC = ({ text, className = '' }) => { 11 | return {text} 12 | } 13 | 14 | const Wrapper = styled.p` 15 | font-size: ${fontSize.m}; 16 | ` 17 | -------------------------------------------------------------------------------- /05_react-app/023/03_「Button」コンポーネント/src/libs/Text.tsx: -------------------------------------------------------------------------------- 1 | import { VFC } from 'react' 2 | import styled from 'styled-components' 3 | import { fontSize } from './constants' 4 | 5 | type Props = { 6 | text: string 7 | className?: string 8 | } 9 | 10 | export const Text: VFC = ({ text, className = '' }) => { 11 | return {text} 12 | } 13 | 14 | const Wrapper = styled.p` 15 | font-size: ${fontSize.m}; 16 | ` 17 | -------------------------------------------------------------------------------- /05_react-app/023/04_「Textarea」コンポーネント/src/libs/Text.tsx: -------------------------------------------------------------------------------- 1 | import { VFC } from 'react' 2 | import styled from 'styled-components' 3 | import { fontSize } from './constants' 4 | 5 | type Props = { 6 | text: string 7 | className?: string 8 | } 9 | 10 | export const Text: VFC = ({ text, className = '' }) => { 11 | return {text} 12 | } 13 | 14 | const Wrapper = styled.p` 15 | font-size: ${fontSize.m}; 16 | ` 17 | -------------------------------------------------------------------------------- /05_react-app/023/05_「Input」コンポーネント/src/libs/Text.tsx: -------------------------------------------------------------------------------- 1 | import { VFC } from 'react' 2 | import styled from 'styled-components' 3 | import { fontSize } from './constants' 4 | 5 | type Props = { 6 | text: string 7 | className?: string 8 | } 9 | 10 | export const Text: VFC = ({ text, className = '' }) => { 11 | return {text} 12 | } 13 | 14 | const Wrapper = styled.p` 15 | font-size: ${fontSize.m}; 16 | ` 17 | -------------------------------------------------------------------------------- /04_browser-app/016/04_HTMLとCSSの用意/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "sourceMap": true, 4 | "target": "ES2015", 5 | "lib": ["DOM", "ESNext"], 6 | "module": "ES2015", 7 | "esModuleInterop": true, 8 | "strict": true, 9 | "forceConsistentCasingInFileNames": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "noImplicitReturns": true, 12 | "noUnusedLocals": true, 13 | "noUnusedParameters": true 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /04_browser-app/018/02_「Task」クラスの作成/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "sourceMap": true, 4 | "target": "ES2015", 5 | "lib": ["DOM", "ESNext"], 6 | "module": "ES2015", 7 | "esModuleInterop": true, 8 | "strict": true, 9 | "forceConsistentCasingInFileNames": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "noImplicitReturns": true, 12 | "noUnusedLocals": true, 13 | "noUnusedParameters": true 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /04_browser-app/018/06_作成したタスクの描画/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "sourceMap": true, 4 | "target": "ES2015", 5 | "lib": ["DOM", "ESNext"], 6 | "module": "ES2015", 7 | "esModuleInterop": true, 8 | "strict": true, 9 | "forceConsistentCasingInFileNames": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "noImplicitReturns": true, 12 | "noUnusedLocals": true, 13 | "noUnusedParameters": true 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /04_browser-app/018/09_ドラッグ&ドロップの実装/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "sourceMap": true, 4 | "target": "ES2015", 5 | "lib": ["DOM", "ESNext"], 6 | "module": "ES2015", 7 | "esModuleInterop": true, 8 | "strict": true, 9 | "forceConsistentCasingInFileNames": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "noImplicitReturns": true, 12 | "noUnusedLocals": true, 13 | "noUnusedParameters": true 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /04_browser-app/020/01_ロジックのリファクタリング/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "sourceMap": true, 4 | "target": "ES2015", 5 | "lib": ["DOM", "ESNext"], 6 | "module": "ES2015", 7 | "esModuleInterop": true, 8 | "strict": true, 9 | "forceConsistentCasingInFileNames": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "noImplicitReturns": true, 12 | "noUnusedLocals": true, 13 | "noUnusedParameters": true 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /04_browser-app/021/01_本番用ビルド設定の追加/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "sourceMap": true, 4 | "target": "ES2015", 5 | "lib": ["DOM", "ESNext"], 6 | "module": "ES2015", 7 | "esModuleInterop": true, 8 | "strict": true, 9 | "forceConsistentCasingInFileNames": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "noImplicitReturns": true, 12 | "noUnusedLocals": true, 13 | "noUnusedParameters": true 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /05_react-app/023/06_「PasswordForm」コンポーネント/src/libs/Text.tsx: -------------------------------------------------------------------------------- 1 | import { VFC } from 'react' 2 | import styled from 'styled-components' 3 | import { fontSize } from './constants' 4 | 5 | type Props = { 6 | text: string 7 | className?: string 8 | } 9 | 10 | export const Text: VFC = ({ text, className = '' }) => { 11 | return {text} 12 | } 13 | 14 | const Wrapper = styled.p` 15 | font-size: ${fontSize.m}; 16 | ` 17 | -------------------------------------------------------------------------------- /04_browser-app/016/03_TypeScriptの設定の詳細/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "sourceMap": true, 4 | "target": "ES2015", 5 | "lib": ["DOM", "ESNext"], 6 | "module": "ES2015", 7 | "esModuleInterop": true, 8 | "strict": true, 9 | "forceConsistentCasingInFileNames": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "noImplicitReturns": true, 12 | "noUnusedLocals": true, 13 | "noUnusedParameters": true 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /04_browser-app/017/02_「Application」クラス/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "sourceMap": true, 4 | "target": "ES2015", 5 | "lib": ["DOM", "ESNext"], 6 | "module": "ES2015", 7 | "esModuleInterop": true, 8 | "strict": true, 9 | "forceConsistentCasingInFileNames": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "noImplicitReturns": true, 12 | "noUnusedLocals": true, 13 | "noUnusedParameters": true 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /04_browser-app/019/04_Assertion Functions/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "sourceMap": true, 4 | "target": "ES2015", 5 | "lib": ["DOM", "ESNext"], 6 | "module": "ES2015", 7 | "esModuleInterop": true, 8 | "strict": true, 9 | "forceConsistentCasingInFileNames": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "noImplicitReturns": true, 12 | "noUnusedLocals": true, 13 | "noUnusedParameters": true 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /04_browser-app/019/05_アプリ起動時のタスク一覧の表示/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "sourceMap": true, 4 | "target": "ES2015", 5 | "lib": ["DOM", "ESNext"], 6 | "module": "ES2015", 7 | "esModuleInterop": true, 8 | "strict": true, 9 | "forceConsistentCasingInFileNames": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "noImplicitReturns": true, 12 | "noUnusedLocals": true, 13 | "noUnusedParameters": true 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /04_browser-app/018/05_「TaskCollection」クラスの作成/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "sourceMap": true, 4 | "target": "ES2015", 5 | "lib": ["DOM", "ESNext"], 6 | "module": "ES2015", 7 | "esModuleInterop": true, 8 | "strict": true, 9 | "forceConsistentCasingInFileNames": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "noImplicitReturns": true, 12 | "noUnusedLocals": true, 13 | "noUnusedParameters": true 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /04_browser-app/017/04_「EventListener」クラス:「add」メソッド/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "sourceMap": true, 4 | "target": "ES2015", 5 | "lib": ["DOM", "ESNext"], 6 | "module": "ES2015", 7 | "esModuleInterop": true, 8 | "strict": true, 9 | "forceConsistentCasingInFileNames": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "noImplicitReturns": true, 12 | "noUnusedLocals": true, 13 | "noUnusedParameters": true 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /04_browser-app/018/03_外部ライブラリの使用とDefinitelyTyped/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "sourceMap": true, 4 | "target": "ES2015", 5 | "lib": ["DOM", "ESNext"], 6 | "module": "ES2015", 7 | "esModuleInterop": true, 8 | "strict": true, 9 | "forceConsistentCasingInFileNames": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "noImplicitReturns": true, 12 | "noUnusedLocals": true, 13 | "noUnusedParameters": true 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /04_browser-app/017/03_「EventListener」クラス:DOM APIの型定義/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "sourceMap": true, 4 | "target": "ES2015", 5 | "lib": ["DOM", "ESNext"], 6 | "module": "ES2015", 7 | "esModuleInterop": true, 8 | "strict": true, 9 | "forceConsistentCasingInFileNames": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "noImplicitReturns": true, 12 | "noUnusedLocals": true, 13 | "noUnusedParameters": true 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /04_browser-app/017/05_「EventListener」クラス:「remove」メソッド/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "sourceMap": true, 4 | "target": "ES2015", 5 | "lib": ["DOM", "ESNext"], 6 | "module": "ES2015", 7 | "esModuleInterop": true, 8 | "strict": true, 9 | "forceConsistentCasingInFileNames": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "noImplicitReturns": true, 12 | "noUnusedLocals": true, 13 | "noUnusedParameters": true 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /04_browser-app/018/04_列挙型/ts/Task.ts: -------------------------------------------------------------------------------- 1 | import { v4 as uuid } from 'uuid' 2 | 3 | export const statusMap = { 4 | todo: 'TODO', 5 | doing: 'DOING', 6 | done: 'DONE', 7 | } as const 8 | export type Status = typeof statusMap[keyof typeof statusMap] 9 | 10 | export class Task { 11 | readonly id 12 | title 13 | status 14 | 15 | constructor(properties: { title: string }) { 16 | this.id = uuid() 17 | this.title = properties.title 18 | this.status = statusMap.todo 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /04_browser-app/018/06_作成したタスクの描画/ts/Task.ts: -------------------------------------------------------------------------------- 1 | import { v4 as uuid } from 'uuid' 2 | 3 | export const statusMap = { 4 | todo: 'TODO', 5 | doing: 'DOING', 6 | done: 'DONE', 7 | } as const 8 | export type Status = typeof statusMap[keyof typeof statusMap] 9 | 10 | export class Task { 11 | readonly id 12 | title 13 | status 14 | 15 | constructor(properties: { title: string }) { 16 | this.id = uuid() 17 | this.title = properties.title 18 | this.status = statusMap.todo 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /04_browser-app/018/07_タスクの削除/ts/Task.ts: -------------------------------------------------------------------------------- 1 | import { v4 as uuid } from 'uuid' 2 | 3 | export const statusMap = { 4 | todo: 'TODO', 5 | doing: 'DOING', 6 | done: 'DONE', 7 | } as const 8 | export type Status = typeof statusMap[keyof typeof statusMap] 9 | 10 | export class Task { 11 | readonly id 12 | title 13 | status 14 | 15 | constructor(properties: { title: string }) { 16 | this.id = uuid() 17 | this.title = properties.title 18 | this.status = statusMap.todo 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /04_browser-app/018/08_タスクの更新/ts/Task.ts: -------------------------------------------------------------------------------- 1 | import { v4 as uuid } from 'uuid' 2 | 3 | export const statusMap = { 4 | todo: 'TODO', 5 | doing: 'DOING', 6 | done: 'DONE', 7 | } as const 8 | export type Status = typeof statusMap[keyof typeof statusMap] 9 | 10 | export class Task { 11 | readonly id 12 | title 13 | status 14 | 15 | constructor(properties: { title: string }) { 16 | this.id = uuid() 17 | this.title = properties.title 18 | this.status = statusMap.todo 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /04_browser-app/016/03_TypeScriptの設定の詳細/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_02", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "webpack", 8 | "serve": "serve ./ -p 3000" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "serve": "^12.0.0", 15 | "ts-loader": "^9.2.5", 16 | "typescript": "^4.3.5", 17 | "webpack": "^5.50.0", 18 | "webpack-cli": "^4.7.2" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /04_browser-app/016/02_webpackによるモジュールの依存関係の解決/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_02", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "webpack", 8 | "serve": "serve ./ -p 3000" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "serve": "^12.0.0", 15 | "ts-loader": "^9.2.5", 16 | "typescript": "^4.3.5", 17 | "webpack": "^5.50.0", 18 | "webpack-cli": "^4.7.2" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /04_browser-app/018/05_「TaskCollection」クラスの作成/ts/Task.ts: -------------------------------------------------------------------------------- 1 | import { v4 as uuid } from 'uuid' 2 | 3 | export const statusMap = { 4 | todo: 'TODO', 5 | doing: 'DOING', 6 | done: 'DONE', 7 | } as const 8 | export type Status = typeof statusMap[keyof typeof statusMap] 9 | 10 | export class Task { 11 | readonly id 12 | title 13 | status 14 | 15 | constructor(properties: { title: string }) { 16 | this.id = uuid() 17 | this.title = properties.title 18 | this.status = statusMap.todo 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /05_react-app/022/04_UIライブラリで利用する定数の準備/src/lib/constants/index.ts: -------------------------------------------------------------------------------- 1 | export const color = { 2 | green: '#4CAF50', 3 | red: '#F44336', 4 | gray: '#9E9E9E', 5 | white: '#fff', 6 | black: '#000', 7 | } as const 8 | 9 | export const radius = { 10 | s: '4px', 11 | m: '8px', 12 | l: '16px', 13 | } as const 14 | 15 | export const space = { 16 | s: '4px', 17 | m: '8px', 18 | l: '16px', 19 | } as const 20 | 21 | export const fontSize = { 22 | s: '10px', 23 | m: '16px', 24 | l: '24px', 25 | } as const 26 | -------------------------------------------------------------------------------- /05_react-app/023/01_「Text」コンポーネント/src/libs/constants/index.ts: -------------------------------------------------------------------------------- 1 | export const color = { 2 | green: '#4CAF50', 3 | red: '#F44336', 4 | gray: '#9E9E9E', 5 | white: '#fff', 6 | black: '#000', 7 | } as const 8 | 9 | export const radius = { 10 | s: '4px', 11 | m: '8px', 12 | l: '16px', 13 | } as const 14 | 15 | export const space = { 16 | s: '4px', 17 | m: '8px', 18 | l: '16px', 19 | } as const 20 | 21 | export const fontSize = { 22 | s: '10px', 23 | m: '16px', 24 | l: '24px', 25 | } as const 26 | -------------------------------------------------------------------------------- /05_react-app/023/02_「Heading」コンポーネント/src/libs/constants/index.ts: -------------------------------------------------------------------------------- 1 | export const color = { 2 | green: '#4CAF50', 3 | red: '#F44336', 4 | gray: '#9E9E9E', 5 | white: '#fff', 6 | black: '#000', 7 | } as const 8 | 9 | export const radius = { 10 | s: '4px', 11 | m: '8px', 12 | l: '16px', 13 | } as const 14 | 15 | export const space = { 16 | s: '4px', 17 | m: '8px', 18 | l: '16px', 19 | } as const 20 | 21 | export const fontSize = { 22 | s: '10px', 23 | m: '16px', 24 | l: '24px', 25 | } as const 26 | -------------------------------------------------------------------------------- /05_react-app/023/03_「Button」コンポーネント/src/libs/constants/index.ts: -------------------------------------------------------------------------------- 1 | export const color = { 2 | green: '#4CAF50', 3 | red: '#F44336', 4 | gray: '#9E9E9E', 5 | white: '#fff', 6 | black: '#000', 7 | } as const 8 | 9 | export const radius = { 10 | s: '4px', 11 | m: '8px', 12 | l: '16px', 13 | } as const 14 | 15 | export const space = { 16 | s: '4px', 17 | m: '8px', 18 | l: '16px', 19 | } as const 20 | 21 | export const fontSize = { 22 | s: '10px', 23 | m: '16px', 24 | l: '24px', 25 | } as const 26 | -------------------------------------------------------------------------------- /05_react-app/023/04_「Textarea」コンポーネント/src/libs/constants/index.ts: -------------------------------------------------------------------------------- 1 | export const color = { 2 | green: '#4CAF50', 3 | red: '#F44336', 4 | gray: '#9E9E9E', 5 | white: '#fff', 6 | black: '#000', 7 | } as const 8 | 9 | export const radius = { 10 | s: '4px', 11 | m: '8px', 12 | l: '16px', 13 | } as const 14 | 15 | export const space = { 16 | s: '4px', 17 | m: '8px', 18 | l: '16px', 19 | } as const 20 | 21 | export const fontSize = { 22 | s: '10px', 23 | m: '16px', 24 | l: '24px', 25 | } as const 26 | -------------------------------------------------------------------------------- /05_react-app/023/05_「Input」コンポーネント/src/libs/constants/index.ts: -------------------------------------------------------------------------------- 1 | export const color = { 2 | green: '#4CAF50', 3 | red: '#F44336', 4 | gray: '#9E9E9E', 5 | white: '#fff', 6 | black: '#000', 7 | } as const 8 | 9 | export const radius = { 10 | s: '4px', 11 | m: '8px', 12 | l: '16px', 13 | } as const 14 | 15 | export const space = { 16 | s: '4px', 17 | m: '8px', 18 | l: '16px', 19 | } as const 20 | 21 | export const fontSize = { 22 | s: '10px', 23 | m: '16px', 24 | l: '24px', 25 | } as const 26 | -------------------------------------------------------------------------------- /05_react-app/023/06_「PasswordForm」コンポーネント/src/libs/constants/index.ts: -------------------------------------------------------------------------------- 1 | export const color = { 2 | green: '#4CAF50', 3 | red: '#F44336', 4 | gray: '#9E9E9E', 5 | white: '#fff', 6 | black: '#000', 7 | } as const 8 | 9 | export const radius = { 10 | s: '4px', 11 | m: '8px', 12 | l: '16px', 13 | } as const 14 | 15 | export const space = { 16 | s: '4px', 17 | m: '8px', 18 | l: '16px', 19 | } as const 20 | 21 | export const fontSize = { 22 | s: '10px', 23 | m: '16px', 24 | l: '24px', 25 | } as const 26 | -------------------------------------------------------------------------------- /04_browser-app/016/04_HTMLとCSSの用意/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_02", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack -w", 8 | "build": "webpack", 9 | "serve": "serve ./ -p 3000" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "serve": "^12.0.0", 16 | "ts-loader": "^9.2.5", 17 | "typescript": "^4.3.5", 18 | "webpack": "^5.50.0", 19 | "webpack-cli": "^4.7.2" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /04_browser-app/018/02_「Task」クラスの作成/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_02", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack -w", 8 | "build": "webpack", 9 | "serve": "serve ./ -p 3000" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "serve": "^12.0.0", 16 | "ts-loader": "^9.2.5", 17 | "typescript": "^4.3.5", 18 | "webpack": "^5.50.0", 19 | "webpack-cli": "^4.7.2" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /05_react-app/023/02_「Heading」コンポーネント/src/libs/Heading.tsx: -------------------------------------------------------------------------------- 1 | import { VFC, ReactNode } from 'react' 2 | import styled from 'styled-components' 3 | 4 | type Props = { 5 | children: ReactNode 6 | tag: HeadingType 7 | } 8 | 9 | type HeadingType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' 10 | 11 | export const Heading: VFC = ({ 12 | children, 13 | tag, 14 | }) => { 15 | return ( 16 | 17 | {children} 18 | 19 | ) 20 | } 21 | 22 | const Wrapper = styled.h1` 23 | margin: 0; 24 | ` 25 | -------------------------------------------------------------------------------- /05_react-app/023/03_「Button」コンポーネント/src/libs/Heading.tsx: -------------------------------------------------------------------------------- 1 | import { VFC, ReactNode } from 'react' 2 | import styled from 'styled-components' 3 | 4 | type Props = { 5 | children: ReactNode 6 | tag: HeadingType 7 | } 8 | 9 | type HeadingType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' 10 | 11 | export const Heading: VFC = ({ 12 | children, 13 | tag, 14 | }) => { 15 | return ( 16 | 17 | {children} 18 | 19 | ) 20 | } 21 | 22 | const Wrapper = styled.h1` 23 | margin: 0; 24 | ` 25 | -------------------------------------------------------------------------------- /05_react-app/023/04_「Textarea」コンポーネント/src/libs/Heading.tsx: -------------------------------------------------------------------------------- 1 | import { VFC, ReactNode } from 'react' 2 | import styled from 'styled-components' 3 | 4 | type Props = { 5 | children: ReactNode 6 | tag: HeadingType 7 | } 8 | 9 | type HeadingType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' 10 | 11 | export const Heading: VFC = ({ 12 | children, 13 | tag, 14 | }) => { 15 | return ( 16 | 17 | {children} 18 | 19 | ) 20 | } 21 | 22 | const Wrapper = styled.h1` 23 | margin: 0; 24 | ` 25 | -------------------------------------------------------------------------------- /05_react-app/023/05_「Input」コンポーネント/src/libs/Heading.tsx: -------------------------------------------------------------------------------- 1 | import { VFC, ReactNode } from 'react' 2 | import styled from 'styled-components' 3 | 4 | type Props = { 5 | children: ReactNode 6 | tag: HeadingType 7 | } 8 | 9 | type HeadingType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' 10 | 11 | export const Heading: VFC = ({ 12 | children, 13 | tag, 14 | }) => { 15 | return ( 16 | 17 | {children} 18 | 19 | ) 20 | } 21 | 22 | const Wrapper = styled.h1` 23 | margin: 0; 24 | ` 25 | -------------------------------------------------------------------------------- /04_browser-app/017/02_「Application」クラス/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_02", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack -w", 8 | "build": "webpack", 9 | "serve": "serve ./ -p 3000" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "serve": "^12.0.0", 16 | "ts-loader": "^9.2.5", 17 | "typescript": "^4.3.5", 18 | "webpack": "^5.50.0", 19 | "webpack-cli": "^4.7.2" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /05_react-app/023/06_「PasswordForm」コンポーネント/src/libs/Heading.tsx: -------------------------------------------------------------------------------- 1 | import { VFC, ReactNode } from 'react' 2 | import styled from 'styled-components' 3 | 4 | type Props = { 5 | children: ReactNode 6 | tag: HeadingType 7 | } 8 | 9 | type HeadingType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' 10 | 11 | export const Heading: VFC = ({ 12 | children, 13 | tag, 14 | }) => { 15 | return ( 16 | 17 | {children} 18 | 19 | ) 20 | } 21 | 22 | const Wrapper = styled.h1` 23 | margin: 0; 24 | ` 25 | -------------------------------------------------------------------------------- /05_react-app/022/02_ビルド設定/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "sourceMap": true, 4 | "target": "ES2015", 5 | "lib": ["DOM", "ESNext"], 6 | "module": "ES2015", 7 | "esModuleInterop": true, 8 | "strict": true, 9 | "forceConsistentCasingInFileNames": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "noImplicitReturns": true, 12 | "noUnusedLocals": true, 13 | "noUnusedParameters": true, 14 | "moduleResolution": "node", 15 | "jsx": "react-jsx", 16 | "allowJs": true 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /04_browser-app/017/04_「EventListener」クラス:「add」メソッド/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_02", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack -w", 8 | "build": "webpack", 9 | "serve": "serve ./ -p 3000" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "serve": "^12.0.0", 16 | "ts-loader": "^9.2.5", 17 | "typescript": "^4.3.5", 18 | "webpack": "^5.50.0", 19 | "webpack-cli": "^4.7.2" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /05_react-app/023/01_「Text」コンポーネント/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "sourceMap": true, 4 | "target": "ES2015", 5 | "lib": ["DOM", "ESNext"], 6 | "module": "ES2015", 7 | "esModuleInterop": true, 8 | "strict": true, 9 | "forceConsistentCasingInFileNames": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "noImplicitReturns": true, 12 | "noUnusedLocals": true, 13 | "noUnusedParameters": true, 14 | "moduleResolution": "node", 15 | "jsx": "react-jsx", 16 | "allowJs": true 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /05_react-app/023/05_「Input」コンポーネント/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "sourceMap": true, 4 | "target": "ES2015", 5 | "lib": ["DOM", "ESNext"], 6 | "module": "ES2015", 7 | "esModuleInterop": true, 8 | "strict": true, 9 | "forceConsistentCasingInFileNames": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "noImplicitReturns": true, 12 | "noUnusedLocals": true, 13 | "noUnusedParameters": true, 14 | "moduleResolution": "node", 15 | "jsx": "react-jsx", 16 | "allowJs": true 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /04_browser-app/017/03_「EventListener」クラス:DOM APIの型定義/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_02", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack -w", 8 | "build": "webpack", 9 | "serve": "serve ./ -p 3000" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "serve": "^12.0.0", 16 | "ts-loader": "^9.2.5", 17 | "typescript": "^4.3.5", 18 | "webpack": "^5.50.0", 19 | "webpack-cli": "^4.7.2" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /04_browser-app/017/05_「EventListener」クラス:「remove」メソッド/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_02", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack -w", 8 | "build": "webpack", 9 | "serve": "serve ./ -p 3000" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "serve": "^12.0.0", 16 | "ts-loader": "^9.2.5", 17 | "typescript": "^4.3.5", 18 | "webpack": "^5.50.0", 19 | "webpack-cli": "^4.7.2" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /05_react-app/022/04_UIライブラリで利用する定数の準備/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "sourceMap": true, 4 | "target": "ES2015", 5 | "lib": ["DOM", "ESNext"], 6 | "module": "ES2015", 7 | "esModuleInterop": true, 8 | "strict": true, 9 | "forceConsistentCasingInFileNames": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "noImplicitReturns": true, 12 | "noUnusedLocals": true, 13 | "noUnusedParameters": true, 14 | "moduleResolution": "node", 15 | "jsx": "react-jsx", 16 | "allowJs": true 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /05_react-app/023/02_「Heading」コンポーネント/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "sourceMap": true, 4 | "target": "ES2015", 5 | "lib": ["DOM", "ESNext"], 6 | "module": "ES2015", 7 | "esModuleInterop": true, 8 | "strict": true, 9 | "forceConsistentCasingInFileNames": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "noImplicitReturns": true, 12 | "noUnusedLocals": true, 13 | "noUnusedParameters": true, 14 | "moduleResolution": "node", 15 | "jsx": "react-jsx", 16 | "allowJs": true 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /05_react-app/023/03_「Button」コンポーネント/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "sourceMap": true, 4 | "target": "ES2015", 5 | "lib": ["DOM", "ESNext"], 6 | "module": "ES2015", 7 | "esModuleInterop": true, 8 | "strict": true, 9 | "forceConsistentCasingInFileNames": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "noImplicitReturns": true, 12 | "noUnusedLocals": true, 13 | "noUnusedParameters": true, 14 | "moduleResolution": "node", 15 | "jsx": "react-jsx", 16 | "allowJs": true 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /05_react-app/023/04_「Textarea」コンポーネント/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "sourceMap": true, 4 | "target": "ES2015", 5 | "lib": ["DOM", "ESNext"], 6 | "module": "ES2015", 7 | "esModuleInterop": true, 8 | "strict": true, 9 | "forceConsistentCasingInFileNames": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "noImplicitReturns": true, 12 | "noUnusedLocals": true, 13 | "noUnusedParameters": true, 14 | "moduleResolution": "node", 15 | "jsx": "react-jsx", 16 | "allowJs": true 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /05_react-app/022/03_Reactアプリケーションを実行する準備/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "sourceMap": true, 4 | "target": "ES2015", 5 | "lib": ["DOM", "ESNext"], 6 | "module": "ES2015", 7 | "esModuleInterop": true, 8 | "strict": true, 9 | "forceConsistentCasingInFileNames": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "noImplicitReturns": true, 12 | "noUnusedLocals": true, 13 | "noUnusedParameters": true, 14 | "moduleResolution": "node", 15 | "jsx": "react-jsx", 16 | "allowJs": true 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /05_react-app/023/06_「PasswordForm」コンポーネント/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "sourceMap": true, 4 | "target": "ES2015", 5 | "lib": ["DOM", "ESNext"], 6 | "module": "ES2015", 7 | "esModuleInterop": true, 8 | "strict": true, 9 | "forceConsistentCasingInFileNames": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "noImplicitReturns": true, 12 | "noUnusedLocals": true, 13 | "noUnusedParameters": true, 14 | "moduleResolution": "node", 15 | "jsx": "react-jsx", 16 | "allowJs": true 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /04_browser-app/018/04_列挙型/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path') 2 | 3 | module.exports = { 4 | mode: 'development', 5 | devtool: 'inline-source-map', 6 | entry: resolve(__dirname, 'ts/index.ts'), 7 | output: { 8 | filename: 'index.js', 9 | path: resolve(__dirname, 'dist'), 10 | }, 11 | resolve: { 12 | extensions: ['.ts', '.js'], 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.ts/, 18 | use: { 19 | loader: 'ts-loader', 20 | }, 21 | }, 22 | ], 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /04_browser-app/018/07_タスクの削除/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path') 2 | 3 | module.exports = { 4 | mode: 'development', 5 | devtool: 'inline-source-map', 6 | entry: resolve(__dirname, 'ts/index.ts'), 7 | output: { 8 | filename: 'index.js', 9 | path: resolve(__dirname, 'dist'), 10 | }, 11 | resolve: { 12 | extensions: ['.ts', '.js'], 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.ts/, 18 | use: { 19 | loader: 'ts-loader', 20 | }, 21 | }, 22 | ], 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /04_browser-app/018/08_タスクの更新/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path') 2 | 3 | module.exports = { 4 | mode: 'development', 5 | devtool: 'inline-source-map', 6 | entry: resolve(__dirname, 'ts/index.ts'), 7 | output: { 8 | filename: 'index.js', 9 | path: resolve(__dirname, 'dist'), 10 | }, 11 | resolve: { 12 | extensions: ['.ts', '.js'], 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.ts/, 18 | use: { 19 | loader: 'ts-loader', 20 | }, 21 | }, 22 | ], 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /04_browser-app/019/03_データの永続化/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path') 2 | 3 | module.exports = { 4 | mode: 'development', 5 | devtool: 'inline-source-map', 6 | entry: resolve(__dirname, 'ts/index.ts'), 7 | output: { 8 | filename: 'index.js', 9 | path: resolve(__dirname, 'dist'), 10 | }, 11 | resolve: { 12 | extensions: ['.ts', '.js'], 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.ts/, 18 | use: { 19 | loader: 'ts-loader', 20 | }, 21 | }, 22 | ], 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /04_browser-app/020/04_型定義の改善/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path') 2 | 3 | module.exports = { 4 | mode: 'development', 5 | devtool: 'inline-source-map', 6 | entry: resolve(__dirname, 'ts/index.ts'), 7 | output: { 8 | filename: 'index.js', 9 | path: resolve(__dirname, 'dist'), 10 | }, 11 | resolve: { 12 | extensions: ['.ts', '.js'], 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.ts/, 18 | use: { 19 | loader: 'ts-loader', 20 | }, 21 | }, 22 | ], 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /04_browser-app/016/04_HTMLとCSSの用意/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path') 2 | 3 | module.exports = { 4 | mode: 'development', 5 | devtool: 'inline-source-map', 6 | entry: resolve(__dirname, 'ts/index.ts'), 7 | output: { 8 | filename: 'index.js', 9 | path: resolve(__dirname, 'dist'), 10 | }, 11 | resolve: { 12 | extensions: ['.ts', '.js'], 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.ts/, 18 | use: { 19 | loader: 'ts-loader', 20 | }, 21 | }, 22 | ], 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /04_browser-app/017/04_「EventListener」クラス:「add」メソッド/ts/index.ts: -------------------------------------------------------------------------------- 1 | import { EventListener } from './EventListener' 2 | 3 | class Application { 4 | start() { 5 | const eventListener = new EventListener() 6 | const button = document.getElementById('deleteAllDoneTask') 7 | 8 | if (!button) return 9 | 10 | eventListener.add( 11 | 'sample', 12 | 'click', 13 | button, 14 | () => alert('clicked'), 15 | ) 16 | } 17 | } 18 | 19 | window.addEventListener('load', () => { 20 | const app = new Application() 21 | app.start() 22 | }) 23 | -------------------------------------------------------------------------------- /04_browser-app/018/02_「Task」クラスの作成/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path') 2 | 3 | module.exports = { 4 | mode: 'development', 5 | devtool: 'inline-source-map', 6 | entry: resolve(__dirname, 'ts/index.ts'), 7 | output: { 8 | filename: 'index.js', 9 | path: resolve(__dirname, 'dist'), 10 | }, 11 | resolve: { 12 | extensions: ['.ts', '.js'], 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.ts/, 18 | use: { 19 | loader: 'ts-loader', 20 | }, 21 | }, 22 | ], 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /04_browser-app/018/06_作成したタスクの描画/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path') 2 | 3 | module.exports = { 4 | mode: 'development', 5 | devtool: 'inline-source-map', 6 | entry: resolve(__dirname, 'ts/index.ts'), 7 | output: { 8 | filename: 'index.js', 9 | path: resolve(__dirname, 'dist'), 10 | }, 11 | resolve: { 12 | extensions: ['.ts', '.js'], 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.ts/, 18 | use: { 19 | loader: 'ts-loader', 20 | }, 21 | }, 22 | ], 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /04_browser-app/018/09_ドラッグ&ドロップの実装/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path') 2 | 3 | module.exports = { 4 | mode: 'development', 5 | devtool: 'inline-source-map', 6 | entry: resolve(__dirname, 'ts/index.ts'), 7 | output: { 8 | filename: 'index.js', 9 | path: resolve(__dirname, 'dist'), 10 | }, 11 | resolve: { 12 | extensions: ['.ts', '.js'], 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.ts/, 18 | use: { 19 | loader: 'ts-loader', 20 | }, 21 | }, 22 | ], 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /04_browser-app/019/02_一括削除機能の作成/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path') 2 | 3 | module.exports = { 4 | mode: 'development', 5 | devtool: 'inline-source-map', 6 | entry: resolve(__dirname, 'ts/index.ts'), 7 | output: { 8 | filename: 'index.js', 9 | path: resolve(__dirname, 'dist'), 10 | }, 11 | resolve: { 12 | extensions: ['.ts', '.js'], 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.ts/, 18 | use: { 19 | loader: 'ts-loader', 20 | }, 21 | }, 22 | ], 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /04_browser-app/016/03_TypeScriptの設定の詳細/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path') 2 | 3 | module.exports = { 4 | mode: 'development', 5 | devtool: 'inline-source-map', 6 | entry: resolve(__dirname, 'ts/index.ts'), 7 | output: { 8 | filename: 'index.js', 9 | path: resolve(__dirname, 'dist'), 10 | }, 11 | resolve: { 12 | extensions: ['.ts', '.js'], 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.ts/, 18 | use: { 19 | loader: 'ts-loader', 20 | }, 21 | }, 22 | ], 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /04_browser-app/017/02_「Application」クラス/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path') 2 | 3 | module.exports = { 4 | mode: 'development', 5 | devtool: 'inline-source-map', 6 | entry: resolve(__dirname, 'ts/index.ts'), 7 | output: { 8 | filename: 'index.js', 9 | path: resolve(__dirname, 'dist'), 10 | }, 11 | resolve: { 12 | extensions: ['.ts', '.js'], 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.ts/, 18 | use: { 19 | loader: 'ts-loader', 20 | }, 21 | }, 22 | ], 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /04_browser-app/019/05_アプリ起動時のタスク一覧の表示/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path') 2 | 3 | module.exports = { 4 | mode: 'development', 5 | devtool: 'inline-source-map', 6 | entry: resolve(__dirname, 'ts/index.ts'), 7 | output: { 8 | filename: 'index.js', 9 | path: resolve(__dirname, 'dist'), 10 | }, 11 | resolve: { 12 | extensions: ['.ts', '.js'], 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.ts/, 18 | use: { 19 | loader: 'ts-loader', 20 | }, 21 | }, 22 | ], 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /04_browser-app/020/01_ロジックのリファクタリング/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path') 2 | 3 | module.exports = { 4 | mode: 'development', 5 | devtool: 'inline-source-map', 6 | entry: resolve(__dirname, 'ts/index.ts'), 7 | output: { 8 | filename: 'index.js', 9 | path: resolve(__dirname, 'dist'), 10 | }, 11 | resolve: { 12 | extensions: ['.ts', '.js'], 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.ts/, 18 | use: { 19 | loader: 'ts-loader', 20 | }, 21 | }, 22 | ], 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /04_browser-app/017/04_「EventListener」クラス:「add」メソッド/ts/EventListener.ts: -------------------------------------------------------------------------------- 1 | type Listeners = { 2 | [id: string]: { 3 | event: string 4 | element: HTMLElement 5 | handler: (e: Event) => void 6 | } 7 | } 8 | 9 | export class EventListener { 10 | private readonly listeners: Listeners = {} 11 | 12 | add(listenerId: string, event: string, element: HTMLElement, handler: (e: Event) => void) { 13 | this.listeners[listenerId] = { 14 | event, 15 | element, 16 | handler, 17 | } 18 | 19 | element.addEventListener(event, handler) 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /04_browser-app/018/05_「TaskCollection」クラスの作成/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path') 2 | 3 | module.exports = { 4 | mode: 'development', 5 | devtool: 'inline-source-map', 6 | entry: resolve(__dirname, 'ts/index.ts'), 7 | output: { 8 | filename: 'index.js', 9 | path: resolve(__dirname, 'dist'), 10 | }, 11 | resolve: { 12 | extensions: ['.ts', '.js'], 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.ts/, 18 | use: { 19 | loader: 'ts-loader', 20 | }, 21 | }, 22 | ], 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /04_browser-app/019/04_Assertion Functions/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path') 2 | 3 | module.exports = { 4 | mode: 'development', 5 | devtool: 'inline-source-map', 6 | entry: resolve(__dirname, 'ts/index.ts'), 7 | output: { 8 | filename: 'index.js', 9 | path: resolve(__dirname, 'dist'), 10 | }, 11 | resolve: { 12 | extensions: ['.ts', '.js'], 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.ts/, 18 | use: { 19 | loader: 'ts-loader', 20 | }, 21 | }, 22 | ], 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /04_browser-app/016/02_webpackによるモジュールの依存関係の解決/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path') 2 | 3 | module.exports = { 4 | mode: 'development', 5 | devtool: 'inline-source-map', 6 | entry: resolve(__dirname, 'ts/index.ts'), 7 | output: { 8 | filename: 'index.js', 9 | path: resolve(__dirname, 'dist'), 10 | }, 11 | resolve: { 12 | extensions: ['.ts', '.js'], 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.ts/, 18 | use: { 19 | loader: 'ts-loader', 20 | }, 21 | }, 22 | ], 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /04_browser-app/018/03_外部ライブラリの使用とDefinitelyTyped/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path') 2 | 3 | module.exports = { 4 | mode: 'development', 5 | devtool: 'inline-source-map', 6 | entry: resolve(__dirname, 'ts/index.ts'), 7 | output: { 8 | filename: 'index.js', 9 | path: resolve(__dirname, 'dist'), 10 | }, 11 | resolve: { 12 | extensions: ['.ts', '.js'], 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.ts/, 18 | use: { 19 | loader: 'ts-loader', 20 | }, 21 | }, 22 | ], 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /04_browser-app/017/03_「EventListener」クラス:DOM APIの型定義/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path') 2 | 3 | module.exports = { 4 | mode: 'development', 5 | devtool: 'inline-source-map', 6 | entry: resolve(__dirname, 'ts/index.ts'), 7 | output: { 8 | filename: 'index.js', 9 | path: resolve(__dirname, 'dist'), 10 | }, 11 | resolve: { 12 | extensions: ['.ts', '.js'], 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.ts/, 18 | use: { 19 | loader: 'ts-loader', 20 | }, 21 | }, 22 | ], 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /04_browser-app/017/04_「EventListener」クラス:「add」メソッド/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path') 2 | 3 | module.exports = { 4 | mode: 'development', 5 | devtool: 'inline-source-map', 6 | entry: resolve(__dirname, 'ts/index.ts'), 7 | output: { 8 | filename: 'index.js', 9 | path: resolve(__dirname, 'dist'), 10 | }, 11 | resolve: { 12 | extensions: ['.ts', '.js'], 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.ts/, 18 | use: { 19 | loader: 'ts-loader', 20 | }, 21 | }, 22 | ], 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /04_browser-app/017/05_「EventListener」クラス:「remove」メソッド/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path') 2 | 3 | module.exports = { 4 | mode: 'development', 5 | devtool: 'inline-source-map', 6 | entry: resolve(__dirname, 'ts/index.ts'), 7 | output: { 8 | filename: 'index.js', 9 | path: resolve(__dirname, 'dist'), 10 | }, 11 | resolve: { 12 | extensions: ['.ts', '.js'], 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.ts/, 18 | use: { 19 | loader: 'ts-loader', 20 | }, 21 | }, 22 | ], 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /04_browser-app/021/01_本番用ビルド設定の追加/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path') 2 | 3 | module.exports = { 4 | mode: process.env.NODE_ENV || 'development', 5 | devtool: 'inline-source-map', 6 | entry: resolve(__dirname, 'ts/index.ts'), 7 | output: { 8 | filename: 'index.js', 9 | path: resolve(__dirname, 'dist'), 10 | }, 11 | resolve: { 12 | extensions: ['.ts', '.js'], 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.ts/, 18 | use: { 19 | loader: 'ts-loader', 20 | }, 21 | }, 22 | ], 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /05_react-app/022/02_ビルド設定/webpack.config.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const { resolve } = require('path') 3 | 4 | module.exports = { 5 | mode: 'development', 6 | devtool: 'inline-source-map', 7 | entry: resolve(__dirname, 'src/index.jsx'), 8 | output: { 9 | filename: 'index.js', 10 | path: resolve(__dirname, 'dist'), 11 | }, 12 | resolve: { 13 | extensions: ['.ts', '.js', '.jsx'], 14 | }, 15 | module: { 16 | rules: [ 17 | { 18 | test: /\.(ts|jsx)$/, 19 | use: { 20 | loader: 'ts-loader', 21 | }, 22 | }, 23 | ], 24 | }, 25 | } 26 | -------------------------------------------------------------------------------- /04_browser-app/018/09_ドラッグ&ドロップの実装/ts/TaskCollection.ts: -------------------------------------------------------------------------------- 1 | import { Task } from './Task' 2 | 3 | export class TaskCollection { 4 | private tasks: Task[] = [] 5 | 6 | add(task: Task) { 7 | this.tasks.push(task) 8 | } 9 | 10 | delete(task: Task) { 11 | this.tasks = this.tasks.filter(({ id }) => id !== task.id) 12 | } 13 | 14 | find(id: string) { 15 | return this.tasks.find((task) => task.id === id) 16 | } 17 | 18 | update(task: Task) { 19 | this.tasks = this.tasks.map((item) => { 20 | if (item.id === task.id) return task 21 | return item 22 | }) 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /04_browser-app/017/05_「EventListener」クラス:「remove」メソッド/ts/index.ts: -------------------------------------------------------------------------------- 1 | import { EventListener } from './EventListener' 2 | 3 | class Application { 4 | start() { 5 | const eventListener = new EventListener() 6 | const button = document.getElementById('deleteAllDoneTask') 7 | 8 | if (!button) return 9 | 10 | eventListener.add( 11 | 'sample', 12 | 'click', 13 | button, 14 | () => alert('clicked'), 15 | ) 16 | 17 | eventListener.remove('sample') 18 | } 19 | } 20 | 21 | window.addEventListener('load', () => { 22 | const app = new Application() 23 | app.start() 24 | }) 25 | -------------------------------------------------------------------------------- /04_browser-app/018/04_列挙型/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_02", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack -w", 8 | "build": "webpack", 9 | "serve": "serve ./ -p 3000" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/uuid": "^8.3.1", 16 | "serve": "^12.0.0", 17 | "ts-loader": "^9.2.5", 18 | "typescript": "^4.3.5", 19 | "webpack": "^5.50.0", 20 | "webpack-cli": "^4.7.2" 21 | }, 22 | "dependencies": { 23 | "uuid": "^8.3.2" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /05_react-app/023/01_「Text」コンポーネント/webpack.config.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const { resolve } = require('path') 3 | 4 | module.exports = { 5 | mode: 'development', 6 | devtool: 'inline-source-map', 7 | entry: resolve(__dirname, 'src/index.tsx'), 8 | output: { 9 | filename: 'index.js', 10 | path: resolve(__dirname, 'dist'), 11 | }, 12 | resolve: { 13 | extensions: ['.ts', '.tsx', '.js', '.jsx'], 14 | }, 15 | module: { 16 | rules: [ 17 | { 18 | test: /\.(ts|tsx|jsx)$/, 19 | use: { 20 | loader: 'ts-loader', 21 | }, 22 | }, 23 | ], 24 | }, 25 | } 26 | -------------------------------------------------------------------------------- /05_react-app/023/02_「Heading」コンポーネント/webpack.config.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const { resolve } = require('path') 3 | 4 | module.exports = { 5 | mode: 'development', 6 | devtool: 'inline-source-map', 7 | entry: resolve(__dirname, 'src/index.tsx'), 8 | output: { 9 | filename: 'index.js', 10 | path: resolve(__dirname, 'dist'), 11 | }, 12 | resolve: { 13 | extensions: ['.ts', '.tsx', '.js', '.jsx'], 14 | }, 15 | module: { 16 | rules: [ 17 | { 18 | test: /\.(ts|tsx|jsx)$/, 19 | use: { 20 | loader: 'ts-loader', 21 | }, 22 | }, 23 | ], 24 | }, 25 | } 26 | -------------------------------------------------------------------------------- /05_react-app/023/03_「Button」コンポーネント/webpack.config.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const { resolve } = require('path') 3 | 4 | module.exports = { 5 | mode: 'development', 6 | devtool: 'inline-source-map', 7 | entry: resolve(__dirname, 'src/index.tsx'), 8 | output: { 9 | filename: 'index.js', 10 | path: resolve(__dirname, 'dist'), 11 | }, 12 | resolve: { 13 | extensions: ['.ts', '.tsx', '.js', '.jsx'], 14 | }, 15 | module: { 16 | rules: [ 17 | { 18 | test: /\.(ts|tsx|jsx)$/, 19 | use: { 20 | loader: 'ts-loader', 21 | }, 22 | }, 23 | ], 24 | }, 25 | } 26 | -------------------------------------------------------------------------------- /05_react-app/023/05_「Input」コンポーネント/webpack.config.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const { resolve } = require('path') 3 | 4 | module.exports = { 5 | mode: 'development', 6 | devtool: 'inline-source-map', 7 | entry: resolve(__dirname, 'src/index.tsx'), 8 | output: { 9 | filename: 'index.js', 10 | path: resolve(__dirname, 'dist'), 11 | }, 12 | resolve: { 13 | extensions: ['.ts', '.tsx', '.js', '.jsx'], 14 | }, 15 | module: { 16 | rules: [ 17 | { 18 | test: /\.(ts|tsx|jsx)$/, 19 | use: { 20 | loader: 'ts-loader', 21 | }, 22 | }, 23 | ], 24 | }, 25 | } 26 | -------------------------------------------------------------------------------- /04_browser-app/018/07_タスクの削除/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_02", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack -w", 8 | "build": "webpack", 9 | "serve": "serve ./ -p 3000" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/uuid": "^8.3.1", 16 | "serve": "^12.0.0", 17 | "ts-loader": "^9.2.5", 18 | "typescript": "^4.3.5", 19 | "webpack": "^5.50.0", 20 | "webpack-cli": "^4.7.2" 21 | }, 22 | "dependencies": { 23 | "uuid": "^8.3.2" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /04_browser-app/018/08_タスクの更新/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_02", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack -w", 8 | "build": "webpack", 9 | "serve": "serve ./ -p 3000" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/uuid": "^8.3.1", 16 | "serve": "^12.0.0", 17 | "ts-loader": "^9.2.5", 18 | "typescript": "^4.3.5", 19 | "webpack": "^5.50.0", 20 | "webpack-cli": "^4.7.2" 21 | }, 22 | "dependencies": { 23 | "uuid": "^8.3.2" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /05_react-app/022/03_Reactアプリケーションを実行する準備/webpack.config.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const { resolve } = require('path') 3 | 4 | module.exports = { 5 | mode: 'development', 6 | devtool: 'inline-source-map', 7 | entry: resolve(__dirname, 'src/index.tsx'), 8 | output: { 9 | filename: 'index.js', 10 | path: resolve(__dirname, 'dist'), 11 | }, 12 | resolve: { 13 | extensions: ['.ts', '.tsx', '.js', '.jsx'], 14 | }, 15 | module: { 16 | rules: [ 17 | { 18 | test: /\.(ts|tsx|jsx)$/, 19 | use: { 20 | loader: 'ts-loader', 21 | }, 22 | }, 23 | ], 24 | }, 25 | } 26 | -------------------------------------------------------------------------------- /05_react-app/022/04_UIライブラリで利用する定数の準備/webpack.config.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const { resolve } = require('path') 3 | 4 | module.exports = { 5 | mode: 'development', 6 | devtool: 'inline-source-map', 7 | entry: resolve(__dirname, 'src/index.tsx'), 8 | output: { 9 | filename: 'index.js', 10 | path: resolve(__dirname, 'dist'), 11 | }, 12 | resolve: { 13 | extensions: ['.ts', '.tsx', '.js', '.jsx'], 14 | }, 15 | module: { 16 | rules: [ 17 | { 18 | test: /\.(ts|tsx|jsx)$/, 19 | use: { 20 | loader: 'ts-loader', 21 | }, 22 | }, 23 | ], 24 | }, 25 | } 26 | -------------------------------------------------------------------------------- /05_react-app/023/04_「Textarea」コンポーネント/webpack.config.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const { resolve } = require('path') 3 | 4 | module.exports = { 5 | mode: 'development', 6 | devtool: 'inline-source-map', 7 | entry: resolve(__dirname, 'src/index.tsx'), 8 | output: { 9 | filename: 'index.js', 10 | path: resolve(__dirname, 'dist'), 11 | }, 12 | resolve: { 13 | extensions: ['.ts', '.tsx', '.js', '.jsx'], 14 | }, 15 | module: { 16 | rules: [ 17 | { 18 | test: /\.(ts|tsx|jsx)$/, 19 | use: { 20 | loader: 'ts-loader', 21 | }, 22 | }, 23 | ], 24 | }, 25 | } 26 | -------------------------------------------------------------------------------- /05_react-app/023/06_「PasswordForm」コンポーネント/webpack.config.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const { resolve } = require('path') 3 | 4 | module.exports = { 5 | mode: 'development', 6 | devtool: 'inline-source-map', 7 | entry: resolve(__dirname, 'src/index.tsx'), 8 | output: { 9 | filename: 'index.js', 10 | path: resolve(__dirname, 'dist'), 11 | }, 12 | resolve: { 13 | extensions: ['.ts', '.tsx', '.js', '.jsx'], 14 | }, 15 | module: { 16 | rules: [ 17 | { 18 | test: /\.(ts|tsx|jsx)$/, 19 | use: { 20 | loader: 'ts-loader', 21 | }, 22 | }, 23 | ], 24 | }, 25 | } 26 | -------------------------------------------------------------------------------- /04_browser-app/018/06_作成したタスクの描画/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_02", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack -w", 8 | "build": "webpack", 9 | "serve": "serve ./ -p 3000" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/uuid": "^8.3.1", 16 | "serve": "^12.0.0", 17 | "ts-loader": "^9.2.5", 18 | "typescript": "^4.3.5", 19 | "webpack": "^5.50.0", 20 | "webpack-cli": "^4.7.2" 21 | }, 22 | "dependencies": { 23 | "uuid": "^8.3.2" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /03_node-app/011/02_promptInput関数の追加/src/index.ts: -------------------------------------------------------------------------------- 1 | const printLine = (text: string, breakLine: boolean = true) => { 2 | process.stdout.write(text + (breakLine ? '\n' : '')) 3 | } 4 | 5 | const promptInput = async (text: string) => { 6 | printLine(`\n${text}\n> `, false) 7 | const input: string = await new Promise((resolve) => process.stdin.once('data', (data) => resolve(data.toString()))) 8 | return input.trim() 9 | } 10 | 11 | ;(async () => { 12 | const name = await promptInput('名前を入力してください') 13 | console.log(name) 14 | const age = await promptInput('年齢を入力してください') 15 | console.log(age) 16 | process.exit() 17 | })() 18 | -------------------------------------------------------------------------------- /04_browser-app/018/05_「TaskCollection」クラスの作成/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_02", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack -w", 8 | "build": "webpack", 9 | "serve": "serve ./ -p 3000" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/uuid": "^8.3.1", 16 | "serve": "^12.0.0", 17 | "ts-loader": "^9.2.5", 18 | "typescript": "^4.3.5", 19 | "webpack": "^5.50.0", 20 | "webpack-cli": "^4.7.2" 21 | }, 22 | "dependencies": { 23 | "uuid": "^8.3.2" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /04_browser-app/018/03_外部ライブラリの使用とDefinitelyTyped/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_02", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack -w", 8 | "build": "webpack", 9 | "serve": "serve ./ -p 3000" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/uuid": "^8.3.1", 16 | "serve": "^12.0.0", 17 | "ts-loader": "^9.2.5", 18 | "typescript": "^4.3.5", 19 | "webpack": "^5.50.0", 20 | "webpack-cli": "^4.7.2" 21 | }, 22 | "dependencies": { 23 | "uuid": "^8.3.2" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /05_react-app/022/01_必要なパッケージのインストール/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "05_react-app", 3 | "version": "1.0.0", 4 | "description": "", 5 | "keywords": [], 6 | "author": "", 7 | "license": "ISC", 8 | "devDependencies": { 9 | "@types/react": "^17.0.17", 10 | "@types/react-dom": "^17.0.9", 11 | "@types/styled-components": "^5.1.12", 12 | "serve": "^12.0.0", 13 | "ts-loader": "^9.2.5", 14 | "typescript": "^4.3.5", 15 | "webpack": "^5.50.0", 16 | "webpack-cli": "^4.7.2" 17 | }, 18 | "dependencies": { 19 | "react": "^17.0.2", 20 | "react-dom": "^17.0.2", 21 | "styled-components": "^5.3.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /03_node-app/012/02_「HitAndBlow」クラスのリファクタリング1/src/index.ts: -------------------------------------------------------------------------------- 1 | const printLine = (text: string, breakLine: boolean = true) => { 2 | process.stdout.write(text + (breakLine ? '\n' : '')) 3 | } 4 | 5 | const promptInput = async (text: string) => { 6 | printLine(`\n${text}\n> `, false) 7 | const input: string = await new Promise((resolve) => process.stdin.once('data', (data) => resolve(data.toString()))) 8 | return input.trim() 9 | } 10 | 11 | class HitAndBlow { 12 | answerSource = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'] 13 | answer: string[] = [] 14 | tryCount = 0 15 | } 16 | 17 | ;(async () => { 18 | const hitAndBlow = new HitAndBlow() 19 | })() 20 | -------------------------------------------------------------------------------- /04_browser-app/019/03_データの永続化/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_02", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack -w", 8 | "build": "webpack", 9 | "serve": "serve ./ -p 3000" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/dragula": "^3.7.1", 16 | "@types/uuid": "^8.3.1", 17 | "serve": "^12.0.0", 18 | "ts-loader": "^9.2.5", 19 | "typescript": "^4.3.5", 20 | "webpack": "^5.50.0", 21 | "webpack-cli": "^4.7.2" 22 | }, 23 | "dependencies": { 24 | "dragula": "^3.7.3", 25 | "uuid": "^8.3.2" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /04_browser-app/020/04_型定義の改善/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_02", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack -w", 8 | "build": "webpack", 9 | "serve": "serve ./ -p 3000" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/dragula": "^3.7.1", 16 | "@types/uuid": "^8.3.1", 17 | "serve": "^12.0.0", 18 | "ts-loader": "^9.2.5", 19 | "typescript": "^4.3.5", 20 | "webpack": "^5.50.0", 21 | "webpack-cli": "^4.7.2" 22 | }, 23 | "dependencies": { 24 | "dragula": "^3.7.3", 25 | "uuid": "^8.3.2" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /04_browser-app/018/09_ドラッグ&ドロップの実装/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_02", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack -w", 8 | "build": "webpack", 9 | "serve": "serve ./ -p 3000" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/dragula": "^3.7.1", 16 | "@types/uuid": "^8.3.1", 17 | "serve": "^12.0.0", 18 | "ts-loader": "^9.2.5", 19 | "typescript": "^4.3.5", 20 | "webpack": "^5.50.0", 21 | "webpack-cli": "^4.7.2" 22 | }, 23 | "dependencies": { 24 | "dragula": "^3.7.3", 25 | "uuid": "^8.3.2" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /04_browser-app/019/02_一括削除機能の作成/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_02", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack -w", 8 | "build": "webpack", 9 | "serve": "serve ./ -p 3000" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/dragula": "^3.7.1", 16 | "@types/uuid": "^8.3.1", 17 | "serve": "^12.0.0", 18 | "ts-loader": "^9.2.5", 19 | "typescript": "^4.3.5", 20 | "webpack": "^5.50.0", 21 | "webpack-cli": "^4.7.2" 22 | }, 23 | "dependencies": { 24 | "dragula": "^3.7.3", 25 | "uuid": "^8.3.2" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /04_browser-app/018/09_ドラッグ&ドロップの実装/ts/Task.ts: -------------------------------------------------------------------------------- 1 | import { v4 as uuid } from 'uuid' 2 | 3 | export const statusMap = { 4 | todo: 'TODO', 5 | doing: 'DOING', 6 | done: 'DONE', 7 | } as const 8 | export type Status = typeof statusMap[keyof typeof statusMap] 9 | 10 | export class Task { 11 | readonly id 12 | title 13 | status: Status 14 | 15 | constructor(properties: { title: string }) { 16 | this.id = uuid() 17 | this.title = properties.title 18 | this.status = statusMap.todo 19 | } 20 | 21 | update(properties: { title?: string; status?: Status }) { 22 | this.title = properties.title || this.title 23 | this.status = properties.status || this.status 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /04_browser-app/019/02_一括削除機能の作成/ts/Task.ts: -------------------------------------------------------------------------------- 1 | import { v4 as uuid } from 'uuid' 2 | 3 | export const statusMap = { 4 | todo: 'TODO', 5 | doing: 'DOING', 6 | done: 'DONE', 7 | } as const 8 | export type Status = typeof statusMap[keyof typeof statusMap] 9 | 10 | export class Task { 11 | readonly id 12 | title 13 | status: Status 14 | 15 | constructor(properties: { title: string }) { 16 | this.id = uuid() 17 | this.title = properties.title 18 | this.status = statusMap.todo 19 | } 20 | 21 | update(properties: { title?: string; status?: Status }) { 22 | this.title = properties.title || this.title 23 | this.status = properties.status || this.status 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /04_browser-app/019/05_アプリ起動時のタスク一覧の表示/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_02", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack -w", 8 | "build": "webpack", 9 | "serve": "serve ./ -p 3000" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/dragula": "^3.7.1", 16 | "@types/uuid": "^8.3.1", 17 | "serve": "^12.0.0", 18 | "ts-loader": "^9.2.5", 19 | "typescript": "^4.3.5", 20 | "webpack": "^5.50.0", 21 | "webpack-cli": "^4.7.2" 22 | }, 23 | "dependencies": { 24 | "dragula": "^3.7.3", 25 | "uuid": "^8.3.2" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /04_browser-app/020/01_ロジックのリファクタリング/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_02", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack -w", 8 | "build": "webpack", 9 | "serve": "serve ./ -p 3000" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/dragula": "^3.7.1", 16 | "@types/uuid": "^8.3.1", 17 | "serve": "^12.0.0", 18 | "ts-loader": "^9.2.5", 19 | "typescript": "^4.3.5", 20 | "webpack": "^5.50.0", 21 | "webpack-cli": "^4.7.2" 22 | }, 23 | "dependencies": { 24 | "dragula": "^3.7.3", 25 | "uuid": "^8.3.2" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /04_browser-app/019/04_Assertion Functions/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01_02", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack -w", 8 | "build": "webpack", 9 | "serve": "serve ./ -p 3000" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/dragula": "^3.7.1", 16 | "@types/uuid": "^8.3.1", 17 | "serve": "^12.0.0", 18 | "ts-loader": "^9.2.5", 19 | "typescript": "^4.3.5", 20 | "webpack": "^5.50.0", 21 | "webpack-cli": "^4.7.2" 22 | }, 23 | "dependencies": { 24 | "dragula": "^3.7.3", 25 | "uuid": "^8.3.2" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 手を動かしながら学ぶ TypeScript 2 | 3 | このリポジトリでは、[シーアンドアール研究所](https://www.c-r.com/)から出版されている書籍[「手を動かしながら学ぶ TypeScript」](https://www.c-r.com/book/detail/1429)内で使用されているコードを、セクションごとにスナップショットとしてまとめています。 4 | 5 | ## このリポジトリの使い方 6 | 7 | 本書は、一緒に手を動かしてコードを書きながら読み進めることを推奨しています。 8 | その中で、書籍通りにコードを書いているのに実際に実行するとエラーになってしまう場合や、想定通りの挙動にならなかった場合などにこのリポジトリの該当のセクションのコードをコピー＆ペーストして、ご自身が書かれたコードと比較していただくことを想定しています。 9 | 10 | 本書では、「章・節・項」の形式でセクションを分けており、各項を終えた時点のコードの状態を残しています。 11 | 各項にはそれぞれ見出しがついているので、その見出しでリポジトリ内のディレクトリを見つけられるかと思います。 12 | 13 | ## 書籍の著者 14 | 15 | - [@nabeliwo](https://twitter.com/nabeliwo) 16 | - [@Tokky0425](https://twitter.com/Tokky0425) 17 | - [@moshisora990](https://twitter.com/moshisora990) 18 | -------------------------------------------------------------------------------- /05_react-app/023/03_「Button」コンポーネント/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { Text } from './libs/Text' 2 | import { Heading } from './libs/Heading' 3 | import { Button } from './libs/Button' 4 | 5 | export const App = () => { 6 | return ( 7 | <> 8 | 9 | 見出し 10 | 11 | hello, world! 12 | 13 |