コーディングの勉強をしていると、CSSやJSが上手く動かないという場面に必ず遭遇すると思います。
このような問題に直面した際にコーディングは難しいと感じるのではないでしょうか？
今回は、コーディングで問題が起こった際に大事な考え方である「問題を切り分ける」という問題解決法について解説します。
問題を切り分ける考え方をうまく使えるようになると、
- 問題解決までの時間が短縮できる
- 自力で解決できる問題が増える
というメリットがあります。
この考え方はWEB制作などの技術系の問題以外にも汎用的に使えるものなのでぜひご一読ください。
では、実際にWEB制作の問題でどう使うのかの例も使いながらわかりやすく解説していきます！
問題を切り分けるとは
「問題を切り分ける」についてひとことで説明した文があったので引用すると、
全体の中から問題のない部分を切り分けていけば、実際に原因となっている箇所を特定できる
https://ascii.jp/elem/000/000/102/102662/
という考え方です。
言い換えると、「どこまでがうまくいっていて（問題がなくて）どこからがうまくいっていないのかを確認することで（無実の要素を消去していくことで）問題の原因箇所を特定する」という問題の解決方法ともいえます。
問題を切り分けるの例
「全体の中から問題のない部分を切り分けていけば、実際に原因となっている箇所を特定できる」というのはどういうことなのか、簡単な例で説明したいと思います。
例えば川の上流から桃を流して下流の老夫婦に届けたいとします。
しかし、なんど桃を流しても桃が届かないという「問題」が発生しました。
この問題を解決するには、まずどこで桃が消えてしまうのかを確認する必要がありますね。
つまり、原因箇所の特定です。
そのためにはどうすればよいでしょうか？
これは簡単ですね。もう一度桃を流してみて川の上流からついていき、どこまで桃があってどこでなくなるのかを確認すればよいのです。
まだ桃がある場所には原因がないことがわかるので、桃がある限りその場所より上流を調査する必要はないということは明白ですね。
これが問題のない部分を切り分けていく（無実の要素を消去する）ということです。
こうして上流から無実の要素を消去し続けていくと、どの地点で問題が起きるかがわかります。
こうすることで原因を調査する場所は桃が消えた地点の周辺だけでよいので、川の全体から原因を調査するよりも効率的に原因を発見できるということです。
これが「問題を切り分ける」ということです。
あとは発見した原因を解消することで問題を解決します。
問題の切り分けができないとどうなるか
こうして説明すると、問題を切り分けるというのはあたりまえのこと考え方だということがわかるかと思います。
しかし、実際に問題が起きたときに焦ってしまうと、これができないことが多々あります。
そして問題の切り分けができていないまま問題を解決しようとすると、問題とは関係ない箇所を調べることとなり解決までに途方もない時間がかかることになります
例えばjQueryのtoggleメソッドを使ってトグルメニューを実装するとします。
このように開閉するやつ。これはjQueryを使わずCSSで実装している。アコーディオンメニューともいう
このトグルメニューがなぜか動かないときに「jQuery toggle 効かない」といったワードでいきなり調べてしまうことは問題を切り分ける考え方に反しています。
というのも、例えばそもそもjsファイル自体がHTMLに読み込めていない場合などは、toggleの使い方をいくら調べても問題は解決しないからです。
これは先ほどの川の桃の例でいうと、老夫婦のいる地点の直前に問題があると決めつけてそこを調べているのと同じです。
本当にそこに問題があればいいのですが、問題がもっと上流にあった場合、いくら下流を調べても解決することはできませんね。
こういった理由から、まずは問題を切り分けて原因箇所を特定することが素早い問題解決につながることがわかったと思います。
問題の切り分けを使った問題解決手順
ここからは問題の切り分けを使ってどのように問題を解決するのかついて、具体的な例を使って手順を解説していきます。
問題を切り分けて考える際には、以下の手順で進めていきます。
- 問題に関係する処理の中から問題が起きそうなタイミングをざっと洗い出す
- どこの処理までうまくいっているかを確認
- うまくいかなかった処理の中身をさらに細かい処理のかたまりにわけ、どこの処理までうまくいっているかを確認する
- これ以上分割できなくなるまで3を繰り返し原因箇所を特定する
- 原因箇所を修正する
例えばjQueryで実装したトグルメニューが動かないという問題があるとして、上記の手順で考えるとどうなるのかを見てみましょう。
問題が起きそうなタイミングをざっと洗い出す
これは、原因となりうる領域ごとに分類してそれを処理順に並び替えるというイメージです。
jsが動かないということは、jsが動くまでの処理の流れのどこかで問題が起きているということなので、問題が起きそうなタイミングを洗い出してみます。
- jsファイルの読み込み時（原因例：ファイルのパスが間違っている）
- jQueryの読み込み時（原因例：jQueryの読み込みが失敗している）
- イベントの発動時（原因例：セレクタの指定が間違っている）
- メソッドの実行時（原因例：引数が間違えている）
このような感じでしょうか。後で細かくしていくので、ここはざっとでOKです。
当然ですが、この作業をおこなうためにはまず全体の流れを理解している必要があります。
洗い出しができないほど理解していない場合は、問題解決を目指すよりもまず全体の流れがどうなっているのかを復習しましょう！
問題の切り分けをしながら原因を特定する
1で洗い出したタイミングを上流から確認し、どこまでがうまくいっているかを確かめます。
うまくいかなくなるタイミングを見つけたら、うまくいくことを確認した地点からうまくいかなくなるまでの間に原因が含まれている可能性が高いです。
今度はその原因が含まれてそうな部分をさらに細かくわけてどこまでうまくいくのかを確認します。
この手順を繰り返します。
問題を分割して小さくしていくことで原因に近づいていくというイメージです。
慣れてきたら逆に下流から確かめるとより早く原因が特定できます。
例えばjsファイルでjQueryを読み込んだ直後の行にconsole.log()を入れ、適当な文字をコンソールに出力されたとすると、jQueryの読み込みまでは問題がないことがわかり、それ以前の処理を確かめる時間が短縮できます。
JavaScriptで問題がおこった際の具体的な解決方法は以下の記事をご覧ください！
CSSはこちら！
原因箇所を修正する
原因箇所が特定出来たら、後はそこを直すだけです！
問題が起きたjsのメソッドの仕様を調べてみたり、CSSのプロパティの正しい使い方を調べてみたり、検索するのはこの段階になってからです。
このように原因を特定してから解決策を調べることで、問題解決のためにクリティカルな情報にたどり着けるというわけです。
原因が特定できても解決策がわからない場合は、質問サイトなどを使ってみてください。
ここまで具体的に問題が把握できていれば回答者も答えやすく、回答をもらえる可能性も高いはずです。
まとめ：問題を切り分ける考え方は汎用的なスキル
今回は、「何がうまくいっていて何がうまくいっていないのかを繰り返して問題の原因を特定する」問題を切り分けるという考え方を紹介しました。
WEB制作の話をメインに書きましたが、例えば学習の際にどこまで理解していてどこから理解できていないのかを把握するなど、他のことにも応用できる汎用的なスキルといえます。
問題を切り分けることを身に着けると、見当違いの箇所について調べて泥沼にはまるという事態が避けやすくなり問題解決力が上がるので、問題に取り組む際にはぜひ意識してみてください！
コメント