壁にぶち当たった時の解決法〜フロントエンドエンジニア編〜

2023.11.142023.11.15

皆さま今日も元気に壁にぶつかり稽古していますか？
仕事を遂行していく上で誰しも必ず訪れる「壁」。
フロントエンドエンジニアにおいては特に技術的な要因で壁にぶち当たると思います。

そんな皆さまがブレイクスルーできる一助になればと思い今回ペンを取りました。

分からないことが分からない

「実装の方法が分からない…良し！ググろう！」となりググったときに「これ、本当に自分が臨んでる答えだったっけ？」となったことがある方、手を挙げてください。
この場合、的確にググることが出来ていない状態です。

検索するキーワードの粒度が粗い、或いは的外れであった場合延々とGoogleを介しながら電子の海を彷徨うことになります。
そんな時はググる前に自分がいまどんな状況なのかを確認することが大事です。

タスクは、分解して整理しよう！

の話をする前に皆さま自分のタスクについての理解度はどれくらいあるでしょうか。

さて、眼の前のタスクに取り掛かるぞ！となったときに普段どうしているでしょうか？
「ログイン画面の実装」というタスクを分解していくと次のようになります。

画面のコーディング

ログイン画面のコーディングが挙げられます。
ここでは、HTML、CSS、およびJavaScriptを使用して、画面の外観とユーザーインターフェースを作成します。

もっと細かく分解してみましょうか。

HTMLでフォーム要素を作成し、ユーザー名とパスワードの入力フィールドを配置します。
それぞれのフィールドの属性、エラーメッセージの配置位置、class名…etc
CSSを使用して、フォームのスタイル、ボタン、フォントなどのデザイン要素を設定します。
- 共通パーツのCSS、有効化・無効化などのステート設計…etc
JavaScriptを使って、ユーザーがフォームを入力し、送信するときの動作を追加します。
- バリデーション、クリックハンドラ、ajaxでの通信…etc
- 変数の定義、チェック関数の用意、
  - 引数、戻り値、条件分岐…etc

ログイン機能の実装

ログイン機能の実装はどうでしょうか。
これには、ユーザーの認証とセッション管理が含まれます。

もっと細かく分解してみましょうか。

サーバーサイドコードを設計して実装し、ユーザー名とパスワードの認証を行います。
- DBへのテーブル設計、ユーザマスタの作成、パスワードのハッシュ化…etc
認証が成功した場合、セッションを開始し、ユーザーをアプリケーション内にリダイレクトします。
- セキュリティ設計…etc

エラーハンドリングの実装

エラーハンドリングも忘れてはいけません。
ユーザは必ず間違うものなので間違ったユーザー名やパスワードを入力した場合や、サーバーエラーが発生した場合に必要です。

もっと細かく分解してみましょうか。

フォームの入力検証を追加し、不正な入力を処理します。
エラーメッセージを表示し、ユーザーに問題を通知します。
サーバーエラーが発生した場合、エラー情報をキャッチし、ユーザーフレンドリーなメッセージを表示します。

以上のように「ログイン画面の実装」というタスクでも細かく分解してみれば、たくさんやることがあることがわかります。

しかし、それぞれ1つずつ確実に行っていけば必ず達成できます。
このタスクの分解の粒度が粗ければ粗いほど先の見通しができません。
結果、スケジュールに追われ納期に間に合わない（ぴえん）となっている方も居るのではないでしょうか。

問題点は切り分けよう！

タスクの分解に似ていますがここでは問題が中々解決しない時の対処法です。
「ログイン画面の実装」の「認証機能を実装」というタスクを行っていたときを例にして書いていきます。
認証機能を実装したのに想定した動きになっていません。
入力したのに認証が通らないのです。プログラムを見ても恐らく動いているコードのはず…。

こんな時、闇雲にコードとにらめっこしても埒が明きません。
ではどのように問題点を切り分けるかと言うと…

DBにユーザが登録されているか
DBにテーブルが設定しているか
正しくPOSTされているか
サーバからのレスポンスはどうなっているか
サーバから返答は正しく返ってきているか
ボタンを押したときに処理が走っているか

などが考えられます。
どこで問題が起きているかを見つけ出し最適な解決方法を探っていきましょう。

タスクの分解や問題点の切り分けを行うことで自分がどのような状況になっているかを把握すると、何を調べればいいのか・どのような行動を起こせばいいのか解像度がグッと上がった気がしませんか？気の所為ではないです。

コードリーディングのスキルを上げる

技術的要因で壁にぶつかり稽古をしている場合、その多くの原因はコードを理解できていないことが挙げられます。

コードレビューをしていてレビュアーにいくつか質問することがあります。

「264行目の記述してある意図ってなに？」
「どういう仕組みで動いてる？」
「この記述をすると何でそうなるの？」

がん詰めで泣いてしまうような内容ですよね。
こんなこと言われた日には悔しくて枕をお洗濯してしまいますよね。

さて、あなたは回答できますでしょうか。

自分でコードを書いたのに回答できないという人は恐らく他のコードやネットに上がっているコードをアルゴリズムや意図、意味合いを理解しないままそのままコピペしてはいませんか？

「（コピペして）動いた！やったー！」で終わらせるのではなく、なぜその記述で動作するのかを理解しましょう。

フロントエンドエンジニアは、他の人のコードを理解し、修正する必要があることがよくあります。
案件の引き継ぎ、オープンソースライブラリの使用など機会をあげれば枚挙にいとまがないです。
変数、条件分岐、関数、イベントハンドラ、それぞれの関係性など、見るポイントは多岐にわたります。
分からない記述があれば即ググりましょう。

ググる前にやることと言えば？

そう、状況を再認識することです！

デバッグを駆使する

書いた記述が動かない…！
安心して下さい。
プログラムは書いたとおりにしか動きません。

つまり動かないコードを書いたから動かないのです。

動かない要因としては以下のように様々です。

変数のスコープ
条件分岐の条件が違う
ライブラリの使い方が間違ってる
スペルミス

ではどのようにデバッグすればよいでしょうか？
フロントエンドのデバッグは、開発において重要なスキルです。
デバッグのプロセスは、問題の特定→原因の分析→修正の実施などから成り立っています。

適切なアプローチで乗り越えていきましょう。

参考書籍

ブラウザデベロッパーツールを活用する

ブラウザデベロッパーツールは、フロントエンドのデバッグに不可欠なツールの1つです。
主要なブラウザ（Chrome、Firefox、Edge、Safariなど）は、デベロッパーツールを提供しており、以下のような機能があります。

コンソール

JavaScriptのエラーやログメッセージを表示します。エラーが発生した場合、エラーメッセージとスタックトレースを確認して問題の原因を特定できます。

エレメントパネル

HTML要素の構造やスタイルを視覚的に検査できます。要素を選択し、スタイルの変更や属性の確認が可能です。

ネットワークパネル

ネットワークリクエストとレスポンスをモニタリングし、リソースの読み込み時間やエラーレスポンスを確認できます。

この3つで大体のことは解決できます。

コンソールデバッグ

JavaScriptコードのデバッグには、コンソールを活用します。
コードの実行中に console.log() を使用して変数の値やメッセージをコンソールに出力し、コードのフローを追跡します。

また、console.error() や console.warn() を使用してエラーと警告を表示できます。
PHPでは `ehco` や `var_dump()` を用いることが多いでしょう。

ブレークポイントとステップ実行

レスポンシブにおけるブレークポイントではありません。
ここでいうブレークポイントは、コード内に確認したい栞を挟むことです。

デバッガを使用してブレークポイントを設定し、コードの特定の場所で実行を一時停止できます。
この状態でステップ実行（ステップイン、ステップオーバー、ステップアウトなど）を行い、コードの詳細な動作を確認できます。
ブラウザデベロッパーツールにはデバッガが組み込まれており、ブレークポイントを設定できます。