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
ESLint使ってますか?
Search
biwakonbu
August 18, 2023
Technology
0
110
ESLint使ってますか?
ESLint を使っていない人、良いコードを書きたいけど何をしたら良いのか分からない人に向けて、ESLint で何ができるかを説明します。
biwakonbu
August 18, 2023
Tweet
Share
More Decks by biwakonbu
See All by biwakonbu
Django を使い続ける理由
biwakonbu
0
150
爆速なPythonフレームワーク
biwakonbu
0
160
HTMX触ってみた
biwakonbu
0
180
スタートアップの技術顧問を3年間続けて発生した事と気付き
biwakonbu
0
390
プログラミングを体系的に学べる言語 Python を推したい
biwakonbu
0
120
プログラミング言語F#を学びはじめました
biwakonbu
0
310
開発の生産性を高める事を考える
biwakonbu
0
140
「プログラミングを習得する」を考えてみた
biwakonbu
0
79
Python の型事情について
biwakonbu
0
94
Other Decks in Technology
See All in Technology
Two-Tower モデルで実現する 検索リランキング / Shibuya_AI_2
visional_engineering_and_design
2
160
OpenTelemetry Collector internals
ymotongpoo
4
490
GitHub Copilot Use Cases at ZOZO
horie1024
1
510
Kafka vs. Pulsar: Performance Evaluation by Petabyte-Scale Streaming Platform Providers
lycorptech_jp
PRO
1
350
Ретроспективный взгляд на Vue 3. Даша Сабурова, Vue-разработчик Lamoda Tech
lamodatech
0
570
CSSDay, Amsterdam
brucel
0
290
20250612_GitHubを使いこなすためにソニーの開発現場が取り組んでいるプラクティス.pdf
osakiy8
1
510
技術職じゃない私がVibe Codingで感じた、AGIが身近になる未来
blueb
0
110
Drawing with LLMs
rist
0
240
Web Intelligence and Visual Media Analytics
weblyzard
PRO
1
6.1k
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
370k
Text-to-SQLの評価データセットを作って最新LLMモデルの性能評価をしてみた
gotalab555
3
710
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
172
14k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Into the Great Unknown - MozCon
thekraken
39
1.8k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
14
1.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
Visualization
eitanlees
146
16k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.3k
Code Reviewing Like a Champion
maltzj
524
40k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Adopting Sorbet at Scale
ufuk
77
9.4k
Transcript
ESLint 使ってますか? 株式会社coroutine 東川 諒央
自己紹介 1 ルールとか何も考えたくない 3 名前にこだわりたい 4 ESLint とは? 2 5
まとめ
自己紹介 1 株式会社 coroutine 東川 諒央 @biwakonbu 大学教員 ゲームバックエンド フリーランス
経歴 Go Python JavaScript 実績言語 Ruby 技術顧問 エンジニア教育 業務 設計 プログラミング インフラ etc… Rust Haskell TypeScript 学習中言語
> ESLint とは?
ESLint とは? 2 > ESLintは、ECMAScript/JavaScriptの コードに見られるパターンを特定し、報告す るためのツールで、コードの一貫性を高 め、バグを回避することを目的としていま す。
ESLint とは? 2 ❏ TypeScript だけでは駄目なの? ❏ TS は型による論理的な動作保証が仕事 ❏
ESLint はコーディングルールを守れているかを検証するのが仕事 ❏ 良くある使用例 ❏ モジュールの import を制限 ❏ src/A.ts module が src/B.ts module を import できなくするなど ❏ 未使用の変数やモジュールなどを検出 ❏ 命名規則を守らないものを検出 ❏ JS で推奨されない記法の制限 ❏ == を検出し、=== を許可するなど
ESLint とは? 2 ・console.log の制限 ・シングルクォートの使用を強制
ESLint とは? 2
> ルールとか何も考えたくない
ルールとか何も考えたくない 3 ❏ 最初からルールを考えすぎると大変なので、何をやられたくないかを検討 ❏ 例 ❏ 意味なく let を使わないで欲しい
(var は絶許) ❏ 代入より前に利用して欲しくない ❏ セミコロンを省略したくない ❏ ケツカンマ問題で悩みたくない (全部にカンマを入れて欲しい) ❏ TypeScript のコードに ESLint を効かせたい ❏ etc, …
ルールとか何も考えたくない 3 ❏ 本当に何もしたくないけど PJ に一旦導入したい場合 ❏ “eslint:recommended” を使いましょう ❏
ESLint が推奨する最低限のリントが適応されます ❏ カスタマイズしたい場合は公式ドキュメント参照 ❏ TypeScript でも推奨のリント設定を使いたい場合は下記を使いましょう ❏ “plugin:@typescript-eslint/recommend” ❏ “plugin:@typescript-eslint/recommended-requiring-type-checking” ❏ typescript-eslint という別パッケージを入れる必要があるので注意 ❏ 上記コンフィグも typescript-eslint のドキュメントにて言及されています ❏ 厳格なチェックは recommended を strict に変えて使いましょう ❏ typescript-eslint v6 で設定内容に影響がでる変更がありました ※注意
> 名前にこだわりたい
名前にこだわりたい 4 ❏ naming-convention を使う事で色々できます ❏ 変数名は camelCase か UPPER_CASE
にしたい ❏ rures に下記を指定 ❏ const 変数は format を camelCase or UPPER_CASE にする
名前にこだわりたい 4 ❏ 変数名は camelCase か UPPER_CASE にしたい ❏ rures
に下記を指定 ❏ const 変数は format を camelCase or UPPER_CASE にする
名前にこだわりたい 4 ❏ boolean の変数や関数名に prefix を指定したい ❏ types を指定する事で特定の型での名前を限定できる
❏ prefix を指定する事で特定の名前が頭に付く事を指定できる (suffix もある) ❏ prefix, suffix の際合致する名前がトリミングされるため、 prefix の場合の変数 名は camelCase を指定してても PascalCase にする必要がる
名前にこだわりたい 4 ❏ boolean の変数や関数名に prefix を指定したい ❏ types を指定する事で特定の型での名前を限定できる
❏ prefix を指定する事で特定の名前が頭に付く事を指定できる (suffix もある) ❏ prefix, suffix の際合致する名前がトリミングされるため、 prefix の場合の変数 名は camelCase を指定してても PascalCase にする必要がる
まとめ 6 ❏ ESLint を導入する事でプロジェクト全体の品質を維持しやすくなる ❏ コーディングスタイルも非推奨の書き方もなるべく指摘したくない ❏ ただ、リントが強すぎると不便にもなりえるので最初は recommended
で ❏ 他で使われている ESLint がまとめられているので参考にすると良いかも ❏ dustinspecker/awesome-eslint とかを見ると情報が沢山まとまってます ❏ textlint という Markdown ファイルの自然言語向けのものもあります ❏ ドキュメント作りの時の用語のブレとかを検出できます ❏ Docuzaurus とかでドキュメントサイトを作る際に便利 ❏ eslint の plugin で色々やれそうなのでちょっと自分でも作ってみたさがありました ❏ 開発する時に使っていい用語集とか欲しいですね ❏ 標準のものでもある程度は頑張れそうですが、個人的にはちょっと不足かな ...
おわり
P.S. エンジニアのための学習・交流を行うコミュニティスペースを作ります 未経験者・学生・社会人・フリーランス歓迎、プログラミング等は教えます 色々なご相談にも対応します ・就活・キャリアアップ相談 ・業務に関する相談 ・個人的な学習の相談 大阪でのエンジニアコミュニティを応援します ・勉強会場として無料で場所貸し ・むしろ開催応援のギフト券なども考えています
・長く続く開発者コミュニティ作りを実行します