コーディング初心者がつまずきやすいポイントと対処方法について解説

こんにちは。WEBの図書館のらいちです。

Web制作でのコーディングがある程度できるようになったものの、「コーディング時の誤字や漏れ」「本番公開時に表示が崩れる」といったミスがまだ起きてしまい、「自分はダメダメだな」と思うことはありませんか？

実はこうしたミスはWeb制作者なら誰しも通る道で、僕もみなさんと同じ段階の時はよく起こしていました。特に、クラス名の誤字や不一致でCSSが当たらないことが多かったです。

みなさんにはこうしたミスを少しずつでも減らして欲しいため、本記事では「環境構築時」「コーディング時」「本番公開時」の3段階に分け、よくあるミスやつまずきやすいポイントと対処方法を解説します。

環境構築時のミスやつまずきポイント

最初の段階である「環境構築時」でのやりがちなミスやつまずきやすいポイントは以下の4つです。

「環境構築時」のミスは、後の作業であるコーディング時や本番公開時にも響いてしまうため、しっかり解説していきます。

ディレクトリ構成を考えない

まだWeb制作に慣れていない頃は、1つのプロジェクトフォルダを作成するだけで、フォルダ分けせず必要なファイルをざっと並べてしまいがちです。

総ファイル数が５以下であれば良いのですが、基本はファイル数が多くなるため、構成が見づらくなり以下につながってしまいます。

こうした事態を防ぐために、環境構築の際は拡張子ごとにフォルダ分けをし、その中にファイルを設置するようにしましょう。

例えば、JSファイルであれば「JS」、画像ファイルであれば「image(img)」というフォルダを作成するイメージですね。

これにより格段にディレクトリ構成がわかりやすくなり、ミスやつまずきだけでなく作業も進めやすくなります。

フォルダやファイルの名前に日本語やスペースを使う

ファイルやフォルダ作成の際に命名をしますが、初心者の方は日本語やスペースを入れてしまいがちです。日本語の方がわかりやすく、区切りのためにスペースも便利ですからね。

ただ、ファイルやフォルダ名に日本語やスペースを入れてしまうと、通常通りサイトの表示はできるものの、以下のような面倒ごとが起きてしまいます。

そのため、ファイルやフォルダの名前をつける時は、半角英語にし、区切りが欲しい場合はハイフン「-」やアンダースコア(_)を使うようにしましょう。

ファイル拡張子のスペルミス

ファイル作成の際に拡張子も入力しますが、スペルミスによってファイルがちゃんと認識せず、コーディング時に読み込みや反映ができなかったりするのはやりがちです。

拡張子の最後の文字が抜けていたり、「.htlm」のような途中の文字が逆になっていることなどですね。僕自身、今でも打ち間違いをしてしまうことがあります。

こういった拡張子のスペルミスをしたまま、コーディング時まで持ち越さないために、コードエディタのファイルアイコンをよく確認するようにしましょう。

例えばVSCodeでは拡張子が正しい場合、JSファイルの場合は黄色、HTMLファイルではオレンジのアイコンになります。

マイナーな拡張子でない限りはアイコンが用意されているため、スペルチェックをしつつ、ファイルアイコンも確認するのが良いです。

VSCode拡張機能の有効化や設定忘れ

Web制作の効率化のためにVSCodeの拡張機能をインストールしますが、その後に有効化や設定を忘れてしまうのは初心者あるあるです。

そもそも拡張機能は有効化しないと使えず、ものによっては設定しなくても使えますが、基本は設定が必要になってきます。

なので、有効化や設定を忘れたまま制作を行うと、何も変わらないまま作業を進めることになったり、場合によっては意図した動作にならず作業の邪魔になってしまうことも。

これを防ぐために、拡張機能のインストールを行ったらまずは動作確認をするようにしましょう。

動作確認をすることで、「ちゃんと動いてるか」「設定が必要なものなのか」がわかり、もしおかしな箇所があれば必然的に有効化や設定を見直すからですね。

コーディング時のミスやつまずきポイント

「コーディング時」でのやりがちなミスやつまずきやすいポイントは以下の6つです。

制作段階なこともあって、一番ミスやつまずきが多いため、ぜひ1つ1つ確認していきましょう。

タグの閉じ忘れやコロンの付け忘れ

HTMLでは終了タグの閉じ忘れやCSSではコロンの付け忘れが原因で、表示が崩れてしまったり、そもそも反映されないことはあるあるです。

終了タグの付け忘れやコロン1つの付け忘れ程度で表示が崩れてしまうため、なかなか原因を見つけられず沼にはまってしまうことも。

こうしたミスを防いだり、すぐに対処できるようにするためには以下の方法があります。

どうしても意識的な対処方法にはなってしまいますが、癖づけによってミスを減らせるようになり、もし表示が崩れた場合でもすんなり解決できるようになるため、ぜひ心がけるようにしましょう。

クラス名やid名の誤り

HTMLでのクラス名やid名がCSSやJSコードと一致していないために、処理が動かなかったり、デザインが反映されなかったりするのは地味にやりがちです。

名前が1文字違うだけでも動作や適用がされないため、発見に30分以上かかることも。一見すると、コードは合っていることが多いからですね。

このミスやつまずきへの対処方法としては以下が挙げられます。

特に、スペルミスには注意しましょう。CSSやJSではスペルが合っているのに、HTMLの方でスペルミスしていて動作しないこともありますので。

コード記述の順序間違え

外部ファイルの読み込みや処理の記述順序を間違えてしまい、ちゃんと反映されなかったり、意図した動作にならないことも初心者のうちはやってしまいがちです。

具体的なミスとしては以下のパターンがあります。

この対処方法としては「コードは上から実行される」を意識しながらコーディングを進めることです。

「このコードはあらかじめ〇〇ファイルのコードが必要」や「このコードを先に持ってきてしまうと上書きされてしまう」など、順序による影響を考えるようにしましょう。

相対パスの指定ミス

相対パスの書き方を間違えて、ファイルの読み込みや画像の表示ができないというのは定番のミスです。

単純に相対パスの書き方を覚えきれていない場合もありますが、現在のファイルから別フォルダ内のファイルを読み込むなどで位置関係が混乱してしまうこともあります。

こうしたミスへの対処方法としては以下があります。

まずは相対パスの指定方法やファイル間の位置関係を理解するようにしましょう。理解さえできれば、書き方がわからない・混乱することがなくなるため、格段にミスを減らせます。

改行やインデントの整理をしない

改行しなかったり、インデントをそろえずにコーディングを行ってしまうことは、きれいなコードを書けない初心者のうちはやりがちです。

改行やインデントの整理をおろそかにすることで、コードがものすごく読みにくくなり、以下のようなミスやつまずきへつながってしまいます。

これらを防ぐためにも、HTMLでは1タグごと、CSSやJSでは1プロパティや1つの処理ごとに改行をするようにし、階層がある箇所についてはインデントをそろえるようにしましょう。

余分なコードを残したままにする

一時的なテストや使わなくなったコードを削除しないままにすることで、エラーや表示崩れの原因になってしまうのはあるあるです。

「使わないけど表示に影響しないから」という理由で残したままにすると、後々同じようなコードを記述した時にコードが変につながったりして、エラーや表示崩れが発生してしまいます。

また、コード自体も読みにくくなるため、終了タグの追加忘れや処理の範囲外にコードを書いてしまうなど、いろんなミスを引き起こす原因にもなります。

そのため、定期的にコードを読み返し、必要のないコードはその都度削除するようにしましょう。1ページ分のコードが終わったり、大きな処理が出来上がったタイミングで確認するのがおすすめです。

本番公開時のミスやつまずきポイント

最後の段階である「本番公開時」のよくあるミスやつまずきやすいポイントは以下の4つです。

制作時とは違う環境であることによる問題の発生や、単純に気が抜けて起こしてしまうミスもあるため、ここもしっかり解説していきます。

アップロード後に画像が表示されない

コーディング時には問題なく画像が表示されていたのに、公開後に表示されなくなるというのは、初心者の方がよくつまずくポイントです。

「フォルダ構成は変えていないし、パスも合っているはずなのに」と思いがちですが、主な原因は以下になります。

単純な忘れものが原因だったりもしますが、サーバーによってはパス指定とファイルの大文字と小文字が一致してないことで読み込まなかったりもします。

これを防ぐために、まずはファイルがすべてアップロードを確認し、それでも表示されない場合はファイル名やフォルダ名、パスを確認するようにしましょう。

実機や他ブラウザでの表示崩れ

本番公開後に制作で使っていたPCからの確認では問題ないものの、他ブラウザや他デバイスで確認すると表示が崩れていることがあります。画面の見え方が結構変わるためですね。

こうした他のデバイスやブラウザで確認した際に、表示が崩れてしまう原因は以下のとおりです。

対処方法としては、実機や主要ブラウザでの表示確認を行うようにし、検証ツールでも画面サイズを変えながら表示崩れが起きていないかを確認することです。

実機がない場合はどうしようもないですが、ブラウザはインストールすれば確認できますし、どのブラウザにも検証ツールは存在するため、最低でもブラウザ上での表示や画面サイズごとの表示は確認するようにしましょう。

キャッシュで修正内容が反映されない

本番公開後にCSSやJSを修正して再アップロードを行っても内容が反映されないというのは、本当に多くの方がつまずくポイントです。

修正時には正しく変更できており、確実に変更後のファイルをアップロードしているのに、なぜか反映されないなどで、原因がわからず解決できないケースがよくあります。

こうした自体が発生するはキャッシュが原因だからです。公開先となるレンタルサーバーでは基本的にキャッシュ設定がされており、変更前の状態が引き続き表示されてしまうのです。

キャッシュ問題への対処方法としては、以下の方法があります。

特に2つ目の方法でほとんど解決します。CSSやJS読み込みコードに、「./script.js?ver=1」や「./css/style.css?ver=2.0」のようにパラメータを追加することで、新しいファイルとして認識されるからですね。

テストコードを残したままにする

確認用のタグやデバッグ用コードが残っていることにより、本番公開後もテスト表示がされてしまうのは地味にやりがちなポイントです。

単にコードの消し忘れだけでなく、テスト用ファイルが残っていたり、本番用ファイルへのパス切り替え忘れのケースもあったりします。

最後の最後でこんなミスを起こさないための対処方法としては、以下のとおりです。

基本は確認不足のため、サボらず目視で確認するようにしましょう。せっかくコーディングできていても、テストコードの消し忘れによって、表示がおかしくなったり、お客さんからの評価も下がってしまうからです。

ミスやつまずきを防ぐおすすめの習慣づけ

ここまで解説してきたミスやつまずきやすいポイントは、習慣づけをすることで、未然に防いだりすぐに対処できるようになります。そのおすすめの習慣づけが以下のとおり。

正直最初は面倒ですが、やるとやらないとで大きく変わるため、ぜひ確認しておきましょう。

テンプレートを作成して使い回す

ディレクトリ構造やソースファイルをテンプレート化して使い回すことで、必要なフォルダやコードを漏れなくすぐ用意できるようになるため、用意忘れや記述漏れを防げるようになります。

テンプレート化すべき内容は以下のとおりです。

毎回ゼロからフォルダを作成したり、必要なコードを書いていると必ずミスがでてきます。また、書き方もすべて覚えているわけではないので、調べる時間も必要に。

しかし、テンプレート化をしておけばミスを防げる上、必要なファイル・フォルダの大半が用意できている状態になり、作業時間も格段に減らせます。

制作ルールを決めておく

環境構築やコーディングなど制作段階に関する「ルール」を決めておくことで、ミスを防いだり、スムーズな対処ができるようになります。

決めておいた方が良いルールについては以下のとおりです。

ルール無しに制作を始めてしまうと、ファイルごとでコードの書き方が違ったり、命名規則がなかったりで、ミスが起こりやすく対処もしづらい環境が出来上がってしまいます。

反対に、ルールさえ決めておけばディレクトリ構成やコードがわかりやすいものになり、その時その時でコードの書き方やディレクトリ構成を考える必要もなくなるため、作業効率もかなり上がります。

コメントを残すようにする

ソースコードの中にコメントを残す習慣をつけておくことで、後から見返した時にどんな内容のコードかがわかるようになり、ミスへ対処しやすくなります。

ただし、なんでもかんでもコメントを残せば良いというものではありません。基本的には以下のとおりにコメントを残すようにしましょう。

特に、エラーが発生した際にどのコードが原因なのかがすぐにわかるようになるため、ぜひ習慣づけておきましょう。

チェックリストを作っておく

作業内容やテストのためのチェックリストを作っておくことで、作業漏れや表示崩れを大幅に減らせるようになります。

チェックリストに入れるべき内容は以下のとおりです。

人は忘れる生き物なので、「一部作業を忘れていた」「やったつもりだった」がよくあります。でもチェックリストさえあれば、こうしたミスが本当になくなるので、簡単にでも作っておきましょう。

おすすめのVSCode拡張機能

いくらよくあるミスやつまずきやすいポイントへの対処方法をおさえても、自分1人で対処するには限界があります。さすがにすべてを意識するのは無理ですし、時間もかかってしまいますからね。

色々手段はありますが、VSCodeの拡張機能を使う方法でミスやつまずきを減らしていくのが良いでしょう。とりあえず以下の拡張機能を入れるのがおすすめです。

これらは他のサイトでもよく紹介されている拡張機能ですが、それくらい優秀なのでぜひ入れておきましょう。

他にも便利な拡張機能は山ほどありますが、一気に入れるのではなく、作業の中でミスが多かったり、不便と感じたタイミングで入れるのがおすすめです。

まとめ

今回解説したよくあるミスやつまずきやすいポイントは、Web制作者なら誰しも一度は経験するものです。

もしやってしまっても決して恥ずかしくないし、才能がないわけではありません。重要なのは、次にミスを起こさない、起こしてしまってもスムーズに対処できるようにしておくことです。

本記事で解説した内容をもとに対処方法を自分に落とし込み、自信を持ってWeb制作に挑めるようにしましょう。