【VSCodeショートカット】定義先へ遷移 / 遷移元へ戻る(Mac)
定義先へ遷移
Command + 左クリック or F12
遷移元へ戻る
Control + -
React Hooks with TypeScript
React公式DocのHOOKSの学習メモ
公式とは異なり、TypeScriptで実装する
目次
1.フックの導入
Hooksとは
概要
- React 16.8で追加された機能
- 2018/10のReact Conf 2018の基調講演で発表された
- stateやライフサイクルメソッドなどのReactの機能を、クラスを書かずに使える
既存のReactから互換性あり
- 既存のコードに追加可能。一部だけ使用することもできる
- 100%後方互換で破壊的変更は含まれない
- 関数コンポーネントを使うことが推奨されるが、クラスコンポーネントの削除予定はない
- 既存のReactのコンセプト、例えばprops、state、ライフサイクルなどに対してより直接的なAPIを提供する
なぜHooks？
- 従来のProps Render、HOC、クラスコンポ、ライフサイクルメソッドでは、実装の可読性が悪く、不具合を埋め込みやすいため
誕生の歴史
- 以前の関数コンポはstate、ライフサイクルメソッドがなかった
- HOC(高階コンポ)を使って上記を持つRecomposeライブラリが流行した
- Recomposeの作者Andrew ClarkがFaceBookのReact開発部隊にスカウトされる
- Andrew Clark中心にHooksの開発が進められ、ReactConf 2018で発表！
まずはSample Code
プロジェクトの作成
create-react-app hello-hooks --typescript
Hooksの実装例
import React, { useState, FC } from 'react'; import logo from './logo.svg'; import './App.css'; const Example: FC = () => { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ) } const App: React.FC = () => { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <Example /> </header> </div> ); } export default App;
2.フック早わかり
各章のまとめなので省略
3.ステートフックの利用方法
解説 & 実装例
// useStateをimportし、関数コンポーネントでstateが使えるようにする import React, { useState, FC } from 'react'; const Example: FC = () => { // stateを使う宣言 const [count, setCount] = useState(0); const [fruit, setFruit] = useState('Apple'); // [補足] // useStateの引数は初期値 // 左辺の[]は分割代入。右辺の返り値がstateの [現在値, 更新するための関数] という配列 return ( <div> <p>You clicked {count} times</p> // stateの取得 <button onClick={() => setCount(count + 1)}> // stateの更新 Click me </button> </div> ) }
複数のstateは1つにするべきか？分けるべきか？
結論：どの値が一緒に更新されやすいのかに基づいて分割するべき
参考url：フックに関するよくある質問 – React
const Box: FC = () => { // NG const [state, setState] = useState({ left: 0, top: 0, width: 100, height: 100 }); // OK const [position, setPosition] = useState({ left: 0, top: 0 }); const [size, setSize] = useState({ width: 100, height: 100 }); // ... }
りあクト！第2版の学習メモ
Reactのキャッチアップのため、りあクト！第2版を学習中
そのための学習メモ
第8章 Hooksで関数コンポーネントを強化
以前の関数コンポ
- Local Stateを持てない
- ライフサイクルメソッドもない
- HOCを使って上記を持つRecomposeライブラリが意識高い系で流行
Hooksの誕生
- Recomposeの作者Andrew ClarkがFBにスカウトされ、Hooksを開発(Recomposeの役目は終わる)
- 2018/10のReactConf 2018で発表
- 関数コンポーネントにLocal StateやライフサイクルといったReactの機能を『接続する(hook into)』からHooksと名付けられた
Hooksの革新性
- HOCやRender Propsの弱点である、インデント地獄、可読性の悪さを抹消
- stateなどの付与したい機能のみを切り出せるため、再利用、テストがしやすい
State Hookの実装例
import React, { FC, useState } from 'react'; import { Button, Card, Statistic } from 'semantic-ui-react'; import './App.css'; const App: FC = () => { const [count, setCount] = useState(0); const increment = () => { setCount(count + 1); } const decrement = () => { setCount(count - 1); } return ( <div className="container"> <header> <h1>カウンター</h1> </header> <Card> <Statistic className="number-board"> <Statistic.Label>count</Statistic.Label> <Statistic.Value>{count}</Statistic.Value> </Statistic> <Card.Content> <div className="ui two buttons"> <Button color="red" onClick={decrement}> -1 </Button> <Button color="green" onClick={increment}> +1 </Button> </div> </Card.Content> </Card> </div> ) }
Effect Hookでライフサイクルを扱う
- 副作用を扱うHooks
- クラスコンポのライフサイクルメソッド(componentDidMount()など)の機能を実現
- 副作用とは、データの取得、DOM改変、ログ出力など
あとは読んでない。下記の方が分かりやすかった。
ja.reactjs.org
【環境構築】ゼロからreactアプリ作成まで
Node.jsのインストール
下記でLTS(Long Term Support)版をインストールする
https://nodejs.org/ja/
IDE/エディターのインストール
好きなものを
特にこだわりがなければVS Code
https://azure.microsoft.com/ja-jp/products/visual-studio-code/
Yarnをインストール
npmが改良されたパッケージマネージャであるYarnをインストールする
npm install --global yarn
バージョン確認
yarn --version
create-react-appのインストール
yarn global add create-react-app
Reactアプリケーションの作成
create-react-app hello-world
typescriptを使う場合
npx create-react-app hello-world --typescript # or yarn create react-app hello-world --typescript
[オプション]ESLintとPrettierの導入
`create react app eslint prettier` でググると方法が出てくる
Qiitaだと情報古い可能性が高いため随時公式Docを参照のこと
注意
create-react-appでESLintが初期状態で含まれており、間違った導入をするとエラーになる
その場合、yarn startするとターミナルにエラーと対処方法が出てくるのでそれに従う
ESLint公式
Prettier公式
Prettier公式 - ESLintとの連携方法について
[オプション]各種ツールの導入
- コミット前に自動的にESLintとPrettierを実行 → lint-staged や husky
- CSSのLinter → Stylelint
なぜRSpecを書くのか、なぜテストを書くのか
Ruby、Rails界隈の伝道師、伊藤さんの発表スライドが公開されていましたので共有。
伊藤さんのスライド
スライドを見ての感想
最近はCircle CI等で常に自動テストして品質を保つことは、どこの現場でも行われているだろうと思います。そのため、普段あまりなぜテストを書くのか？と自問自答することはありませんが、スライドを読み立ち止まって考えてみました。私はテストコードは下記の大きなメリットを持っていると日々感じています。
仕様書となる
RSpec等のテストコードは、どういう条件下で、どう動くべきか、という形式で書かれています。そのため、初めてJoinするプロジェクトにおいて各機能の大雑把な仕様を把握したい場合、RSpecを読むことでキャッチアップすると捗ります。伊藤さんの仰る「7.説明書としての役割」がまさにそれです。
スライドでも書かれていますが、gemの使い方もRSpecから学ぶことが多々あります。メジャーなgemでもすべての機能が詳細にドキュメントに書かれているわけではなく、RSpecを見て初めて使い方が分かるという場面に何度も遭遇しています。逆にRSpecで詳細に記載されていて、完全に理解した！と叫ぶことも。
フロントエンドエンジニアになるために、Learn to become a modern Frontend Developer in 2019を実際にやってみる
現在、サーバーサイドエンジニアとしてJoinしている現場で、フロントエンドのエンジニアが不足することが予想されているため、フロントのキャッチアップ中です。HTML、CSS、JavaScriptをProgateで1ヶ月ぐらいかじったことある状態から、即戦力のフロントエンドエンジニアになるまでに、何を学んだかを記録していきます。
実践すること
Qiita界隈など、巷で話題になっている、 Learn to become a modern Frontend Developer in 2019 をゼロからやってきます。 Type Checkers まで最低限やれば戦力になれるので、一旦の目標はそこです。
Learn to become a modern Frontend Developer in 2019
フロントエンドエンジニアとして活躍するためには何をすればいいか？がゼロから書かれた素晴らしい記事。バックエンドエンジニア版やDevOpsエンジニア版もあり、Qiitaで翻訳されてバズったりしています。
medium.com
ロードマップ
上記記事で記載されているロードマップ画像のリポジトリです。
GitHub - kamranahmedse/developer-roadmap: Roadmap to becoming a web developer in 2019
日本語訳
Qiitaで翻訳されてバズった記事です。
2018年の最先端フロントエンドエンジニアになろう - Qiita
↑2018年度版のため古いですが、一通り翻訳されています。
Web Developer Roadmap 2018が2019年版になっていたので比較してみる - Qiita
↑2019年度版で主に2018年度版との差分について述べられています。
