TypeScriptとReactを使って5分でWebアプリケーション開発を始める方法
LINE Developer Meetup, 2018-12-10
岩本 海童, ZOZO テクノロジーズ
Twitter: @odiak_
(以前社内で使ったスライドを使いまわしてます。すみません。)
なんか色々フレームワークがあって難しそう
ビルドツールが色々あって難しそう
実際
それほど難しくない (情報が多いので混乱しがち)
ツールとかフレームワークとか、全部を知らなくて良い
必要なものだけ
今日は、できるだけ最小限の道具でモダンなWebアプリケーションを開発する方法を紹介します
前提知識
シェル
Webの知識
あとドキュメントを読む力も...
使うもの
VSCode: エディタ。他のでもいいけど、強く推奨
Node.js: JSの処理系。開発ツール用
Webpack: JSのパッケージの依存関係を解決して1つのファイルにするやつ
TypeScript: JS(ES)に型がついただけの簡単な言語
React: JSのビューのライブラリ
大事なことを先に言っておくと、これらの公式ドキュメントを読みましょう
エディタ: VSCode
強く推奨
他のでも良い
Node.js (+ NPM)
JSの処理系
NPM: パッケージマネージャー
Nodeについてくる
開発ツールやライブラリなどの必要なパッケージをインストールしたりビルドを行ったりするのに使う
npmコマンドが少し使えれば良い
Webpack
JSのパッケージの依存関係を解決して1つのファイルにするやつ
ESにはモジュールの仕様があるが、ブラウザで使うにはまだ問題が多い
モジュールを使って書いたコードを1つに結合する必要がある
最初は webpack.config.js の簡単な書き方さえわかれば良い
公式ドキュメントを見ましょう
TypeScript
JS(ES)に型がついただけの簡単な言語(たぶん)
コンパイルされて、JSになる
実行時には型は消える
型があるメリット
人間(自分や他人)に優しい
バグが起きにくくなる(体感)
React
宣言的なビューのライブラリ
コンポーネントと呼ばれる部品を組み合わせてアプリケーションを作る
コンポーネントはその引数(props)や自分の持っている状態(state)を元に、表示したいDOMのツリーを返す関数を実装する
Reactはそれを、実際のDOM操作が出来るだけ少なくなるように描画してくれる
DOMを操作することを忘れられて幸せ
さあ、始めましょう
Node.jsをインストールしておく
code:sh
mkdir myproject
cd myproject
npm init # package.json を作ってくれる
npm install --save-dev webpack webpack-cli webpack-dev-server typescript ts-loader
npm install --save react react-dom @types/react @types/react-dom
Webpackの設定
code:webpack.config.js
module.exports = {
mode: 'development',
entry: './src/index.ts',
module: {
rules: [{
test: /\.tsx?$/,
exclude: /node_modules/,
use: 'ts-loader'
}]
}
}
TypeScriptの設定
code:tsconfig.json
{
"compilerOptions": {
"jsx": "react",
"module": "commonjs",
}
}
HTML
code:index.html
<!DOCTYPE html>
<meta charset="utf-8" />
<div id="app"></div>
<script src="/main.js"></script>
とりあえずTypeScript
src/foo.ts
code:foo.ts
export function sayHello(name: string) {
console.log(hello, ${name})
}
src/index.ts
code:index.ts
import { sayHello } from './foo'
sayHello('Nick')
サーバーを起動
code:sh
./node_modules/.bin/webpack-dev-server
型の力を試す
code:index.ts
import { sayHello } from './foo'
sayHello(3847) // bang!
Reactを使ってみる
mv index.ts index.tsx
webpack.config.jsに書いていたindex.tsも書き換える
src/index.tsx
code:index.tsx
import * as React from 'react'
import { render } from 'react-dom'
render(<div>hello</div>, document.getElementById('app'))
<div>hello</div>ってなんだ
JSXと言う記法
JS/TSのコード内に、HTMLのようなものを書ける
実際はDOMではなく、Reactのオブジェクトになる
<div>hello</div>は、コンパイルされるとReact.createElement('div', null, 'hello')というコードになる
コンポーネントを書いてみよう
MyComponent
code:src/MyComponent.tsx
import * as React from 'react'
interface NameAndAge {
name: string
age: number
}
export function MyComponent({ name, age }: NameAndAge) {
return (
<div>
<p>My name is {name}.</p>
<p>I'm {age} years old.</p>
</div>
)
}
src/index.tsx
code:index.tsx
import * as React from 'react'
import { render } from 'react-dom'
import { MyComponent } from './MyComponent'
render(
<div>
<p>Welcome!</p>
<MyComponent name="Kaido" age={24} />
</div>,
document.getElementById('app')
)
ブラウザ:
Welcome!
My name is Kaido.
I'm 24 years old.
次は、状態を扱ってみよう
src/Counter.tsx
code:counter.tsx
import * as React from 'react'
interface CounterProps {
initial: number
}
interface CounterState {
count: number
}
export class Counter extends React.Component<CounterProps, CounterState> {
constructor(props: CounterProps) {
super(props)
this.state = {
count: props.initial
}
}
countUp() {
this.setState({ count: this.state.count + 1 })
}
render() {
return (
<div>
<p>count: {this.state.count}</p>
<button onClick={() => { this.countUp() }}> +1 </button>
</div>
)
}
}
src/index.tsx
code:index.tsx
import * as React from 'react'
import { render } from 'react-dom'
import { Counter } from './Counter'
render(
<div>
<p>Welcome!</p>
<Counter initial={3} />
</div>,
document.getElementById('app')
)
その後やってみると良いかもしれないこと
Webpackの設定をいじってみる
HTMLファイルに自動でscriptタグなどを挿入してくれるプラグインなど
TypeScriptの設定をいじってみる
型チェックを厳しくするオプション、コンパイル先のESのバージョンなど
Reactをもっと使ってみる
リストを表示してみる
非同期処理と組み合わせてみる
ルーティングを使ってみる (react-router)
コンポーネントを装飾する (style-loader, styled-component)
Redux を使ってコンポーネントを越えてアプリケーションの状態を管理する