以下の関数は何をしているでしょう？
<br>
```php
public function sendRequset(string $endpoint): Response
{
$response = $this->fetch($endopint);
if (!$response->isSucecssful) {
$this->logErorr("Request failed!");
throw new Execption("Request failed!");
}
return $respone;
}
```
---
ほとんどの人はコードを読むことに夢中で
==タイポ==に気付けない<!-- .element: class="fragment" data-fragment-index="1" -->
---
もう一度コードを見てみましょう。
<br>
```php [|1|4|5|6|8]
public function sendRequset(string $endpoint): Response
{
$response = $this->fetch($endopint);
if (!$response->isSucecssful) {
$this->logErorr("Request failed!");
throw new Execption("Request falied!");
}
return $respone;
}
```
<!-- .element: class="fragment" data-fragment-index="0" -->
---
合計**7つ**タイポがありました！
---
タイポ、気付けましたか？
→ 人間が完璧にチェックするのは難しい。<!-- .element: class="fragment" data-fragment-index="1" -->
<br>
## それ、==自動化==しませんか？<!-- .element: class="fragment" data-fragment-index="2" -->
---
# Code Spell Checkerのススメ
---
## Code Spell Checkerって何？
→ タイポを発見して警告を出してくれるツール！<!-- .element: class="fragment" data-fragment-index="1" -->
---
VSCodeでの実際の画像
---
指摘されたエラーを直すと、、、
<!-- .element: class="fragment" data-fragment-index="1" -->
→ 綺麗になった✨<!-- .element: class="fragment" data-fragment-index="1" -->
---
VScodeの拡張機能を入れるだけでスペルチェックができるよ✅✨
👉 [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
---
これでタイポの無い開発ができますね✨
ご清聴ありがとうございました！
## ...本当に？<!-- .element: class="fragment" data-fragment-index="1" -->
---
こんな声が聞こえてきました。
<br>
👽 「`Keisuke Honda`って文字もタイポになるんだけど」<!-- .element: class="fragment" data-fragment-index="0" -->
😾 「Github上だとタイポ見つけられないやん」<!-- .element: class="fragment" data-fragment-index="1" -->
🐢「Vimで開発したい人はどうすれば良いですか？」<!-- .element: class="fragment" data-fragment-index="2" -->
---
ひとつずつ解決します！
---
> 👽 「`Keisuke Honda`って文字もタイポになるんだけど」
→ 設定ファイルを作ろう！<!-- .element: class="fragment" data-fragment-index="0" -->
---
`.cspell.json`というファイルをプロジェクト直下に置くと設定できるよ！
```json!
{
"language": "en,ja", // 言語の設定
"words": [
"Honda",
"Keisuke"
"Github"
], // wordsに指定した文字は正しい単語として認識される
"flagWords": [
"love",
"peace"
] // flagWordsに指定した文字は誤った単語として認識される
}
```
<!-- .element: class="fragment" data-fragment-index="0" -->
---
> 😾 「Github上だとタイポ見つけられないやん」
→ nodeのパッケージでもチェックするようにしよう！<!-- .element: class="fragment" data-fragment-index="0" -->
---
CSpellというnodeのパッケージが公開されています✨
👉 [CSpell](https://cspell.org/)
---
こんな感じで実行できる。
フォルダ指定も可能。
```bash
$ npm install -D cspell
$ npx cspell index.js
1/1 ./index.js 500.00ms X
./index.js:3:2 - Unknown word (hogehoge)
CSpell: Files checked: 1, Issues found: 1 in 1 files
```
→ Github Actionsやpre-commitでの実行がオススメ！<!-- .element: class="fragment" data-fragment-index="0" -->
---
> 🐢「Vimで開発したい人はどうすれば良いですか？」
→ [Vimのプラグイン](https://github.com/shinglyu/vim-codespell)もあるみたいです。 <!-- .element: class="fragment" data-fragment-index="0" -->
---
ご清聴ありがとうございました！
{"title":"Code Spell Checkerのススメ","description":"タイポしてませんか","contributors":"[{\"id\":\"6c2d0995-1556-4830-b7fe-ddf5ffff3370\",\"add\":10048,\"del\":6776}]"}