reactのテンプレ作った

GWに予定が初日と最終日にしかなくて、いつも通り映画を見て過ごしているのですが
映画見てるだけだと手持ち無沙汰なのでreactでなんかやってみようと思ったけど、create-react-app使いたくなかったのでwebpackの設定とか入ってるテンプレ作った

github.com

やってることは最低限jsxとかをブラウザで動く形に変えるだけなので、flowとかtypescriptみたいな型も入って無くて、使う時に入れるようにしようかと思ってる。

まだ動かし方とか書いてないけど、更新しつつ、新しいcontext apiとかできたしそこらへん触っていく

社内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に任せる感じで設定して使っていってみようと思う