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
430
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
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
0
110
【第4回】関東Kaggler会「Kaggleは執筆に役立つ」
mipypf
0
1.1k
旅行プランAIエージェント開発の裏側
ippo012
2
880
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
180
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
110
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
170
Ruby Parser progress report 2025
yui_knk
1
400
TDD 実践ミニトーク
contour_gara
1
290
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
210
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.7k
Deep Dive into Kotlin Flow
jmatsu
1
220
AI時代のUIはどこへ行く?
yusukebe
16
8.6k
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
431
66k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
Thoughts on Productivity
jonyablonski
70
4.8k
RailsConf 2023
tenderlove
30
1.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Building Applications with DynamoDB
mza
96
6.6k
Become a Pro
speakerdeck
PRO
29
5.5k
We Have a Design System, Now What?
morganepeng
53
7.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
Site-Speed That Sticks
csswizardry
10
810
4 Signs Your Business is Dying
shpigford
184
22k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
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 書きましょう! 書きましょう!