🤔

コードを読み解く・わからないコードを調べるコツ

2022/07/19に公開

概要

皆さんがプログラミングでわからないことを調べるとき、どうやって調べていますか？プログラミングの構文を検索するにはちょっとしたコツがいります。慣れれば大したことはありませんが、特に初心者の場合はどうやって調べれば良いかわからず、画面の前でフリーズしてしまいがちです。

この記事ではわからないことを調べるときのちょっとしたコツを紹介します。JavaScriptを例に解説していますが、汎用的に使えるテクニックかと思います。

検索ワードのコツ

例えばJavaScriptで以下のようなコードがあったとして、Math.maxの引数である...dataの意味が分からなかったとします。これをGoogleで検索するにはどうすればいいでしょうか？

const data = [15, -3, 78, 1];
console.log(Math.max(...data));

...dataのdataの部分は変数を表しているということが予測出来ます。VS Codeなどの高機能エディタやIDEで開発中の場合、dataの部分にフォーカスをあてて、右クリックから「定義に移動」をクリックすると変数を宣言しているところに移動するはずです。

...dataのdataの部分は理解できたので、次に調べるべきは...ということが分かります。

実際にGoogleで検索してみると分かりますが、「javascript "..."」、「javascript "..." 意味」などと調べても答えは出てきません。ちなみに、""は完全一致を表します。今回の話の本筋ではないので説明を省略しますが、Google検索では特別な意味を持つ記号がいくつか存在し、検索に使用することができます。( https://thinkgarbage.com/2018/09/26/google/)。

基本的に、Google検索で記号をそのまま打ち込んでも、まず正しい答えは出てきません。ではどうすれば良いかと言うと、以下のように日本語に直して検索すると、検索結果に「スプレッド構文」という構文の名前と説明が出てきます。

「javascript ドット3つ」
「javascript ピリオド3つ」

上記のキーワードで出てきた説明で不十分なら、「javascript スプレッド構文」というキーワードで検索し直すと、詳しい情報が出てきます。

そもそも記号の名前が分からない場合は「記号名前」などと検索して記号の名前を見つけるところから始めましょう。

今回は「スプレッド構文」という正しい答えが出てきたので不要ですが、もしも日本語の情報が出てこない場合は、以下のように英語で検索すると出てくる場合があります。

「javascript three dots」
「javascript three periods」

検索ワード実践

上記のテクニックを使用して、以下に登場する{ commit }構文の意味を調べてみましょう。ちなみにこれはVuexのactionsプロパティです。

actions: {
  increment ({ commit }) {
    commit('increment')
  }
}

実は↑のコードは↓のコードと同じ処理になります。

actions: {
  increment (context) {
    context.commit('increment')
  }
}

直前に示したコードとほとんど同じ構造になりますね。大きく違うのは引数の部分です。

{}という記号名を調べると、「波括弧」であることが分かります。では、「javascript 引数波括弧」で調べてみましょう。

実際に検索してみると、「引数分割束縛」というキーワードが出てきます。更に詳しい情報が知りたい場合は「javascript 引数分割束縛」、「Vuex 引数分割束縛」などと調べると目的の情報が出てきます。

エラーメッセージを読む

はじめに

プログラミングにエラーは付き物ですし、エラーメッセージは怖くありません。学校の勉強では間違えることが何よりも重い罪のように扱われたかもしれませんが、間違えるということは、別にどうということはない当たり前のことです。

コンピュータに感情はありませんので誤魔化そうとしても無駄ですし、人間相手に忖度などしません。コンピュータは書かれているとおりに処理を実行しているだけで、エラーが出たからと言ってあなたを責めているわけではありません。

プログラミングに限らず、トライアンドエラー(試行錯誤)を繰り返して学習するというのは効率的な方法です。プログラミングでは「コードを動かす」→「挙動を確認する」→「コードを修正する」という繰り返しを行って理解を深めていくのが重要です。この繰り返しの中でたくさんエラーを出して、それを解決していくことで段々と理解できるようになります。プログラムを書いている途中でエラーを大量に出しても、どこにも怒る人はいません。

エラーの解決方法

参考ページ: https://jflute.hatenadiary.jp/entry/20130522/errorsinging , https://qiita.com/cannorin/items/eb062aae88bfe2ad6fe5

エラーメッセージで検索する

エラーメッセージは大抵英語ですが、中学レベルの英語でほとんどは理解できます。簡単な英語もさっぱり分からんという人は、Google翻訳やDeepLを使えば日本語に直してくれます。
プログラムのエラーメッセージはどのプログラミング言語も似たような定型文であるため、慣れてくればある程度の推測はつくようになります。

エラーメッセージが大量に出てきた場合は、まずエラーが起きている箇所を探しましょう。

exception, errorという語句が含まれている行を探す(例: System.NullReferenceException: 'Object reference not set to an instance of an object.')
動詞を含む短い分を探す(例: 'i' undeclared (first use in this function))

おそらく、エラーが発生した行数なども前後に示されているはずです。示されている行の前後を見ればエラー発生箇所が分かります。示されている行だけではなく、前後まで確認するのがコツです。

そして、エラーメッセージを読んで何が起きているのかを把握しましょう。英語はさっぱり分からんという人は翻訳にかけましょう。

この時点で解決方法が分かればいいのですが、分からない場合はGoogle検索にかけましょう。「"プログラミング言語" "エラーメッセージ"」(例えば「C# NullReferenceException」)などと調べれば説明が出てきます。

基礎を調べ直す

解説がまるで理解できない場合は、基礎知識が不足しているということになります。以下のようなアプローチが必要です。

知らない単語の意味を調べる
基礎知識を勉強し直す

単語の意味を調べても理解できない場合は基礎知識から調べ直してみましょう。

質問する

エラーを調べてもどうしても理解ができない、あるいは時間がかかりすぎる場合は詳しい人に聞いてみましょう。初心者のうちは「何が分からないのか分からない」という状態だと思いますが、出来るだけ詳細に状況を説明しましょう。以下のようなことを説明すると分かりやすいでしょう。

実現したいこと
現在の状況(これまでに行ったこと、出ているエラーメッセージなど)
予測できる原因、解決策(可能であれば)

今はプログラミング用の質問サイトが多くあるため、それらを使ったり、先輩プログラマーに聞いたりすると良いでしょう。

エラーメッセージまとめ

極端なことを言えば、エラーメッセージを解読するのに必要なのは英語の読解力やプログラミングの知識ではなく、根気強さです。

「理解できていない」ことを受け入れる
状況を冷静に捉える

ことが重要です。

動かないときの対処

動かない場合は最後に動いた時点まで戻す

プログラムを修正して動かない場合は、最後にうまく動いていた地点まで戻して、少しずつ変更を加えていきます。すると、ある地点でうまく動かなくなるはずなので、原因となっている変更箇所が分かります。

エラーメッセージが出ているならそれを調べてみましょう。エラーメッセージが出ていない場合は、原因を考えてみる、別のアプローチを取るなどして解決しましょう。

全くわからない場合は最小構成から試す

1からコードを書いているので最後にうまく動いた地点がないという場合は、最小限の構成で動くことをまず試します。

例えば、ログイン画面を作りたい場合は、

入力フォームが表示されることを確認する
入力フォームの値を取得できることを確認する

という風に、問題を分割して解いていきます。

これでもうまくいかない場合は、

設定したinputタグが表示されることを確認する
ボタンを押すとメソッドの処理が実行されることを確認する
変数に入力フォームの値が反映されていることを確認する

など、自分が理解できるようになるまで細かく分割します。

調べ方のコツまとめ

記号は日本語や英語に直して検索する
詳しく知りたい場合は出てきたキーワードで調べ直す
エラーメッセージはちゃんと読む
動かない場合は最後にうまく動いた時点まで戻す
全くわからない場合は最小構成から試す