こんにちわ、PHPエンジニアのエンジニア婦人（@naho_osada）です。
PHPエンジニアとして9年～の経験があります。
これまでのお仕事の中の経験の中、コーディング作業をするときにあった方が良いものや、作業中に注意するポイントがいくつか見えてきました。
私はコーディングするときにこの辺りを気を付けていることの紹介です。
※この記事は2021年「Muse Academy Advent Calendar 2021」で12月1日に担当記事です。
便利なテキストエディタを使う
サクラエディタでも、EmEditorでも、VisualStudioCode、PHPStorm、Eclipse、Adobe Dreamweaverでもなんでもコーディングそのものは書けます。その中でも
入力色分け、補完機能、その他便利機能が揃っているものがおすすめです。
自分に合うものをなるべく使いましょう。組織で指定されている場合はそちらを。作業スピードが速くなります。
個人的なおすすめはVisualStudioCodeです。
XAMPPなどのローカルサーバーがあると便利
コーディングの場合はPHPなどのプログラムを動かすことはないので仮想サーバーに入れてやるほどでもありませんが、私はXAMPPを起動させてローカル構築したものにファイルを置き、フォルダ内ファイルを直接編集してやっています。
デスクトップなどに置いてやる方法でもいいのですが、ブラウザで表示を確認するときのレスポンス時間が結構長いような気がします。VisualStudioCode内で見た目を確認できるものもありますが、レスポンスの早さの問題で私には合わなかったようです。
XAMPP自体はそこまで難しくないので、構築チャレンジしてみても良いと思います。
WindowsとMacでやり方が違うと思うので、そこだけ注意です。
小さなブロックに分けて少しずつ書いて確認する
サイトのデザインを見ながら、そのパーツを自分なりに分けて作成していきます。
少しずつ確認していくことでタグの閉じ忘れや要素の入れ忘れを防ぐことができるように思います。
いきなり全部を書こうとしないこと。地獄を見ます。
Ctrl+Shft+Jのコンソールを駆使する
ブラウザコンソールを使用すると要素の確認ができます。これはもう息をするように使用します。
何かおかしいところがあればすぐに使うし、レスポンシブを確認するときも使います。
max-width以下の表示のときにどのような表示になるか？その分岐幅までの間に崩れたものにならないか？などを確認します。全部を思った通りに表示させるのは難儀ですが、ある幅ではボックス同士が重なってしまって崩れている、などは避けたいですね。
Ctrl＋F5
強制リロードです。CSSがなんか読み込まれてないな？ということもあるので、コーディング中は常にこれを使います。
コーディング中は少し変更したら確認、確認、更新、リロード！
謎のmarginがあったらデフォルト指定を疑う
よくulタグで謎の隙間ができて、なんだこれーとなっていました。原因はブラウザデフォルトのmarginが設定されているからです。
各種タグにもデフォルト設定があるので、これに振り回されたくなければCSSで先にすべて0にしてしまいましょう。
必ずやらなければいけないものではないですが、何やら身に覚えのない空白があるな、これだと困るな、というときは疑ってみてください。
WordPressカスタマイズの謎のmarginやpaddingは親テーマが原因かも？
WordPressをやっていた頃によく見られたものですが、どうしても指定のクラスが入ってしまい、親スタイルのmarginが当たってしまう、それによって表示が崩れてしまう…ということがありました。
子テーマのCSS側ではどうにもこうにもそのmarginを解除できません。かといって親テーマや内部のプログラムは下手に触りたくない。
最終的には「jsで外したいところのタグについているクラスを外す」対応をしました（※）。荒業です。
※このやり方はページ表示の一瞬は親テーマのCSSが入るので見た目が揺れるかもしれません。ページの上の方だとその一瞬が見えてしまうかもしれません。
レスポンシブ対応ならdisplay:flex
レスポンシブ対応しないサイトなんで今時ないでしょうし、これはもう当たり前のように使っています。
ボックスが並んでいるデザインがあったらdisplay:flex。スマホで観るときはボックス並びが2個がギリギリかなと思います。より見やすくするなら1個、小さいボックスなら3個行けるか。4個以上は見にくいではなく、コンテンツが小くなりすぎて見えません。
PC版はrowのwrapで、スマホ版はcolumnで1個ずつ積み上げになることが多いです。
上位のタグの閉じる場所は正しいか
body以下はdivの階層構造になりますが、その上位のdivタグの閉じるところは正しいでしょうか。
閉じる場所を間違えていると、書いていく過程で変な表示になってしまいます。どうしてもおかしいときは上位のタグが正しい位置で閉じているか確認してみましょう。次の「HTMLエラーチェッカー」で確認するのも一つの手です。
最後にHTMLエラーチェッカーを使う
あらゆる難所を乗り越え…やっとできた！レスポンシブも完璧だ！
しかしちょっと待ってください。本当にそれでいいでしょうか？
もしかしたらタグを閉じ忘れているかもしれません。
HTMLはエラーをあまり出さない言語なので、些細なこと（ということもないのですが）では見目麗しく表示してくれます。例えば<html>タグを閉じ忘れても見た目は大丈夫です。極端な話、<html>、<body>がなくても表示はします。
記法は当然よくありません。<html><head><body>など基本タグはきっちり使い、開いたタグはきちんと閉じましょう。
Chromeの場合はこちらの「HTMLエラーチェッカー」が便利です。
各種ブラウザ、本機確認を忘れない
こうしてタグの閉じ忘れも確認し、いざ完成…の前にもうひとつ。
各種ブラウザ、本機確認です。
すべての機種で確認することは不可能ですが、メジャーなブラウザは一通り確認しておきましょう。個人でやっているとなかなか難しいところですが、Chrome、Edge、FireFox、コンソールからのレスポンシブ確認、可能なら自分のスマートフォンで表示確認（※）は確認します。
CSSのみだとそこまで崩れることはない…かと思いますが、最新の書き方をしている場合は要注意。もしかしたらブラウザによって対応していないかも。
例えば「input type=”date”」。カレンダーの見た目がブラウザによって変わるし、未対応ブラウザでは目も当てられない。こういうのは様々なブラウザでみられる可能性を考慮したら入れない方がいいですね。
「このブラウザとこのブラウザしか対応しない！あとは動かなくても知らない！」
という案件なら話は別ですが…それほど多くはないと思います。
jsを使っているなら各種ブラウザは絶対に確認。もしかしたら動かない書き方をしているものがあるかもしれません。
IE8？InternetExplorer？奴はWebを扱う皆の敵。なるべく排除しましょう。そもそも対応しない。…どうしてもやりたいというのであれば、特別料金を大幅に上乗せです。
※自分のスマートフォンで確認するためには一時的にレンタルサーバーにアップロードしてアクセスしたり、クローズドの仮想マシン環境にスマートフォンでアクセスできるようにして確認します。
本機確認の地獄絵図-過去の話-
ガラケーが主力だった頃。有名各社はオリジナル仕様のブラウザを作って実装していたため、必ずチェックしました。
動かないことも多々あって、その原因を探るのはまた地獄。コンソールなんて気の利いたものはないし、エミュレータもない。もちろん機種は星の数…（この点は現在のAndroidと同じですね）。
どうしようもないときはPHPのUserAgent判定を使って無理矢理表示を分けたりしていました。
ガラケーのゲーム作ってた開発部隊、本当にすごい労力かかったんですよ、やったことないけれど想像つきます。皆さん動かないとついつい文句を言ってしまいますけれども…。
これを読んでいる心優しいあなたは、もしスマートフォンアプリケーションで動かなかったり、予期せぬ終了などで使えないことがあっても、感情に任せて怒らないでくださいね。優しく開発者に連絡してください。
スマートフォンアプリケーションも開発者から見たら中々地獄の様相です。私は今後もやりたくありません…
まとめ
コーディングする際に注意するポイントを記載しました。
- 便利なテキストエディタを使う
- 小さなブロックに分けて少しずつ書いて確認する
- Ctrl+Shft+Jのコンソールを駆使する
- 謎のmarginがあったらデフォルト指定を疑う
- レスポンシブ対応ならdisplay:flex当たり前
- 上位のタグの閉じる場所は正しいか
- 最後にHTMLエラーチェッカーを使う
- 各種ブラウザ、本機確認を忘れない
「これやってなかったかも…」と思うことがあったら、真似してみてください。
最後まで読んでくれたあなたの参考になれば幸いです(‘ω’)ノ
参考
余談：コーディング経験について（2021年12月現在）
コーディングのお仕事は1件受けたことがあります。
その他、改修でちょっと表示の修正があったとき、出力内容の変更があったとき、新規にボタンをつけたいときなどは自分で書いて納めます。自分のWeb公開用の何かを作るとき、自分でHTMLとCSSを書いています。このエンジニア婦人ノートやプログラムのdemoページ等があります。
最低HTMLがあれば表示自体はしますが、CSSで何もしなければ白黒ですから、見た目が良い物を作ろうとしたら自然とできるようになります。
