こんにちは！クリエイティブ事業部の富江です。

私は未経験から、フロントエンジニアへジョブチェンジをしました。

独学の間は、他の人に見られることや保守性を意識せずに、好き勝手コードを書いていました。そして先輩エンジニアに教えてもらいながら実務に携わるようになった今、少しずつ「これを意識をした方が後々の作業が楽になるなぁ」ということが見え始めました。そんな気づきを、これからフロントエンジニアを目指す実務未経験の人の参考になればと思い共有します！

新人エンジニアが意識したい5つのポイント

1. 命名に気をつけよう！

ファイルにしても、クラスや変数にしても、名前のわかりやすさはメンテナンスの肝になります。

いきなりバシッと決めた名前をつけるのは難しいと思いますが、気をつけると統一感が持てると思う基本的なポイント2点を共有します。

■命名規則

命名にはいくつかスタイルがあるのをご存知でしょうか？

たとえば「my variable name」という名前をつけようとしたとき、そのまま繋げて「my variablename」とすると、単語の区切りがわかりづらいですよね。

そんなときのために、単語の繋げ方にいくつかの方法があります。

以下はその例です。

キャメルケース："myVariableName" のように、最初の単語を小文字で始め、その後の単語の頭文字を大文字で書くスタイルです。
パスカルケース："MyClassName" のように、全ての単語の先頭文字を大文字で書くスタイルです。
スネークケース："my_variable_name" のように、単語をアンダースコア "_" で区切り、全て小文字で書くスタイルです。
ケバブケース： "my-variable-name" のように、単語をハイフン "-" で区切り、全て小文字で書くスタイルです。

関数や変数にはキャメルケースを、ファイル名にはスネークケースを、といったように使い分けることができます。

■意味のある名前

const userPrefecture = 'Tokyo';
const area = 'Tokyo';

ここでは、ふたつの変数名の例を示しています。一つ目は userPrefecture で、もう一つは area です。

userPrefecture はユーザーの「都道府県」を具体的に示しています。対照的に、areaは非常に汎用的で、何の情報が含まれているかが分かりづらいですね。

コードを読む人がすぐに理解しやすいよう、変数や関数の名前はできるだけ具体的にすると、コードの理解が迅速かつ正確になります。

また、今はChatGPTに聞くという手もあります！ChatGPTは創作することを得意としています。たとえば、「サークルの半径を示す変数名を作成してください」と質問すると、次のような回答が返ってきます。

サークルの半径を示す変数名は様々なものが考えられます。以下にいくつかの例を挙げてみます。

1. radius: シンプルでわかりやすい変数名。

2. circleRadius: サークルの半径であることを明示的に示す。

3. r: 単純な略語形式。ただし、コードの可読性を考慮すると、状況によっては他の変数名の方が好ましいかもしれません。

4. r_circle: サークルの半径であることを示す接頭辞を使用。

これはあくまで例であり、プロジェクトやコーディングスタイルによって変数名の選び方は異なります。選んだ変数名がコードの読みやすさや保守性に寄与するように心がけると良いでしょう。

このように、具体的な要求に基づいてChatGPTが名前を提案してくれます。命名に慣れないうちはAIも利用していきましょう！

2. コンポーネントを意識しよう！

コンポーネントは、再利用可能な小さな部品のようなもので、特定の機能や責務を持ちます。

たとえば、同じページの中で似たような見た目の要素がいくつか存在している場合に、コンポーネントを活用できます。似た要素をそれぞれ別にコーディングするのではなく、ひとつの要素として土台（コンポーネント）を作り、同じ土台からそれぞれ引っ張って値を反映することで、同じ見た目でも内容が異なるものが作成されるのです。

プログラミングにかかる時間も短縮できることに加え、もし修正が入った時でも、土台を修正すればすべてに反映されます。また、コードがシンプルになり可読性が高まるのもポイントです。

コンポーネント化は想像以上に活用できる箇所が多いので、「ここは統一できるかな？」と一度考えてみるといいでしょう。

3. コピペするときは理解が必須！

おそらく新人エンジニアのうちは、コードをコピペで進めることが多いと思います。

私なんかは、WordPressに初めて触れたとき、右も左もわからずChatGPTに頼りっきりでした。

そして良くないことですが、とにかく早く作業を完了したいからとそのままそのコードをコピペをすることもありました。案の定壁にぶち当たり、先輩エンジニアに相談しても「どうしてここでこのコードを使っているの？」と何気ない質問にも答えられない…。

修正が必要になった時、何がどうなってプログラムが動いているのか、理解していないとコードが複雑になるにつれ読解が大変になります。

そして、理解していないコードをそのまま流用すると、思っても見ないバグが発生しかねません。

コードを理解したうえで適切に使いこなしましょう！

4. エラー解決のための考え方を身につけよう！

エラーログに対して「英語だし、専門単語が多いし…」と、はなから拒否反応を示してしまう新人エンジニアは多いと思います。（私です）

しかし、エラーログには発生箇所や原因を特定するための手がかりが必ずあります。

ここでは、エラー解決のために必要な習慣を共有します！

■エラーの原因を特定する

・エラーが発生している行の特定
ほとんどの場合、エラーログには問題が発生した行が表示されます。どの部分でエラーが発生しているのかを特定しましょう。

・コメントアウトの活用
エラーログで記載されている行では原因が特定できなかった場合、コードを一時的にコメントアウトさせて無効化することで、どこがエラーを発生させているのか絞り込んでいきます。とあるコードをコメントアウトしたところでエラーが消えた場合、そこのコードに原因がある可能性が高いです。

・コンソールログの活用
プログラムの途中経過や変数の値をコンソールログで出力することで、意図した値が与えられているかを確認します。

■エラーの解決策を調べる

・公式ドキュメントを読む
エラーメッセージや問題に関する情報は、プログラムやツールの公式ドキュメントに詳しく載っていることがあります。まずは公式ドキュメントを確認しましょう。

・期間指定をして検索
検索結果に出てくる記事の中には、数年前の情報も含まれています。信頼性の高い情報を見つけるために、期間指定をすることで良い記事が見つかる可能性が高まります。

・英語で検索する
英語のほうが日本語よりも圧倒的に情報の量が多いです。英語の情報源も活用することで、より広範で深い情報を得られます。

経験を重ねればエラーログの意味が理解できるようになり、英単語の知識も増えていくので、初心者ほどエラーログをちゃんと読むようにしましょう！

5. 質問スキルを磨こう！

わからないときは人に聞くことももちろん重要です。

ただ、問題を整理しないまま聞くことは、相手に問題を丸投げしている状態。スキルの上達にも繋がりづらいです。

質問する前には、問題の整理をしておきましょう！

■コードの意図
自分が書いたコードの意図については、質問された時に明確に答えられるようにしておきましょう。相談相手がコードの目的を理解するためです。

■エラーログ
エラーが発生していたらエラーログなどを共有しましょう。

■使用しているツールやプラットフォーム
質問が特定のツールやプラットフォームに関連する場合、その情報を共有しましょう。例えば、使用しているプログラミング言語、フレームワーク、ライブラリなどです。

■試したこと
質問をする前に、どのような試行錯誤を行ったかを説明しましょう。同じ解決策を提案されないようにするためです。

■期待する結果
質問の目的や望む結果を述べましょう。質問された側にとって、適切なアドバイスを提供しやすくなります。

まとめ

新人エンジニアが意識したい、5つのことを紹介しました！

改めて書くと「何を当たり前な...」と自分でも思うのですが、初心者のうちは忘れがちなものばかりです。

開発にはどういう考え方や意識が必要か、そういった点についても目を向けて、一緒にエンジニアリングの世界を楽しみましょう！

株式会社GIGは、ナショナルクライアントからスタートアップまで、Webコンサルティング、UI/UXデザイン、システム開発など、DX支援をおこなうデジタルコンサルティング企業です。

Webサイト制作やWordPress開発、CMS構築を検討されている方はぜひお気軽にご相談ください。

■株式会社GIG
お仕事のお問い合わせはこちら
会社紹介資料のダウンロードはこちら
採用応募はこちら（GIG採用サイト）
採用応募はこちら（Wantedly）

富江 清香（とみえ さやか）

1995年生まれ。一般事務の業務に従事していたが、ExcelのVBAに触ったことがきっかけでプログラミングに興味を持ち、2023年7月にGIGに入社。現在はクリエイティブ事業部にてフロントエンドエンジニアを担当している。