『HTML/CSSスキルアップレッスン』ここだけの話vol.2（全4回）
こんにちは、千貫（せんがん）りこと申します。 拙著『プロのコーディングが身につくHTML/CSSスキルアップレッスン すぐに活かせてずっと役立つ現場のテクニック』（2023年1月17日、翔泳社より発売）を知っていただくために、執筆の裏話や著者の思いを全4回に分けてお届けします。もしこれを読んで『HTML/CSSスキルアップレッスン』に興味を持ってくださったら、こんなに嬉しいことはありません。
教科書では学べないこと
専門学校の非常勤講師時代、どの学年にも飛び抜けて優秀な学生さんが1人2人はかならずいました。彼らは、支給されたデザインカンプをHTML/CSSでコーディングする程度のことなら簡単にやってのけます。なんなら「先生、物足りないよー」ともっと難易度の高い課題を要求する子もいました。
そういう学生さんが作ったコードを確認すると、たしかに見た目は完璧に再現できているのですが、
なぜそうしたのか、意図が分からない
重複した記述がある
文字数が増減するとレイアウトが崩れる
といった問題点が見つかります。
つまり、自分以外の誰かがコードを読み解く可能性や、運用する（コンテンツが変更される）前提がスポッと抜けているわけですね。
もちろん学生さんに非があるわけではなく、単にそういう意識があるか無いか、の話です。書籍や動画ではなかなかそこまで教えてくれませんものね。学校も同じで、限られた授業コマ数の中で優先すべきは「仕様にもとづいた基本的な知識をしっかり身につけてもらう」ことなので、実務で求められるような「ストリートの知恵」の話はどうしても後回しになります。
『HTML/CSSスキルアップレッスン』で書きたかったのは、まさにこの「ストリートの知恵」です。
いずれ運用業務を誰かに引き継ぐ可能性があるなら、自分の美学に多少背いてもベタなコードを書いておいた方がいいかもしれません。サイトのリリース後にデザインバリエーションを追加する可能性があるなら、あらかじめ保険をかけておいた方がいいかもしれません。現場で求められるのは、先を見越す視点と臨機応変な対応力です。
アマチュアとプロの違い
新入社員研修を担当したことが何度かあるのですが、これから現場に出ていく人たちのコードレビューではかなり細かいところまでツッコむようにしています。「なんでこの手法で実装したの？」と質問したり「無駄なコードが多いので見直してください」「他にやり方が無いか考えてみて」など、他の人より早く課題を提出できた人ほどたくさん注文を付けて返します。
うるさく指摘された新入社員のみなさんは一様にビックリしますが、作業が早い人ほど自分の得意なやり方、手グセに頼ったコーディングを実施している傾向が強いです。それが必ずしも悪いわけではないのですが、単に思考停止していたり頭が固くなっているのだとしたら考えものです。プロとして、まず作業スピードを上げようとする意識はとても大切ですが、それができたら次は作業内容にもこだわりたいですね。
また、「プロたるもの、HTMLのタグをたくさん知っていなくては」とか「新しいCSSの仕様を知っていないと恥ずかしい」といった考えをお持ちの方もいるかもしれませんが、今はアマチュアでとんでもない量の知識をお持ちの方もいらっしゃいます。
ではプロとアマとの違いはどこにあるかというと、たとえば「クライアントが運用するサイトなので、あまり知識が無い人でも簡単に更新できるように作って」と言われたときにササッと対応できるかどうか、ではないでしょうか。要は、引き出しの数と柔軟性です。
そんなわけで、この本は「正解のコード」が複数掲載されている珍しい1冊になっています。「こういうときには、こういうやり方もアリだよね。でもああいうときにはこっちの方がいいかも」みたいな感じです。自分の得意なやり方以外に「こんな方法もあったか」と改めて思い出していただくきっかけになればいいなあと思っています。