Software Engineer Blog

エンジニアブログです。技術情報(Go/TypeScript/k8s)や趣味の話も書くかもです。

React.js 学習 (Soft Skillsフォーマット)

概要

React.jsに入門してみました。その際に、 Soft Skillsで言及されていたフォーマットに沿って学習しました

Soft Skills

SOFT SKILLS　ソフトウェア開発者の人生マニュアル

SOFT SKILLS　ソフトウェア開発者の人生マニュアル

書籍内にて、学習のフォーマットが提示されていたので、そのとおりにやってみています。
番号が振ってある部分が、フォーマットになります。

フォーマット

1. 日付

2018/08/27 ~ 2018/09/12 (=> 伸びて 2018/10/09になりました)

2. スコープを調べる

調査

メモ

  • viewの状態を動的に変えれる
  • 親と子のコンポーネントがあって、うけわたしする
  • 状態遷移があって、どの状態で何をするかを考える必要がありそう
  • Facebook製
  • 入力した値を即座に反映したいときに便利
  • 仮想domは速いらしい
  • reactiveプログラミング

3. スコープを決める

  • React.jsを利用したシングルページアプリを作成
  • TypeScript+React.jsの構築/コンパイルができる
  • アプリを外部公開できる

4. 成功の基準

React.jsを利用した、シングルページアプリを公開してブログを書く

5. 参考資料を見つける

(できる限りたくさん見つけるのが良い模様)

Essence

  • Declarative
  • component base
    • render()Componentを記載
    • this.propsでpropertyにアクセス
  • Virtual Domは高速
    • Virtual Dom全更新→差分計算→Domへの全適用
    • Domの全更新より早い
  • props
    • 外部とのInteface
    • Immutableに扱う必要がある
  • state
    • Component内部の状態を扱う変数

6. 学習プラン作成

step title Goal describe
1 TS + React環境構築 ✅Hello World !表示 - tsコンパイルができる環境作成
- webpackを利用する
2 公式チュートリアル実施 ✅チュートリアル終了 - 公式チュートリアルをそのまま実施する
- ただし、TypeScript対応はする
3 シングルページ作成 ✅ローカルでページが見れる - 作成物は要検討
- 掲示板
4 公開 ✅特定のIP/ドメインでリクエストしてページが見れる - Nowを利用して公開
5 このページをブログ公開 ブログとして公開される

7. リソースを絞り込む

8. 使い始められるようにする方法を学ぶ

環境構築

mkdir -p dist src/components
npm init

# react domと type packageを取得
npm install --save react react-dom @types/react @types/react-dom

# typescript loader(tsconfig.json) + sourcmap作成(debug時にtsから見れるようになる)
npm install --save-dev typescript awesome-typescript-loader source-map-loader

その他

# globalにinstallしたpackage list
npm ls -g

# webpack
npm install -g webpack
# webpack-cli or webpack-commandのどちらかが必要
npm install -g webpack-command

# --save-dev(-D) => 開発時のみ利用のオプション

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es5",
    "jsx": "react"
  },
  "include": [
    "./src/**/*"
  ]
}

webpack.config.js

module.exports = {
  entry: "./src/index.tsx",
  output: {
    filename: "bundle.js",
    path: __dirname + "/dist"
  },
  devtool: "source-map",
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".json"]
  },
  module: {
    rules: [
      { test: /\.tsx?$/, loader: "awesome-typescript-loader"},
      { enforce: "pre", test: /\.js$/, loader: "source-map-loader"}
    ]
  },
  externals: {
    "react": "React",
    "react-dom": "ReactDOM"
  }
}

.gitignore

node_modules
dist

index.ts

import * as React from 'react'
import * as ReactDOM from 'react-dom'

ReactDOM.render(undefined, document.getElementById('root'))

HTML

<body>
  <div id="root"></div>
  
  <!-- Dependencies -->
  <!-- https://reactjs.org/docs/getting-started.html#development-vs.-production-builds -->
  <script src="./node_modules/react/umd/react.development.js"></script>
  <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
  <!-- Main -->
  <script src="./dist/bundle.js"></script>
</body>

tslint + perettier

npm install -D tslint prettier tslint-config-prettier tslint-plugin-prettier tslint-config-standard

tslint.json

{
  "rulesDirectory": ["tslint-plugin-prettier"],
  "extends": ["tslint-config-standard", "tslint-config-prettier"],
  "rules": {
    "prettier": [
      true, {
        "singleQuote": true,
        "semi": false
      }
    ]
  }
}

テスト環境構築

# jest
npm install -D jest babel-jest babel-preset-env babel-preset-react react-test-renderer ts-jest
# 型ファイル
npm install -D @types/react-test-renderer @types/jest

# package.json
"scripts": {
  "test": "jest"
},
"jest": {
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js"
    ],
    "testMatch": [
      "**/__tests__/*.+(ts|tsx|js)"
    ]
}

9. 遊び回る

チュートリアル実施

  • JavaScriptではclassのconstructorで、super(props)を最初に呼ぶ必要がある
  • 子Component同士でやりとりするのではなく、親Componentを介してstateを共有する
  • immutable
    • Complex Features Become Simple
    • Detecting Changes
    • Determining When to Re-render in React
  • It’s strongly recommended that you assign proper keys whenever you build dynamic lists
  • チュートリアル完了
    • +α で押されたボタンをハイライトする機能を追加

10. 役に立つことができるところまで学ぶ

掲示板作成

- ソースコード

github.com

  • 機能
    • 入力した文字をそのまま下に表示
    • clear

Nowへデプロイ

  • expressでサーバーを立てる
    • index.js
  • webpack/webpack-commandをdevdependenciesに追加
    • サーバー上でbuildする際にwebpackが必要になるため
npm install -D webpack webpack-command
  • package.jsonにbuildとstartを追加
{
   "scripts": {
       "build": "./node_modules/.bin/webpack",
       "build-auto": "webpack --progress --watch",
       "start": "node index.js"
   }
}

11. 教える

ブログ書く

所感

(後日記載)