fv17の日記 - Coding Every Day

Webエンジニアの備忘用ブログです。主にWeb界隈の技術に関して書いています。

React Hooks with TypeScript

React公式DocのHOOKSの学習メモ
公式とは異なり、TypeScriptで実装する
 
目次

1.フックの導入

ja.reactjs.org

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.ステートフックの利用方法

ja.reactjs.org

解説 & 実装例

// 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するとターミナルにエラーと対処方法が出てくるのでそれに従う

Prettier公式 - ESLintとの連携方法について

Integrating with Linters · Prettier

[オプション]各種ツールの導入

  • コミット前に自動的にESLintとPrettierを実行 → lint-staged や husky
  • CSSのLinter → Stylelint

なぜRSpecを書くのか、なぜテストを書くのか

RubyRails界隈の伝道師、伊藤さんの発表スライドが公開されていましたので共有。

伊藤さんのスライド

speakerdeck.com

スライドを見ての感想

最近はCircle CI等で常に自動テストして品質を保つことは、どこの現場でも行われているだろうと思います。そのため、普段あまりなぜテストを書くのか?と自問自答することはありませんが、スライドを読み立ち止まって考えてみました。私はテストコードは下記の大きなメリットを持っていると日々感じています。

仕様書となる

RSpec等のテストコードは、どういう条件下で、どう動くべきか、という形式で書かれています。そのため、初めてJoinするプロジェクトにおいて各機能の大雑把な仕様を把握したい場合、RSpecを読むことでキャッチアップすると捗ります。伊藤さんの仰る「7.説明書としての役割」がまさにそれです。

スライドでも書かれていますが、gemの使い方もRSpecから学ぶことが多々あります。メジャーなgemでもすべての機能が詳細にドキュメントに書かれているわけではなく、RSpecを見て初めて使い方が分かるという場面に何度も遭遇しています。逆にRSpecで詳細に記載されていて、完全に理解した!と叫ぶことも。

リファクタリングや修正時の不具合検出

スクラムなどでアジャイル開発を行うと、作る→リリース→修正するというサイクルを非常に早く回すことになります。この修正/改良した際に、既存部分に影響が出ていないか、いわゆるリグレッションテストとしての大きな役割が自動テストにはあると考えています。

これからもテストコードは書き続けたい

上記2つがあることにより、初めて触る機能についても、仕様をしっかり理解して修正や機能強化に取りかかれるし、リリース前にリグレッションテストが自動で行われることにより既存機能が正しく動いていると安心してリリースすることができます。がっつりしたテスト駆動開発をしていないため、新規機能については開発後にテストを書くことが多いですが、工数削減などと言い訳せずにテストコードはしっかり書いていきたい、いくべきと自戒を。

フロントエンドエンジニアになるために、Learn to become a modern Frontend Developer in 2019を実際にやってみる

現在、サーバーサイドエンジニアとしてJoinしている現場で、フロントエンドのエンジニアが不足することが予想されているため、フロントのキャッチアップ中です。HTML、CSSJavaScriptをProgateで1ヶ月ぐらいかじったことある状態から、即戦力のフロントエンドエンジニアになるまでに、何を学んだかを記録していきます。

目的 / 目標

  • Reactなどのモダンなフレームワークを扱えるフロントエンドエンジニアになる
  • 将来的にはフロント、バックエンド、インフラの3つを一通り扱えるフルスタックエンジニアとなる

実践すること

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年度版との差分について述べられています。

Phase 1 — Job Ready

HTML

後日記載

CSS

後日記載

How Internet Works

後日記載

Phase 2 — Write Better CSS

パッケージマネージャー

後日記載

CSS設計

後日記載

CSSプリプロセッサ

後日記載

【Rails】active adminで最速で管理画面を作る

Github
https://github.com/activeadmin/activeadmin

Demo
http://demo.activeadmin.info/admin

Docs
https://activeadmin.info/0-installation.html

Wiki
https://github.com/activeadmin/activeadmin/wiki

Qiita
qiita.com