最初に知りたかったWeb制作の勘どころ

今になって思う、エンジニアになりたての頃に知っていたかった勘どころをいくつか書いてみたいと思います。

テキストはフローする

「フローする」という表現は独特ですね。流し込まれて表示される、みたいな感じです。

HTMLのテキストは、表示デバイスの幅やテキストの分量によって自在に折り返します。この文章もそのように表示されているかと思います。これを意識できてないと、レスポンシブレイアウトやテキスト差し替えに対応しづらい実装になってしまいます。

テキストがフローすることを想定した実装は、変更に強い堅牢な実装といえますね。再現が難しいデザインなんかは実装側から意見を言うこともスムーズな仕事につながります。

設計思想に逆らわない

HTMLやCSS、CMSでも何でも設計思想があります。それに逆らうと他者が予想しづらい、ちぐはぐな実装になりがちです。試しにCMSの有名どころ、WordPressを例に取ってみましょう。

WordPressは「テーマ」と呼ばれるテンプレート群をデータベースと別に持つことで、サイトの情報を維持したまま見た目を変更できます。つまりテーマはサイトの情報とは切り離されていることが想定されているわけです。

これに逆らって例えばサイト名をテーマ内に直書きすると、管理画面で行ったサイト名の変更設定が表示に反映されない、といった予想に反する動作をすることになります。

もしクライアントワークであれば、管理画面の変更が反映されないんだけど…と納品後に連絡が来て肝を冷やすことになりますね。

コードを書く前に言葉で整理する

今から何を作るのかを理解できているか、というのは重要です。作りたい内容が整理できてないままコードを書き始めると大抵うまくいきません。

JavaScriptでアコーディオン要素を実装するのに「ここをクリックしたらここが開く」をいきなりコードで書き始めた場合、じゃあ閉じる動作はどうする？と後から考えて付け足していくような書き方になりがちです。

• 「ボタン」をクリックすると「詳細」が開く / 閉じる

• 「詳細」をクリックすると「詳細」が閉じる

みたいに事前に日本語でやりたいことを書いて「自分は今から何を書くか」をまずは自分が理解しておくことが大事です。この場合は「開く」「閉じる」の機能を「ボタン」からも「詳細」からも呼び出せた方が良さそう、という見通しが立てられます。

アコーディオンのようなシンプルなものはいきなりコードを書いても行けそうですが、規模が大きいほど破綻しやすいと思います。言葉で整理することで「設計する」という頭の使い方になり、結果的に見通しの良い堅牢なコードが出来上がっていきます。

駆け出しの頃は、抽象的な知識よりも具体的な、即物的な知識の方に飛びつきがちです。こうした視点を最初から持つのは難しいですが、メンターを探すなどして導いてもらうと近道ができそうです。