Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

A85bfbcb7db07e936c0125487e7799fa?s=47 Kotaro Chiba
January 19, 2020
Programming
1
880

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

A85bfbcb7db07e936c0125487e7799fa?s=128

Kotaro Chiba

January 19, 2020
Tweet

More Decks by Kotaro Chiba

See All by Kotaro Chiba
JavaScript を書き始める前に知っておきたい JavaScript のこと #05
A85bfbcb7db07e936c0125487e7799fa?s=48 uruha
1
230
JavaScript を書き始める前に知っておきたい JavaScript のこと #04
A85bfbcb7db07e936c0125487e7799fa?s=48 uruha
1
230
JavaScript を書き始める前に知っておきたい JavaScript のこと #03
A85bfbcb7db07e936c0125487e7799fa?s=48 uruha
1
280
DMM.com のフロントエンド 今・今後 / Think ! FrontEnd #01
A85bfbcb7db07e936c0125487e7799fa?s=48 uruha
1
1.2k
JavaScript を書き始める前に知っておきたい JavaScript のこと #02
A85bfbcb7db07e936c0125487e7799fa?s=48 uruha
1
1.1k
JavaScript を書き始める前に知っておきたい JavaScript のこと
A85bfbcb7db07e936c0125487e7799fa?s=48 uruha
1
460
JConf JP Sponsor talk DMM.com / TECH VISION に向けての取り組み
A85bfbcb7db07e936c0125487e7799fa?s=48 uruha
1
230

Other Decks in Programming

See All in Programming
Reactive Java Microservices on Kubernetes with Spring and JHipster
7f408bc67dc9ae3b288ee92d16d3c4c2?s=48 deepu105
1
170
BASE BANKチームの技術選定と歴史 / how to decide technology selection for startup
Eb6be531bcfaa99714d8d3b48665a5a9?s=48 budougumi0617
0
210
VisualProgramming_GoogleHome_LINE
Eeedbe91225c0207014a46f09eea1d30?s=48 nearmugi
1
140
Custom Design Systems in Compose UI
E86c7de302b490b7f2a67e54960510d0?s=48 rharter
5
520
GitHub Actions を導入した経緯
41c9dedd1b4c53ace82e040bb09334fe?s=48 tamago3keran
1
430
dotdotdot_in_predict_function
465a530291aedb53fff5a6333e3dedaa?s=48 bk_18
1
180
Baseline Profilesでアプリのパフォーマンスを向上させる / Improve app performance with Baseline Profiles
37618b4d60cf3d1f43f7196253264edc?s=48 numeroanddev
0
230
即、New Relic / New Relic NOW!
271fad8d53cd1f12f2b4b6d38e3d7bd3?s=48 uzulla
0
280
1時間半で克服するJavaScriptの非同期処理/async_javascript_kokufuku
338259af0e093b5d91e9dc7afbcdd0d5?s=48 marchin1989
2
610
Get Ready for Jakarta EE 10
B489790e1a844284d7cd1fa2cd6e021f?s=48 ivargrimstad
0
1.8k
パターンマッチングを学んで新しいJavaの世界へ！Java 18までの目玉機能をおさらいしよう / Java 18 pattern matching
Fb025419ed38f98df595eb2eafc859f4?s=48 ihcomega56
3
390
Jakarta EE 10 and Beyond
B489790e1a844284d7cd1fa2cd6e021f?s=48 ivargrimstad
0
1.9k

Featured

See All Featured
Build your cross-platform service in a week with App Engine
5f83ef806155b403c3393160ce51f955?s=48 jlugia
219
17k
Testing 201, or: Great Expectations
A9704266587836f7e784235e5073b93e?s=48 jmmastey
21
5.4k
Building Flexible Design Systems
91cefdf141106fa10674aae74ce05890?s=48 yeseniaperezcruz
310
34k
Writing Fast Ruby
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
612
57k
Unsuck your backbone
B83d5b590577969ee79a5ad845411a7d?s=48 ammeep
659
55k
Infographics Made Easy
282d599b414022eba5096510f675b6e2?s=48 chrislema
233
17k
JavaScript: Past, Present, and Future - NDC Porto 2020
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
37
3.2k
Agile that works and the tools we love
462dad0dd24c568a32dcdb0ae895ae1b?s=48 rasmusluckow
319
19k
The Illustrated Children's Guide to Kubernetes
0438ae60cde4c7add6f9da48f28c15cc?s=48 chrisshort
14
36k
GraphQLとの向き合い方2022年版
893f54413c2bd9ba41d11d753aacaf2c?s=48 quramy
16
8.3k
Design by the Numbers
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
271
17k
BBQ
761be20b5ebd271008bcee1244fc5b52?s=48 matthewcrist
74
7.9k

Transcript

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

    #1 Kanazawa.js meetup #1 千葉 弘太郎 千葉 弘太郎

  2. 千葉 弘太郎 (ちば こうたろう) 千葉 弘太郎 (ちば こうたろう) Kotaro Chiba

    Kotaro Chiba Twitter: Github: Work: DMM.com LLC @ur_uha uruha

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

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

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

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

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

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

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

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

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

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

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

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

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

  16. つまり... 1. ESLint で静的検証 2. 検証で指摘がある箇所を Prettier で整形 3. 常に均一なソースコードがPRに

    ソースコードの品質がこれだけで上がります

  17. Pre-commit で Pre-commit で ESLint / Prettier ESLint / Prettier

  18. pre-commit (git のコミット前) に ESLint / Prettier を使用すると、pull request 前に未然に

    ソースコードの記載に関する箇所の修正が可能で す PRやプロダクションコードは常に整理されたソー スコードでレビューを開始できます

  19. ESLint / Prettier ESLint / Prettier を使うと、 を使うと、 JavaScript の書き

    JavaScript の書き 方で疲弊しない！ 方で疲弊しない！

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

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

    ル

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