スタッフブログ

ルカデザイン流コーダーマインドを説く

山本

山本

はじめに

ルカデザインにおいてのホームページ制作とは、ざっくり以下の三つの工程で成り立っております。

  1. 構成
  2. デザイン
  3. コーディング

構成、デザイン工程が世界を「設計」する工程とするなら、コーディングは世界を「構築」する工程であるといえます。つまり我々の仕事たるホームページ制作とは、世界を創造する仕事といっても差し支えないでしょう。”Hello World”とはよく言ったものです。

本記事では3の世界の構築コーディングにフォーカスした記事となっております。

コーディングとは何か?

コーディングとはコードを書くことです。そして、ホームページに意図した表示をさせるには、ブラウザにコードを介して命令を出す必要があります。つまり、ホームページ制作の終着点は必ずコーディングという作業が必要ということになります。
また、ホームページ制作においてコーディングとは、最終にして最長の工程となります。

終わり良ければすべてよし

終わり悪ければすべてだいなし

それが、ホームページ制作におけるコーディングです。

コードを書くうえで大事な指標

ルカデザインにおけるコーディングの合言葉が「明日楽するコードを書く」になります。
この言葉の意味するところは、遠回りしてでも使い回ししやすく、管理しやすいコードを書くということです。

つまり、スピードよりも質を優先しましょうってことです。

QCDの考え方

生産管理の言葉にQCDというものがあり、それぞれ「Q:品質」「C:コスト」「D:納期」を意味し、相互に作用するこれら3つの要素の優先順位やバランスを取ることが、生産現場において必須の考え方となっております。

ホームページ制作にQCDをあてはめると、かける工数がそのままコストとなり、工数によって納期を算出するので「コスト=納期」といってもよいかもしれません。

コーディングの話に戻ると、この場合「Q:品質」を最優先にしましょうということですね。

品質優先とした場合の好循環

コーディング作業において、なぜ「Q:品質」を最優先にすべきなのでしょうか?そこで、「明日楽するコードを書く」に繋がってくるのです。「明日楽するコード」とは、また明日以降も使用できるコードであり、この”使い回す”という行為がコーディングのスピードを飛躍的に加速させます。

もう、お分かりですね?

つまり、品質を常に優先し続けることによって「明日楽するコード」が量産され続け、以降のプロジェクトがスピードアップし続けるということです。「C:コスト」と「D:納期」は後から勝手についてくるわけです。

品質の良いコードの4つの条件

それでは、高品質なコードの条件とは具体的にどのようなものでしょうか?
ルカデザインの考える高品質なコードの条件とは「可読性」「保守性」「再利用性」「拡張性」の高いコードです。

可読性

私が書いたコードは私だけが編集するものでしょうか?

いいえ、否です。

同僚のコーダーが編集を請け負う場合があるだろうし、まだ見ぬ新米コーダーが編集するかもしれません。もしかしたら、クライアントが他の業者さんに依頼されるかもしれません。
もっといえば、たとえ私が編集するにしても、数ヶ月も経てばどのようなコードを書いていたかなど記憶しているはずもありません。
第三者、もしくは未来の自分が見た時に読み取りやすいコードとすることは、工程を円滑にし、編集の安全性を上げるためにも重要なことです

保守性

コード内でいたずらに”ブービートラップ”を設置してはいけません。
例えば、全く同じものを出力しているにもかかわらず、二カ所以上に別々に記述している場合がそれです。内容の編集が後々入る場合、一つ編集しても残りは当然編集されないからです。「あれ、一部のページだけ変更されてないよ?」という無用なトラブルが発生してしまいます。

再利用性

「C:コスト」と「D:納期」を上げていくことにおいては最も重要な条件です。ヘッダーやフッター、CTAやスライダー、ギャラリー、投稿カードなどなど…ホームページを構成する要素は、案件をまたいで活躍できるパーツであふれかえっています。
ルカデザインの場合ですと、スタイルは毎回変更するけれども、内部の構造は再利用できるように組むことが多いです。

拡張性

再利用性と似ていますがこちらはその発展系です。パーツにパラメーターを与えてさまざまな要件に対応するように組むことをさします。
ルカデザインの場合ですと、投稿一覧をトップページに取得するコードは”クラス”というオブジェクトにまとめています。

例えば、

「表示件数10件、カードのスタイルはニュースタイプ、カテゴリーバッジあり」

「表示件数4件、カードのスタイルはブログタイプ、カテゴリーバッジなし」

のようなパラメータを指定するだけで、一つのプログラムから複数バリエーションを出力できるようなコードがこれにあたります。

おわりに

いかがだったでしょうか?本記事ではコーディングに視点をおいて大切にすべき指標をまとめましたが、コーディングだけでなく、すべての業務においても当てはまる考え方であると私は思います。

要件整理、タスク管理、マニュアル作成…などなどコーダーとはいえコーディングしていない時間も結構多いのですが、それらの業務においても上記の考え方をもとに作業しており、割と手応えを感じております。

ただし適材適所という言葉どおり、すべての場面でこの指標をもとに行動することは正しいとはいえないかもしれません。迅速な回答(成果)を求められる場面や再現性のない作業、案出しなどの質より量が優先される作業などにはふさわしくないでしょう。

何事も要領良く、臨機応変に対応できることがベストであるということでしょうか。(正直私は苦手ですが。)

【2022年版】企業ホームページ制作の相…
ルカデザイン㊙︎採用情報

見積依頼、ウェブサイトに関する
ご相談はお気軽にどうぞ。

0120-471-960 受付時間 9:30〜18:30(平日) 資料ダウンロード お問い合わせはこちら