こんにちはカレイドです。
つい今さっきまでエラーと格闘してようやく解決しました。
今までで一番苦労したエラーで中身についてはまた今度話そうかなと思うのですが、
今回は自分がいつもやる解決までの流れを説明していこうかなと思います。
ちなみに今回は今までで一番苦労もしたしかかった時間も長くて3日間ほど戦う羽目になりました。
普通はこんなにかからないので安心してくださいね！では早速見ていきましょう！
ステップ1 まずはエラーをみてその付近を探ってみる
発生するエラーにはさまざまなものがあるのですが、基本的にはエラーを見れば解決するものがほとんどです。
大体起きているエラーは行番号が指定されているのでその行、またはその前後2，3行は見てみましょう。
よくあるのがタイプミスですねこれはあるあるです。本当に例えるなら数学の問題で見直ししても絶対あってるだろうと思っていた問題が返ってくると凡ミスみたいな
嫌になっちゃいますよね。でもまあそれがプログラミングです。
こういうミスを回避するにはエディターについている補完機能を最大限に利用しましょう。
補完機能を使ってタイプミスを減らそう
皆さんは補完機能きちんと利用していますか？
例えばですけれど私のプログラムなら認証部分の一例をお見せすると
passport.use(
new twitterStrategy(
{
consumerKey,
consumerSecret,
callbackURL: `${url}/auth/twitter/callback`,
userProfileURL:
"https://api.twitter.com/1.1/account/verify_credentials.json?include_email=true"
},
こんな感じでまぁまぁタイプミスしそうな単語が含まれていますよね。
でもこれって実は事前にほとんど定義されている変数なんですよね
const passport = require("passport");
const twitterStrategy = require("passport-twitter").Strategy;
const consumerKey = require("./keys").consumerKey;
const consumerSecret = require("./keys").consumerSecret;
const User = require("../models/User");
const url = require("./keys").baseClientURL;
こんな感じで事前に定義がされています。
きちんとしたエディターを使っていれば二度目は補完機能で単語を埋めることができます。そうすればこういう細かいタイプミスは減っていくようになると思います。
例えばtwiterなんてミスしてると1時間探して見つからないとか結構あるのでなるべく補完機能を利用してタイピングしていきましょう。
ステップ２ 前回との差分をチェックしてミスしてそうなところに検討をつける。
このステップに関してはGitをしっかり使いこなしていない場合使うのが難しいですが、
前回との差分でエラーが起きている可能性がかなり高いのでエラー文だけで対処できなかったときはこちらを確認しておきましょう。
俺はGitなんて使ってねーよって人でも自分の変更履歴を追ったり、こういう使い方が出来たり、もし、会社で仕事をするってなった場合には必須のスキルになるので今のうちから学んでおくことをお勧めします。
実際私も最初は会社でいずれ使うからという目的でしたが、自分のアプリ管理や、こういうエラーチェックなど一粒で4度ぐらいおいしいような経験をしているので学んでおいて損のないスキルになります！
ステップ３ エラー文まるまるコピペしてそのままグーグルへ
何点か注意事項がありますが基本的にはエラー文そのままコピペしてグーグルへ行けば前に似たような問題をスレッドに立てている人がいる可能性が高いのでそれを見て解決しましょう。
英語で出てくることがほとんどですが、日本語で調べるよりも全世界で調べる方が圧倒的に解決できる割合が高いです。
ですのでグーグル翻訳を使いこなして英語にも慣れていきましょう。
注意点
自分のプログラム特有の単語は含まないようにしましょう。例えばさっきの例ならconsumerKeyなど、そういうものは省いて検索した方がより良い結果がでてきます
ステップ４ テキストを最初から打ち直す、ファイルごと元の物をコピペする
少し説明が下手なので具体的に書いていきますね。
私の場合まだまだ、何かのテキストを参考にしたり動画を参考にしていることが多いです。
ですので、それを利用している人は最初から打ち込みなおしてみましょう。出来ればエラーが何だったのか理解するために今の分でGitにコミットして、新しく打ち直した結果との比較を取ると一目瞭然のはずです。
成長するためにもこういうエラーはしっかり原因を把握しておきましょう。
写経型の人で結果のファイルが別にある場合は最終手段としてそれを丸コピして貼り付けてみてもいいでしょう。
もちろん最初から貼り付けはダメですよ。悩みに悩んだ挙句に張り付けるのは全然オッケーです！
ステップ５ エラーを質問する
ここまで来て解決できないときはすぐに質問しましょう。
大体半日近く悩んでいる人はもう質問した方がいいです。本当はすぐ聞けるメンターさんみたいなのがいたらベストですけどね、
いざという時のために自分でしっかりエラーを質問できるようになっておきましょう。
teratailは日本語なので初心者さんはこちらがいいと思います。英語に抵抗ない人はぜひstackOverflowで質問をしていきましょう。
最終手段 1からコピペしながら動かしていく。
あれ、似たようなことを実は前からやっているよなって思った人いませんでしたか？
ここでいう1からコピペというのは本当にプロジェクトを1から組んでいくという意味でステップ1とか2とかはあくまでエラー周辺を見て変更するだけなので膨大なコードの一文を変更するだけです。
そうではなくて1から小さい機能ごとにコンパイルを重ねていきエラーを取り除こうということです。
最初のうちはこんなことをせずとも解決できているので必然的に初級を脱出して何かアプリ作るぐらいの人がぶつかる問題だと思います。
ですので大体どの辺が怪しいかわかるはずなので絶対に影響ない部分はそのまま引用して怪しい部分を一つずつ実装し直すって感じですね。
例えばクライアント側がおかしいとかバックエンド側がおかしいとか。
さらに細かくviewの部分だけやり直すとか、コントローラーの特定のapiだけやり直すとかそういう部分ごとの取り換え作業です。
かなり骨の折れる作業ですが、意外とお古を見直すと、これもっと簡単に実装できるじゃんとか、新しい発見がありますよ！
おまけ（エラーではないけれど意図しない操作の場合）
最後にカレイドはこれでも解決できませんでした。
それはプログラムはエラーを吐いてくるわけではなくてすべて動いているよと言っているわけですね。
正常に動いているけれど意図しない動作の場合って結構あると思います。そういう場合はもう手当たり次第にチェックしていくしかないです。やはり、gitの差分はめちゃくちゃ使えます。
私の場合は本番環境にアップしたときに前の情報がブラウザに記録されたままで変更がうまく反映されていませんでした。
幸い私の場合はうまく行っているバターンのプロジェクトがあったためそれを参考にしていたのですが、apiなのでサーバーが怪しいと思っていたのですが実はクライアント側で
キャッシュ（データをブラウザに保存して次回以降ロードを早くする）を保存する1文があったようで、それを偶然うまく行っているものとの違いから見つけ出し変えたところうまく行きました。
ええ、3日以上悩んで変更に必要だった行数はたったの1行
以上カレイドでした。
