JavaScript を書き始める前にやっておきたいこと / Kanazawa.js meetup #1

by Kotaro Chiba

Slide 1

Slide 1 text

JavaScript を書き JavaScript を書き始める前にやってお始める前にやっておきたいこときたいこと Kanazawa.js meetup #1 Kanazawa.js meetup #1 千葉弘太郎千葉弘太郎

Slide 2

Slide 2 text

千葉弘太郎 (ちばこうたろう) 千葉弘太郎 (ちばこうたろう) Kotaro Chiba Kotaro Chiba Twitter: Github: Work: DMM.com LLC @ur_uha uruha

Slide 3

Slide 3 text

みなさんみなさん JavaScript 書いて JavaScript 書いてますか？ますか？

Slide 4

Slide 4 text

普段こういうことありませんか？普段こういうことありませんか？インデントが揃わない使ってない変数が出てくるカンマやセミコロンがあったりなかったりするやたら一行が長くなって読みづらい etc...

Slide 5

Slide 5 text

こういうこと意外にこういうこと意外にレビューで指摘しちレビューで指摘しちゃったりしてませんゃったりしてませんか？か？

Slide 6

Slide 6 text

その時間、実際無駄じゃないですか？書き方の方針の違いでイライラしちゃいませんか？本来の開発目的とは違うところで疲弊してませんか？

Slide 7

Slide 7 text

そんな円環の理からそんな円環の理から抜け出しませんか？抜け出しませんか？

Slide 8

Slide 8 text

JavaScript の書き JavaScript の書き方は現在ある程度自方は現在ある程度自動化できます動化できます

Slide 9

Slide 9 text

JavaScript を書き JavaScript を書き始める前に「書くこ始める前に「書くことを楽にする」準備とを楽にする」準備をしましょうをしましょう

Slide 10

Slide 10 text

その① その① ESLint を導入してソースコー ESLint を導入してソースコードの静的検証をするドの静的検証をする

Slide 11

Slide 11 text

ESLint とは ESLint とは JavaScript のための静的検証ツール JavaScript のための静的検証ツール

Slide 12

Slide 12 text

以下のことを検証したりできますインデントや空白の有無使っていない変数カンマやセミコロンの使い方その他、静的検証のルールは自由に切り替え＆カスタムが可能です個人やチームのレベル・文化にあったルールづくりが可能！

Slide 13

Slide 13 text

その② その② Prettier を導入してルールに沿 Prettier を導入してルールに沿ったソースコードに整理するったソースコードに整理する

Slide 14

Slide 14 text

Prettier とは Prettier とは JavaScript の記述整理してくれる JavaScript の記述整理してくれるフォーマッタフォーマッタ

Slide 15

Slide 15 text

複数人で使えば、ソースコードの記載方法に関してほとんど差異がなくなります ESLint と組み合わせが可能

Slide 16

Slide 16 text

つまり... 1. ESLint で静的検証 2. 検証で指摘がある箇所を Prettier で整形 3. 常に均一なソースコードがPRにソースコードの品質がこれだけで上がります

Slide 17

Slide 17 text

Pre-commit で Pre-commit で ESLint / Prettier ESLint / Prettier

Slide 18

Slide 18 text

pre-commit (git のコミット前) に ESLint / Prettier を使用すると、pull request 前に未然にソースコードの記載に関する箇所の修正が可能です PRやプロダクションコードは常に整理されたソースコードでレビューを開始できます

Slide 19

Slide 19 text

ESLint / Prettier ESLint / Prettier を使うと、を使うと、 JavaScript の書き JavaScript の書き方で疲弊しない！方で疲弊しない！

Slide 20

Slide 20 text

ただ、変数の命名法やその他人が考えて書かなければならないところはしっかりやっていきましょう！

Slide 21

Slide 21 text

まとめまとめ ESLint / Prettier は JavaScript を書く時の銀の弾丸ではないけれど、書き始める前にまず準備しておいて損は無いツール

Slide 22

Slide 22 text

楽して JavaScript 楽して JavaScript 書きましょう！書きましょう！