なるべく早く身につけたいエラーとの向き合い方

# どんな記事か？
こちらのイベント参加の記事になります。

https://qiita.com/official-events/3f21c92121aa125807b4

筆者自身がもっと早く身につけておけば、コーディングが楽だったなと思うことを記事にいたします。

# 環境
- PC: MacBook Pro (Intel Core 2016)
- OS: macOS Montery12.3.1
- Chrome: Version 100.0.4896.127

# 最初の頃は恐いエラーだが、仲良くなるとこれ以上の情報はない
![pose_koshi_nukeru_kowai_man.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/4fbf8f97-5fdc-b928-45c8-c52763759fd6.png)

プログラミングを始めた当初は、「うぁ、またエラーか。英語でよくわからないからそっ閉じ。。」といった反応をしていましたが、 **エラーほど重要な情報はありません！**

どうしてかというと、 **なぜエラーになったのか、全てそこに書かれているから** です。

じゃぁ、「エラーをちゃんと読もう！」で終われば簡単な話ですが、最初の頃は **そもそもエラーに書かれていることが分からない** というケースもあるのではないかと思います。

だから、「エラー読めよ」と言われても、そこに書かれている単語の意味などが分からなければ「いやぁー、読んだんですけど内容がさっぱり。。」となってしまいます。

先に知っていればエラーとの向き合い方がもっと楽だったのに、と感じた内容と方法を記事にいたします。

# エラーが出たらまず何をするか
![computer_search_kensaku.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/02fbc0c0-0ef6-928b-7b72-e2dd7ac04026.png)

とにもかくにも、**エラー内容原文(英語)をコピペしてGoogle検索！！** です。

最初はこれに尽きると思います。

経験を積んで、「あ、このエラーだから多分ここら辺だな」とあたりをつけられたら、真っ先にそこをデバックするのが良いのですが、最初の頃はそんなあたりなんてつけられないことの方が多いのではないでしょうか。

**分からないことが分からない、だから困る**のです。

ではどうするかというと、**最初にエラー内容を翻訳** して、それでも分からなければ、「**エラー内容原文(英語)そのままコピペして検索**」してしまえばいいのです。

この、英語のまま検索が**重要**です。

# ドキュメントは英語が質も量も圧倒的！
![english_book_boy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/dbd5f7be-93a5-86a0-0a32-0a8e2cf39b40.png)

なぜかと言いますと、プログラミングの情報は **英語で書かれている記事が質も量も圧倒的** です。

筆者が必ず参考にさせていただく、[Stack Overflow](https://stackoverflow.com/)や、GitHubのイシューなどは情報の宝庫なのでお世話になりっぱなしです。

ただ、基本的に上記サイトは英語です。

「英語かぁ、英語わかんないしなぁ」と嘆く必要なありません。

もちろん原文ままで読めればベストですが、今の時代高性能な翻訳アプリが多数あります。

# 翻訳ソフトを活用しよう
![english_smartphone_honyakuki.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/4df81fdf-737c-2ed1-f9e4-5bc45277cc99.png)

イチから英読を身につけるには、かなりの学習量が必要でしょう。

しかし、エラーと納期は待ってくれません。

そこで、活用すべきは **翻訳ソフト** です。

今や、中途半端に英語を学ぶより、翻訳ソフトで翻訳した方がよりナチュラルですらあるので、利用しない手はありません。
(とはいえど英語ができたらカッコいいので筆者はチビチビと継続して英語を学習しています)

## おすすめの翻訳ソフト
おすすめな翻訳ソフトをご紹介いたします。

### Google翻訳(Chrome拡張機能)
まずは、Chrome拡張機能である、「**Google翻訳**」です。

![Screen Shot 2022-04-25 at 21.00.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/83b73c71-5c79-01be-602d-bcd05b6960ff.png)

[こちら](https://chrome.google.com/webstore/detail/google-translate/aapbdbdomjkkjkaonfhkkikfgjllcleb)から「Chromeへ追加する」をクリックするだけです。

ドキュメントが英語のページで右クリックをして、「日本語に翻訳」を押下するだけで、**ページ全体を翻訳してくれ**ます。

こんな感じです。

[TypeScript(GitHub)](https://github.com/topics/typescript)

[原文]
![Screen Shot 2022-04-25 at 21.06.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/6f41b31c-2264-63da-e04a-b7f40f3e508d.png)

[翻訳後]
![Screen Shot 2022-04-25 at 21.08.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/15206ece-197a-21da-489d-58228ae2ff7c.png)

精度はそれほど高くないかもしれませんが、**意図は十分に伝わります。**

何よりも右クリックで翻訳してくれるので**お手軽**です。

### DeepL
![d01_s.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/c28d2f2d-9763-3af0-19de-5466c04b1784.jpeg)

続いては、無料で利用できて「Google 翻訳よりもかなり自然」「精度の高さに驚いた」という声が多く、ナチュラルに翻訳をしてくれる「[DeepL](https://www.deepl.com/translator)」です。

DeepLは世界遺産の立派な大聖堂が立つドイツ・ケルンに拠点を構えていて、独自のディープラーニングをベースにしたAI(人工知能)システムを開発する企業が、2017年に公開した機械翻訳システムを社名と同じDeepLと名付けてローンチしたそうです。

詳細は、[こちら](https://www.watch.impress.co.jp/docs/topic/1256794.html)をご覧ください。

有料サービスもありますが、無料でも全く問題なく利用できます。

その特徴はなんと言っても、**精度の高さとナチュラルさ** です。

筆者はよく、**Google翻訳で意図が伝わらない箇所を、このDeepLで翻訳をかけます。**

この手順で大体の英語ドキュメントはクリアできのでは、と感じます。

**2022/06/19 追記**
現在、Chrome の拡張機能にも DeepL がベータ版であり、ブラウザからテキストを範囲選択するだけで翻訳してくれます。

https://chrome.google.com/webstore/detail/deepl-translate-beta-vers/cofdbpoegempjloogbagkncekinflcnj?hl=ja

# Chromeの設定でドキュメントを英語に絞ってみよう
![kokusai_man.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/c19bc06f-5f49-caa5-5306-c489cc377a51.png)

ここまでで、英語に対しての抵抗感も少し薄まってきたのではないでしょうか？

その次にすることは、「**ドキュメント自体を英語に絞る**」です。

これをすることで、**より早く質の高いドキュメントにたどり着く確率が上がる** と感じます。

なお、筆者は **VSCodeも英語のまま** にしています。
(原文をそのままコピペして検索できるため)

## 手順
では、Chromeの設定でドキュメントを英語に絞る設定手順です。
<font color=Red>※筆者の環境は既に「設定済み」のため、必要な箇所は参考記事を貼っています。</font>

### 検索結果を英語圏のみにする
- chromeで適当にgoogle検索をする
- 右上の歯車(setting)をクリック
- Using Search > Languages をクリック
- 「English」を選択して、「Save」

![Screen Shot 2022-04-25 at 21.28.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/36a2f115-7874-c6bf-7ce4-60b11ce8c8c8.png)

![Screen Shot 2022-04-25 at 21.29.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/20f1ba8e-4e6e-1d56-938a-09c60666fef0.png)

![Screen Shot 2022-04-25 at 21.30.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/1f77efe4-0745-d577-631b-24c334053f1b.png)

https://pc-karuma.net/google-search-results-in-english/

#### ついで(メニューの表示を英語にする)
- 右上のsettingをクリック
- 「Settings」をクリック
- 「言語」と検索
- 「Add languages」をクリック
- 「English (United States)」を選択
- 「English (United States)」を一番上まで移動させる

![Screen Shot 2022-04-25 at 21.22.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/f81ef270-a15c-d202-a317-7c88bcac40c4.png)

![Screen Shot 2022-04-25 at 21.25.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/7c3bb0e1-698a-713b-ad09-5a6e9cd08b0c.png)

https://support.google.com/accounts/answer/32047?hl=ja&co=GENIE.Platform%3DDesktop

#### さらについでにChrome自体を英語表示にする

##### windows
- Chromeを起動
- ウィンドウ右上のメニューボタン > 詳細設定 > 言語
- に表示されているメニューボタン > 「Google Chromeをこの言語で表示」のチェックボックスをオン

##### Mac(⚠️Mac全ての表記が英語になります⚠️)
- システム環境設定 > 言語と地域
- Englishを一番上にして、最優先にする
- 再起動

https://blog.akuydesign.com/mac-chrome-language/

# 公式ドキュメントと早く仲良くなる
![dog_cat_nakayoshi.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/3e4845f9-de16-726e-42db-6a730d2e0316.png)

公式ドキュメントを巡回して、「この内容はここから行けるんだな」と感触を確かめておいて下さい。

公式ドキュメントと早く仲良くなることも、必要なスキルだと感じます。

# デバッグ方法もすぐにでも身につける
![computer_programming_man.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/4813e381-7cff-7f2b-c5f1-baf4a3c899a1.png)

ここまでは、**エラーから原文で検索していく方法** をご紹介いたしましたが、**やはり最終的に修正しなければいけないのは、自分が書いてエラーを出したコードです。**

こちらの記事では深堀いたしませんが、ブレイクポイントを貼って、その状態の変数値が期待通りかを確認したり、返り値が期待通りかを確認するのですが、デバッグ方法は言語などによって少し方法が異なりますので、現場の諸先輩方に**すぐにでも教えてもらって下さい。**

# 無理に自分一人で調べ過ぎない、抱え込まない
![nayamu_boy2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/fb5fbce7-1fb5-dd57-b304-d4fca8412130.png)

最初の頃は、検索がうまくできなかったり、知らない単語が多く理解が及ばないケースの方が多いかもしれません。

そんな時は、**迷わずに質問** しましょう。

自分で調べても時間が掛かってしまったり、**最初の頃はたどり着けないケースだってあります。**

なので、ご自身の中で **何分以上調べて分からなかったら素直に質問する** という決まりを作ることもとても大切だと思います。

**<font color=Red>業務には納期があります。</font>**

先輩や管理者が進捗を把握できていたら助け舟を出せますが、対処できずに一人で抱え込んでしまうと、タスクが進まずに**プロジェクト全体が遅れてしまう**ことになってしまいます。

この点をしっかりと意識することも**とても大事です。**

質問やコミュニケーションについては、以下の記事が**とても参考になりますので**、ぜひ読まれてみて下さい。

https://qiita.com/seki_uk/items/4001423b3cd3db0dada7

# 調査して解決できたことは、忘れないうちにメモしておく
![bunbougu_memo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/b6d4568c-2444-70ca-01fb-df48af56c103.png)

また、同じくらい大事なことは、**解決できたことは、忘れないうちにメモしておくこと** です。

エラーと向き合っていくことはプログラミングをやっていく上で**必須**です。

そして、人間は忘れる生き物です。

もし、同じエラーに遭遇しても「あ、これね。これだったらメモしてるし大丈夫！」と言えるように、しっかりとメモを残しておきましょう。

この引き出しが増えれば増えるほど、作業が早くなりますし、傾向も見えてきます。

筆者が利用しているツールは[Notion](https://www.notion.so/ja-jp/product?utm_source=google&utm_campaign=14877655427&utm_medium=125922091617&utm_content=552465064290&utm_term=notion&targetid=aud-841221518584:kwd-312974742&gclid=CjwKCAjwjZmTBhB4EiwAynRmD-ULZHUuKcrT7ErxIQ2wdDubag0krAGSeLPQG1KysDvTQ9mHv7EJ7hoC7wMQAvD_BwE)というツールを利用しています。

情報の整理がしやすく、とても便利です。

## メモをする時はテンプレート化しておくと楽
ちなみに筆者は、メモをする時の内容をテンプレート化しています。

その方が流れに沿って、必要な情報を過不足なくメモに残すことができるようになります。

以下はあくまで例ですので、ご自身がより腑に落ちやすいように試されてみて下さい。

```tex:メモテンプレート例
# やりたいこと
- 例：TypeScriptでジェネリクスを記述しようとしたらエラーが出た
[実際のコード]

# エラーメッセージ
[実際のエラーメッセージ]

# 再現
[エラーの再現コード]

# 調査
[参考になったサイトのURLなど]

# 公式
[公式ドキュメントに記述されていた場合]

# 原因
[原因となったことを端的に]

# 解決方法
- hogeをfooすることで解決できた
[解決後のコード]
```

# 筆者がよくお世話になっているサイト
- [Stack Overflow](https://stackoverflow.com/)
- GitHub
- [DeeepL](https://www.deepl.com/translator)
- なんと言っても公式！

# まとめ
- 最初はエラーは恐いものだが、これ以上の情報はない
- 原文(英語)のまま検索すると、質の高い情報にたどり着ける確率が高くなる
- 翻訳ソフトを活用しよう
- 一人で抱えずに、分からなければちゃんと質問しよう
  - 質問ができずに抱え込んでしまうと、プロジェクト全体に影響を及ぼすことになる
  - ちゃんと「助けて下さい！」とヘルプを出すことも大事
- 教えてもらったり調査して解決できたことは、忘れないうちにメモをとる
  - メモは、テンプレート化しておくと楽