虎の穴ラボ技術ブログ

虎の穴ラボ株式会社所属のエンジニアが書く技術ブログです

MENU

React+TypeScriptに入門してみる

TypeScript React 技術エントリ

この記事は、虎の穴ラボ Advent Calendar 2020の21日目の記事です。
昨日はDenoについておっくんが、明日もPSVGについておっくんの記事が投稿されます。ぜひこちらもご覧ください。

qiita.com

こんにちは、虎の穴ラボのNSSです。

いままでバックエンドの開発が主で、フロントエンドについてはあまり理解せず見様見真似で書いていました。 そこで、フロントエンドもちゃんと理解した上で書けるようになりたいと思い、TypeScriptとReactの勉強をはじめました。

今回は入門として、以下の3点をご紹介いたします。

  • React、TypeScriptの特徴
  • React+TypeScriptでアプリケーションを開発するための環境構築
  • アプリケーションの新規作成
  • Reactの構造

参考文献

私はくるみ割り書房さまの「りあクト！ TypeScriptで始めるつらくないReact開発 第3版」（1~3巻）を読んで勉強しています。 フロントエンド初心者でもわかりやすく技術的な背景や前段知識も含めて解説されていて、 会話形式になっているため非常に読みやすいです。

techbookfest.org

1. Reactの特徴

JSX

JSXはJavaScriptの拡張構文で、XMLのように記述できます。
ReactはこのJSXを使うことを推奨しています。

facebook.github.io

コンポーネント

ReactはRailsのように、ロジックはControllerで行い、表示はERBで行うというような分け方をせず、
ロジックと表示が両方含まれた「コンポーネント」という単位で管理します。
公式では、ロジックと表示を別々に分ける考えを「技術の分離」、
「コンポーネント」単位での管理を「関心の分離」と表現しています。

Reactの思想については、日本語の公式ページを読むことで、理解が深まります。 新しい言語を学ぶと、技術の思想も一緒に学ぶことができて楽しいですね。

ja.reactjs.org

※例

function App() {
  const name = 'NSS';
  const greet = (name: string) => <p>こんにちは {name || 'Guest'}!</p>;
  return <div>{greet(name)}</div>;
}

こちらを表示すると次のように表示されます。

f:id:toranoana-lab:20201218175501p:plain

2. TypeScript

AltJS(代替JavaScript言語)の１つで、 静的型付け、型推論などのモダンな言語のトレンドを抑えつつ、 JavaScriptとほぼ同じ構文で実装できることから、 非常に人気の高いプログラミング言語です。

型アノテーション（Type Annotation）をつけることで、型の不整合があるとコンパイルエラーになります。

let n: number = 3;
n = 'foo'; //エラー

型アノテーションを省略した場合、文脈から型を推測します。 またJavaScriptの場合、文字列に算術演算子を用いると勝手に数値として扱いますが、 TypeScriptの場合、コンパイルエラーとなります。

// JavaScript
const s = '123';
s * 2
=> 246

// TypeScript
const s = '123';
s * 2
=> エラー

3. 環境構築

環境構築のため、以下の3点をインストールします。

  • anyenv
  • nodenv
  • Node.js
$ brew install anyenv
$ echo 'eval "$(anyenv init -)"' >> ~/.bash_profile
$ exec $SHELL -l
$ anyenv install nodenv
$ exec $SHELL -l

次にプラグインの設定をします。

$ mkdir -p $(anyenv root)/plugins
$ git clone https://github.com/znz/anyenv-update.git $(anyenv root)/plugins/anyenv-update
$ mkdir -p "$(nodenv root)"/plugins
$ git clone https://github.com/nodenv/nodenv-default-packages.git "$(nodenv root)/plugins/nodenv-default-packages"
$ touch $(nodenv root)/default-packages

default-packagesに以下の内容を記載します

yarn
typescript
ts-node
typesync

Node.jsをインストールします。

$ nodenv install -l
$ nodenv install 13.5.0
$ nodenv global 13.5.0 # nodenv localでも可

4. アプリケーションの新規作成

create-react-appで新しいアプリケーションを作成します。
TypeScriptであたらしくアプリケーションを作成するには--template typescriptを指定します。

$ npx create-react-app hello-world-v13-5-0 --template typescript

npxコマンドはNode.jsと一緒にインストールされています。 実行し終わると以下のようなコマンドがコンソールに表示されますので、実行します。

$ cd hello-world-v13-5-0
$ yarn start

ブラウザでこのような画面が起動されれば成功です。

f:id:toranoana-lab:20201218125544p:plain

5. Reactの構造

App.tsxの中身は以下のようになっています。

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

HTMLタグとロジックが混ざったような記述で、Railsに慣れている私には結構違和感があります。
続いてsrc/index.tsxを見てみます。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

import App from './App';と記述があるようにApp.tsxを読み込んでいるのがわかります。
トップページのhtmlはpublic/index.htmlにあります。
public/index.htmlの中身はこちらです。
document.getElementById('root') と <div id="root"></div>が関連しているのがわかります。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

まとめ

今回はReactとTypeScriptについてご紹介いたしました。
まだ勉強を始めたばかりですが、Reactの構造は直感的に理解しやすいと感じました。
次回は簡単なアプリケーションを作って発表できるように勉強を進めていきたいと思います。

P.S.

TORA LAB Management & Leader Meetup

12/23(金) 19:30からとらのあなが運営している「とらのあな通販」と「Fantia」の開発の魅力を発表し、参加いただいた方の気になる点やご質問に答えるイベントとなっています。 yumenosora.connpass.com

その他採用情報

虎の穴ラボでの開発に少しでも興味を持っていただけた方は、採用説明会やカジュアル面談という場でもっと深くお話しすることもできます。ぜひお気軽に申し込みいただければ幸いです。 カジュアル面談では虎の穴ラボのエンジニアが、開発プロセスの内容であったり、「今期何見ました？」といったオタクトークから業務の話まで何でもお応えします。 カジュアル面談や採用情報はこちらをご確認ください。 yumenosora.co.jp