社内LTを企画して発表してきた

最近tech文化？っぽいものが足りなくてなんかできないかなーと思ってたらプロジェクターがあること教えてもらったので

社内LT大会を企画して発表してきました

https://yuzu441.github.io/slides/20180326-lt_tech/

第１回目として、これから参加してくれる人が増えたらいいなということで「雑にLTをする技術」と称してmarkdownをスライドにできるものを発表しました。

周りの人の協力もあって開催１週間前くらいに思いついた割には特に問題も無く進行できましが、これが一発屋で終わらないように企業文化として根付くように頑張りたい。

今年は「いつかできるから今日できる。今日できるってことは今できる。」がスローガンなので色々行動して移行と思う。

prettier + tslintを使ってみる

今話題のフォーマッターprettierを仕事のプロジェクトに導入したくてtslintとの組み合わせ方について調べた

とりあえず必要なものを入れる

yarn add -D tslint prettier tslint-plugin-prettier

tslint-plugin-prettier

github.com

Runs Prettier as a TSLint rule and reports differences as individual TSLint issues

tslintでlintするタイミングでprettierのチェックもかけてくれるやつ。tslint.jsonに設定する

{
  "rulesDirectory": [ "tslint-plugin-prettier" ],
  "rules": {
    "prettier": [true, {
      "semi": false
    }
  }
}

フォーマットが確認できるように、雑なtsファイル用意しましょう（例ではindex.tsってファイル作りました）

const f: (x:string) => void=(x)=>{console.log(x)}
f('hoge')

const f2:(x:number)=>number=(x)=>x+2


const a:number[] = [1,2,3,
4,
5,
6
]

実行してみる

npx tslint --fix index.ts

実行後にindex.tsを確認すると整形されているはず。tslint.jsonには"semi": falseを設定しているので、整形されたコードにはセミコロンがないことも確認できるはずです

試しにコードを整形実行前に戻して"semi": flaseを消して実行するとセミコロンがついて整形されてるはず。消して実行した結果がこんな感じ

const f: (x: string) => void = x => {
  console.log(x);
};
f("hoge");

const f2: (x: number) => number = x => x + 2;

const a: number[] = [1, 2, 3, 4, 5, 6];

まとめ

とりあえず動作することはわかったので、フォーマット関連はprettierに、lintはtslintに任せる感じで設定して使っていってみようと思う

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」が表示されるはず