JavaScript を書き始める前にやっておきたいこと / Kanazawa.js meetup #1
by
Kotaro Chiba
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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 書きましょう! 書きましょう!