React + TypeScriptの環境を作る

reactとtypescriptを使うプロジェクトを作りたくてcreate-react-appのREADME.md見てたら書いてたので試してみた

github.com

tl;dr

create-react-appを使ってtypescript用のプロジェクト作れる

create-react-app my-app --scripts-version=react-scripts-ts

プロジェクトの雛形を作る

create-react-appをインストールして、プロジェクトの雛形を作ります

npm i -g create-react-app

create-react-app my-app --scripts-version=react-scripts-ts
cd my-app
yarn start

tsで型チェックできることを確認する

とりあえず適当にコンポーネント用意して、typescriptのチェックが機能することを確認してみる

srcディレクトリにcomponentディレクトリを作って、その中にNogiコンポーネントを定義する

// src/components/Nogi.tsx
import * as React from 'react';

export interface NogiPropType {
  member: string;
}

export class Nogi extends React.Component<NogiPropType> {
  state: NogiPropType;
  constructor(props: NogiPropType) {
    super(props);
    this.state = props;
  }

  render() {
    return (
      <div>
        <h2>{this.state.member}</h2>
      </div>
    );
  }
}

App.tsxを変更してコンパイル失敗させる

App.tsxにNogi.tsxをimportしてpropを設定しないでコンパイルエラーにする

import './App.css';
import { Nogi } from './components/Nogi'; // 追加

// ~ 省略 ~

  </p>
  <Nogi/> // 追加
</div>

これでyarn startとかでコンパイルするとNogiのPropがNogiPropTypeを満たしてないのでコンパイルエラーになるはず

エラーになるのが確認できたので、Propを追加してコンパイル通す

// before
<Nogi/>

// after
<Nogi member="Mai Shiraishi"/>

これでコンパイル通って下の方に「Mai Shiraishi」が表示されるはず

package.jsonのversionを更新する

※ この記事はうさぎパワーで書かれています

CIとかでpackage.jsonのversion情報をいい感じに更新するほうないかなと思って調べてみたらあったのでメモ

versionとは

npmでインストールされるパッケージのバージョン情報に使われている部分

npm initでできたpackage.jsonがこんな感じ

{
  "name": "nogi",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

今回の話は上から3行目のversionです

更新方法

最初は手でやってて、最近はsedコマンドとか使ってやってたんだけど npmに標準で更新する機能ついてた

npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease | from-git]

patchバージョン上げてみる

例えばpatchバージョンを上げるなら

npm version patch

コマンドを実行するとpackage.jsonのpatchバージョンが上がってる

{
  "name": "nogi",
  "version": "1.0.1",
  ~ 以下省略 ~
}

ちなみにgitリポジトリで実行すると

gitで管理されているディレクトリで実行するとバージョン番号でコミットされて、package.jsonのバージョン情報だけでなくgitのタグもついてくれる

git init
npm version major

$ git log
commit c62380479ad7e7dc18a2fe324072a278d8a3864a (HEAD -> master, tag: v2.0.0)
Author: yuzu <s.yuzu441@gmail.com>
Date:   Fri Mar 23 21:22:56 2018 +0900

package.jsonもちゃんと更新される

{
  "name": "nogi",
  "version": "2.0.0",
}

今年読んだ本 2018

色々読むけど１年間で何を読んでるのか気になったので
今年読んだ本を随時更新予定

漫画は１巻だけ載せる

技術書

デザイン入門教室[特別講義] 確かな力を身に付けられる ~学び、考え、作る授業~ (Design&IDEA)

[24時間365日] サーバ/インフラを支える技術 ?スケーラビリティ、ハイパフォーマンス、省力運用 (WEB+DB PRESS plusシリーズ)

現場で役立つシステム設計の原則 〜変更を楽で安全にするオブジェクト指向の実践技法

漫画

柚子森さん 1 (ビッグコミックススペシャル)

淫らな青ちゃんは勉強ができない（１） (少年マガジンエッジコミックス)

スティーブズ コミック 1-6巻セット (ビッグ コミックス〔スペシャル〕)

写真集

乃木坂46写真集 乃木撮 VOL.01

乃木坂46 星野みなみ1st写真集 いたずら

齋藤飛鳥ファースト写真集 潮騒

【Amazon.co.jp限定】西野七瀬1stフォトブック『わたしのこと』 Amazon限定カバーVer.

清純な大人 白石麻衣 ファースト写真集

乃木坂46 北野日奈子 1st写真集『空気の色』

菅井友香1st写真集 フィアンセ

その他

中学・高校6年分の英語を総復習する(CD付) (CD BOOK)

僕たちはどう伝えるか (単行本)