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
160
爆速なPythonフレームワーク
biwakonbu
0
160
HTMX触ってみた
biwakonbu
0
180
スタートアップの技術顧問を3年間続けて発生した事と気付き
biwakonbu
0
390
プログラミングを体系的に学べる言語 Python を推したい
biwakonbu
0
130
プログラミング言語F#を学びはじめました
biwakonbu
0
310
開発の生産性を高める事を考える
biwakonbu
0
140
「プログラミングを習得する」を考えてみた
biwakonbu
0
80
Python の型事情について
biwakonbu
0
96
Other Decks in Technology
See All in Technology
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.1k
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
300
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
130
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
130
Azure AI Foundryでマルチエージェントワークフロー
seosoft
0
180
PostgreSQL 18 cancel request key長の変更とRailsへの関連
yahonda
0
120
20250623 Findy Lunch LT Brown
3150
0
850
エンジニア向け技術スタック情報
kauche
1
250
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
140
BrainPadプログラミングコンテスト記念LT会2025_社内イベント&問題解説
brainpadpr
1
160
初めてのAzure FunctionsをClaude Codeで作ってみた / My first Azure Functions using Claude Code
hideakiaoyagi
1
210
MySQL5.6から8.4へ 戦いの記録
kyoshidaxx
1
200
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
GitHub's CSS Performance
jonrohan
1031
460k
Faster Mobile Websites
deanohume
307
31k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
16
940
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Being A Developer After 40
akosma
90
590k
Balancing Empowerment & Direction
lara
1
370
Navigating Team Friction
lara
187
15k
Scaling GitHub
holman
459
140k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
790
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Music & Morning Musume
bryan
46
6.6k
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. エンジニアのための学習・交流を行うコミュニティスペースを作ります 未経験者・学生・社会人・フリーランス歓迎、プログラミング等は教えます 色々なご相談にも対応します ・就活・キャリアアップ相談 ・業務に関する相談 ・個人的な学習の相談 大阪でのエンジニアコミュニティを応援します ・勉強会場として無料で場所貸し ・むしろ開催応援のギフト券なども考えています
・長く続く開発者コミュニティ作りを実行します