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
74
ESLint使ってますか?
ESLint を使っていない人、良いコードを書きたいけど何をしたら良いのか分からない人に向けて、ESLint で何ができるかを説明します。
biwakonbu
August 18, 2023
Tweet
Share
More Decks by biwakonbu
See All by biwakonbu
Django を使い続ける理由
biwakonbu
0
42
爆速なPythonフレームワーク
biwakonbu
0
67
HTMX触ってみた
biwakonbu
0
85
スタートアップの技術顧問を3年間続けて発生した事と気付き
biwakonbu
0
230
プログラミングを体系的に学べる言語 Python を推したい
biwakonbu
0
85
プログラミング言語F#を学びはじめました
biwakonbu
0
110
開発の生産性を高める事を考える
biwakonbu
0
93
「プログラミングを習得する」を考えてみた
biwakonbu
0
50
Python の型事情について
biwakonbu
0
54
Other Decks in Technology
See All in Technology
ペパボのオブザーバビリティ研修2024 説明資料
kesompochy
0
1.1k
エンジニアの生存戦略 〜クラウド潮流の経験から紐解く技術トレンドのメカニズムと乗りこなし方〜
shimy
9
1.9k
ゆめみのアクセシビリティの現在地と今後
ryokatsuse
3
290
AWSでRAGを作る法方
sonoda_mj
1
140
簡単に始めるSnowflakeの機械学習
nayuts
1
190
楽しくGoを学び合う、LayerXの勉強会文化 / LayerX's study culture of having fun and learning Go together
ar_tama
2
350
ギークの理想が7つ集まるエムスリーで夢を叶えよう - エムスリー株式会社
m3_engineering
1
260
頼られるのが大好きな 皆さんへ - 支援相手との期待の合わせ方、突き放し方 -/For_people_who_like_to_be_relied_on
naitosatoshi
1
290
Flutter研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
Azure OpenAI Service Dev Day / LLMでできる!使える!生成AIエージェント
masahiro_nishimi
3
740
スレットハンティングについて知っておきたいこと
hacket
0
130
データベース研修 分析向けSQL入門【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
110
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
24
1.8k
Principles of Awesome APIs and How to Build Them.
keavy
124
16k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
245
1.2M
Embracing the Ebb and Flow
colly
81
4.3k
Fashionably flexible responsive web design (full day workshop)
malarkey
399
65k
[RailsConf 2023] Rails as a piece of cake
palkan
35
4.4k
5 minutes of I Can Smell Your CMS
philhawksworth
200
19k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
19k
Designing for Performance
lara
604
67k
Building Flexible Design Systems
yeseniaperezcruz
323
37k
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. エンジニアのための学習・交流を行うコミュニティスペースを作ります 未経験者・学生・社会人・フリーランス歓迎、プログラミング等は教えます 色々なご相談にも対応します ・就活・キャリアアップ相談 ・業務に関する相談 ・個人的な学習の相談 大阪でのエンジニアコミュニティを応援します ・勉強会場として無料で場所貸し ・むしろ開催応援のギフト券なども考えています
・長く続く開発者コミュニティ作りを実行します