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
400
プログラミングを体系的に学べる言語 Python を推したい
biwakonbu
0
130
プログラミング言語F#を学びはじめました
biwakonbu
0
320
開発の生産性を高める事を考える
biwakonbu
0
150
「プログラミングを習得する」を考えてみた
biwakonbu
0
83
Python の型事情について
biwakonbu
0
99
Other Decks in Technology
See All in Technology
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
150
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
260
ビギナーであり続ける/beginning
ikuodanaka
3
760
開発生産性を測る前にやるべきこと - 組織改善の実践 / Before Measuring Dev Productivity
kaonavi
10
4.7k
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
390
Sansanのデータプロダクトマネジメントのアプローチ
sansantech
PRO
0
160
AI時代の開発生産性を加速させるアーキテクチャ設計
plaidtech
PRO
3
160
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
harrry1211
0
120
Geminiとv0による高速プロトタイピング
shinya337
1
270
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
pichuang
0
270
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
7
5.3k
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
329
21k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Into the Great Unknown - MozCon
thekraken
40
1.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Statistics for Hackers
jakevdp
799
220k
Navigating Team Friction
lara
187
15k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
Automating Front-end Workflow
addyosmani
1370
200k
Visualization
eitanlees
146
16k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
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. エンジニアのための学習・交流を行うコミュニティスペースを作ります 未経験者・学生・社会人・フリーランス歓迎、プログラミング等は教えます 色々なご相談にも対応します ・就活・キャリアアップ相談 ・業務に関する相談 ・個人的な学習の相談 大阪でのエンジニアコミュニティを応援します ・勉強会場として無料で場所貸し ・むしろ開催応援のギフト券なども考えています
・長く続く開発者コミュニティ作りを実行します