Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JavaScript を書き始める前にやっておきたいこと / Kanazawa.js meet...
Search
Kotaro Chiba
January 19, 2020
Programming
1
1.1k
JavaScript を書き始める前にやっておきたいこと / Kanazawa.js meetup #1
Kotaro Chiba
January 19, 2020
Tweet
Share
More Decks by Kotaro Chiba
See All by Kotaro Chiba
JavaScript を書き始める前に知っておきたい JavaScript のこと #05
uruha
1
500
JavaScript を書き始める前に知っておきたい JavaScript のこと #04
uruha
1
550
JavaScript を書き始める前に知っておきたい JavaScript のこと #03
uruha
1
440
DMM.com のフロントエンド 今・今後 / Think ! FrontEnd #01
uruha
1
1.5k
JavaScript を書き始める前に知っておきたい JavaScript のこと #02
uruha
1
1.4k
JavaScript を書き始める前に知っておきたい JavaScript のこと
uruha
1
720
JConf JP Sponsor talk DMM.com / TECH VISION に向けての取り組み
uruha
1
480
Other Decks in Programming
See All in Programming
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
240
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
11
4.4k
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.5k
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
780
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
130
AIでLINEスタンプを作ってみた
eycjur
1
230
概念モデル→論理モデルで気をつけていること
sunnyone
3
300
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
610
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
420
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
550
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
110
Featured
See All Featured
Embracing the Ebb and Flow
colly
87
4.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
A Modern Web Designer's Workflow
chriscoyier
696
190k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Automating Front-end Workflow
addyosmani
1370
200k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
The Pragmatic Product Professional
lauravandoore
36
6.9k
BBQ
matthewcrist
89
9.8k
Site-Speed That Sticks
csswizardry
10
820
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Transcript
JavaScript を書き JavaScript を書き 始める前にやってお 始める前にやってお きたいこと きたいこと Kanazawa.js meetup
#1 Kanazawa.js meetup #1 千葉 弘太郎 千葉 弘太郎
千葉 弘太郎 (ちば こうたろう) 千葉 弘太郎 (ちば こうたろう) Kotaro Chiba
Kotaro Chiba Twitter: Github: Work: DMM.com LLC @ur_uha uruha
みなさん みなさん JavaScript 書いて JavaScript 書いて ますか? ますか?
普段こういうことありませんか? 普段こういうことありませんか? インデントが揃わない 使ってない変数が出てくる カンマやセミコロンがあったりなかったりする やたら一行が長くなって読みづらい etc...
こういうこと意外に こういうこと意外に レビューで指摘しち レビューで指摘しち ゃったりしてません ゃったりしてません か? か?
その時間、実際無駄じゃないですか? 書き方の方針の違いでイライラしちゃいません か? 本来の開発目的とは違うところで疲弊してませ んか?
そんな円環の理から そんな円環の理から 抜け出しませんか? 抜け出しませんか?
JavaScript の書き JavaScript の書き 方は現在ある程度自 方は現在ある程度自 動化できます 動化できます
JavaScript を書き JavaScript を書き 始める前に「書くこ 始める前に「書くこ とを楽にする」準備 とを楽にする」準備 をしましょう をしましょう
その① その① ESLint を導入してソースコー ESLint を導入してソースコー ドの静的検証をする ドの静的検証をする
ESLint とは ESLint とは JavaScript のための静的検証ツール JavaScript のための静的検証ツール
以下のことを検証したりできます インデントや空白の有無 使っていない変数 カンマやセミコロンの使い方 その他、静的検証のルールは自由に切り替え&カ スタムが可能です 個人やチームのレベル・文化にあったルールづく りが可能!
その② その② Prettier を導入してルールに沿 Prettier を導入してルールに沿 ったソースコードに整理する ったソースコードに整理する
Prettier とは Prettier とは JavaScript の記述整理してくれる JavaScript の記述整理してくれる フォーマッタ フォーマッタ
複数人で使えば、ソースコードの記載方法に関 してほとんど差異がなくなります ESLint と組み合わせが可能
つまり... 1. ESLint で静的検証 2. 検証で指摘がある箇所を Prettier で整形 3. 常に均一なソースコードがPRに
ソースコードの品質がこれだけで上がります
Pre-commit で Pre-commit で ESLint / Prettier ESLint / Prettier
pre-commit (git のコミット前) に ESLint / Prettier を使用すると、pull request 前に未然に
ソースコードの記載に関する箇所の修正が可能で す PRやプロダクションコードは常に整理されたソー スコードでレビューを開始できます
ESLint / Prettier ESLint / Prettier を使うと、 を使うと、 JavaScript の書き
JavaScript の書き 方で疲弊しない! 方で疲弊しない!
ただ、変数の命名法やその他人が考えて書かなけ ればならないところはしっかりやっていきましょ う!
まとめ まとめ ESLint / Prettier は JavaScript を書く時の銀の 弾丸ではないけれど、 書き始める前にまず準備しておいて損は無いツー
ル
楽して JavaScript 楽して JavaScript 書きましょう! 書きましょう!