Google検索と仲良くなる！プログラマー必見ググラビリティについて

どうも初めまして。エンジニアのあーみーです。

私自身教育を担当している立場という事もあって、新人コーダーや新人エンジニアさんの質問に答える機会が割と多いのですが、
新人さんが躓きやすいGoogle検索についての記事を書かせて頂きました。

是非最後までお読み頂けますと嬉しいです 🥰

#目次
1.ググラビリティとは
2.検索の前にすること
3.検索してみる
4.プログラミング側の気持ちを掴む
5.さいごに

#1. ググラビリティとは

俗に言う「検索力」です。

今回は目的のページに辿り着くというのもそうですが、Googleないしインターネットを用いたトラブルシューティングについて解説したいと思います。

#2. 検索の前にすること

まず大前提としてエラーが発生した際はすぐにGoogle検索を利用してはいけません。
基本的にエラー構文を読む事が大事です。
これをやっていないエンジニアさんが大半です。

※今回は簡単な例題にしています。
また言語はjsを利用します。

const hogehoge = 1;
hogehoge = 'text';

こんな感じの誰でも分かるレベルの不具合を書いてみましょう。
その際のエラーはこんな感じです。

Uncaught TypeError: Assignment to constant variable.
    at index.js:2

プログラマーだとしたら行数を見たらすぐに間違いに気づきますが、経験が少ない方だとそうはいきません。
まずはエラーの内容を読む事が大事です。
英語が苦手な人はGoogle翻訳やDeepLを使いましょう。

Uncaught TypeError：定数変数への割り当て。
     index.js：2で

翻訳を掛けると嘘みたいに答えを教えてくれます。
これを読んで理解できなかったら基礎が出来てない証拠です。
その場合は振り返って学習しましょう。上記の例だと定数変数に割り当てをした結果エラーが発生したというのが原因でしょうか。

翻訳したら出てくる答えのパターンでも理解できない・躓いてる人は以下のパターンに該当すると思います。

• 答えが出ているのに気付かない。（読み込めてない）
• 答えの意味が理解できない。（基礎知識が低い）
• Google検索すれば出ると思い込んでる（思考停止）

まずはエラー構文を読みましょう

#3. 検索してみる

エラー構文を読んでも理解が出来なかったら、**そのままの文章で検索しましょう。**大事な単語が欠けてたりするとGoogleは意図した言葉を出しません。（まれに出しますが）
なのでUncaught SyntaxError: Invalid or unexpected token等のエラーが発生した場合はそのままの文言で検索しましょう。

#4. プログラミング側の気持ちを掴む

大前提として〇〇を作りたいと思うエンジニアの思考とソースコードをただ実行しているプログラミング言語の思考は全然異なります。
恐らく「エラー読んでも分からない！」という人はここのコツが掴めていないのかなと思います。

説明してもアレなので例文を作りました。
実用的なソースを用いて説明します。

const requestApi = async () => {
  const res = fetch('/data.json');
  const body = res.json();
  console.log(body.user);
}
requestApi();

特定のデータの中身をリクエストして、ログを出力するというものです。
このソースを実行すると下記のエラーが表示されます。

Uncaught (in promise) TypeError: res.json is not a function
    at requestApi (index.js:5)
    at index.js:9

先程挙げたエラー構文をそのまま読むとres.json is not a functionがヒントになってくれそうな気がしていますが、fetchAPIのドキュメントには戻りのオブジェクトに関数：jsonが存在しています。

じゃあ何故エラーがres.json is not a function(res.jsonは関数ではありません。)と表示されるのでしょうか。

考えられるエラー解決の思考の流れは下記のようになるのが最適解かなと思います。

• res.jsonが関数ではない別の何かになっている
• resはそもそも何だろう？
• そもそもfetchの使い方は正しいのか？

この流れでいけばどんな言葉で検索するのか分かりますか？
そうです、「fetch javascript」で検索してみましょう。

出てきた最初のURLのmozillaのサイトに記載がありました。

※以下引用

// POST メソッドの実装の例
async function postData(url = '', data = {}) {
  // 既定のオプションには * が付いています
  const response = await fetch(url, {
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors', // no-cors, *cors, same-origin

使い方の例を見るとawait fetchとawaitするのが正しかったようです。
これも基礎が抜けていたという結論で終わるのですが、初心者の方自身は基礎が出来てるか否かはやってみないと分かりません。
その為の解決方法で上記のような思考回路が必要になってきます。

とどのつまり、エラー文章を読んでも参考にならないという人はこのような検索までに至る思考が形成されていないケースが大半かなと思います。

なのでエラー文そのままで検索しても答えに辿り付けない場合、エラーの結果だけ見るのではなくて、エラーに至った過程を想像してみましょう。

結果だけ見てその場しのぎの対応を繰り返すとあなたのコードがいとも簡単にクソコードと化します！！ご注意あれ！

#5. さいごに

簡単に説明させて頂きましたが、何かありましたらご意見いただければ幸いです。
それではみなさんHappy Hacking!