モジュールとモジュラーフロントエンド開発の開始

誰もがレゴブロックを知っていて、大好きです。 子供の頃、レゴに夢中になっていて、今でも大好きです。 あらゆる種類のレゴから、さまざまな方法で、一度に1つずつおもちゃを組み立てることができます。 その後、最初からやり直して、同じピースから別のおもちゃを作ることができます。 可能性は無限大。

ウェブサイトのモジュールはレゴによく似ています。 モジュールは、Webサイトの構築を可能にするレゴのピースと考えてください。 それらを正しい方法で接続すると、Webページが形成されます。 レゴのようなウェブサイトを構築するには、ウェブサイトを独立したモジュールのコレクションと考える必要があります。 この記事は、フロントエンドの開発と設計でそれを行うのに役立ちます。

モジュールコラージュ

プロジェクトのデザイン段階に入るとき、私はデザインのインスピレーションのコラージュとモジュールのコラージュを組み立てることから始める傾向があります。 これは、これらのコラージュをポストコンプ時代のデザイン成果物と呼ぶダンモールのプロセスによく似ています。 インスピレーションコラージュは、私がクライアントに提示するスクリーンショットのコレクションであり、私たちが向かっている視覚的な方向性の概要を把握するためのものです。これらは、私とクライアントの両方が好きなWebサイトのスクリーンショットにすぎません。

スタイルに関して同じページにいることを確認したら、グラフィックエディタ（Sketchが好きです）にアクセスして、モジュールのコラージュを作成できます。 これらのコラージュは、ボタン、フォーム、見出し、段落、リスト、写真など、最も一般的に使用されるモジュールのコレクションです。 モジュールコラージュを使用すると、Webサイトの外観と雰囲気をすばやく作成できます。

これは私の最近のモジュールコラージュの一部であり、プロジェクトの開始時にSketchでデザインしたボタンの例です。

おそらく、静的なコンプとピクセルパーフェクトなデザインをクライアントに提示することがいつ登場するのか疑問に思っているかもしれません。 それらはそうではありません—私は私のプロセスでそれらをほぼ完全にスキップしています。 プロセスのその部分をスキップすることで、プロジェクトの非常に早い段階でコードに取り掛かり、プロトタイプをコード化することができます（すぐにそれらに到達します）。つまり、ブラウザーで設計します。 ブラウザでデザインする利点のいくつかを次に示します。

• ブラウザはウェブサイトにとって自然な環境であり、グラフィックエディタで作成されたアイデアに固執することは裏目に出る可能性があります。 ブラウザでテストして設計上の決定を下すのは自然なことです。 あなたは以前にそれを聞いたことがあります、あなたはそれを再び聞くでしょう—それはそれがどのように見えるかではなく、それがどのように機能するかについてです。

• 静的モックと、コードに変換された後のブラウザーに表示されるものとの間には、常に設計上の不整合があります。 これらの不整合を回避するには、コードエディタとブラウザにジャンプして、実際の設計上の問題を解決します。

• 静的コンプは正しいメッセージを受け取らない可能性があります。 ホバー状態、トランジション、アニメーションなどのインタラクティブ機能を統合すると、ルックアンドフィールは大きく異なります。

• いくつかの解像度のためにいくつかの静的モックアップを設計するのに何時間も費やす代わりに、コードに早く入ることで多くの時間を節約できます。 CSSを微調整することで、スマートフォン、タブレットなどのさまざまなデバイスで、クライアントに対する変更と応答性の側面をすばやく示すことができます。

したがって、時間を節約し、コードエディタとブラウザを開いて、できるだけ早くUXの作成を開始してください。 私の経験では、ほとんどのクライアントは、コーディングを進める前に1〜2ページの完全なモックアップを要求しますが、それはまったく問題ありません。 クライアントが将来のデザインをよく理解することが重要です。 私は通常、初期のモックアップ、変更、コメントなどを追跡するための優れたツールであるInVisionを使用します。 ただし、SketchとInVisionではそれほど遠くないことをクライアントが理解することは非常に重要です。

フロントエンド開発用のモジュールの構築

クライアントがモジュールのコラージュと私が設計したモックアップに満足したら、コーディングを開始して、それらの要素の実際のルックアンドフィールを定義できます。

モジュラー設計は、反復プロセスでモジュラー開発と絡み合っています。 モジュールをコーディングし、ブラウザーで試してどのように機能するかを確認し、必要に応じて繰り返します。 繰り返しになりますが、このプロセスはレゴを構築するのとよく似ています。基本的には、設計と開発を同時に行い、満足するまでさまざまなバリエーションを試してみます。

私はよく、ボタンのような単純なものを構築することからモジュールの開発を開始します。 自分で作成していて、通常はお問い合わせフォームに使用されるオレンジ色のボタンをコーディングする必要があるとします。 これがあなたが思いつくかもしれないものです：

 .submit-button { background: orange; color: #fff; padding: 10px 20px; font-size: 16px; }

 <a href=“#” class=“submit-button”>A link</a>

簡単ですね。 .submit-buttonクラスをHTMLに適用すると、現在の問題が解決します。 さて、そのボタンと同じように、背景色が青色の新しいボタンを作成する必要がある場合はどうなるでしょうか。 おそらく、その正確なクラスをコピーしてから、クラス名と背景色を変更します。 速くて汚い。 次に、同じボタンを使用する必要があると想像してください。ただし、背景はオレンジ色です。 これがどこに向かっているのかがわかります—多くのCSSが繰り返されることになるかもしれません。 超小規模なプロジェクトでは、これは実際の問題にはならないかもしれませんが、大規模なプロジェクトではおそらく問題になるでしょう。 あなたがそれを知る前に、あなたのCSSは肥大化し、維持するのが難しくなります。

中規模から大規模のプロジェクトを開発したことがある場合は、かなりの頭痛の種を経験したことは間違いありません。 これらは、次のいずれかの理由で発生した可能性があります。

• 乱雑で、一貫性がなく、スキャンして理解するのが難しいコード。
• 重複の多い肥大化したコードとXXLCSSファイル。
• 保守が難しいコード。
• 構造と皮膚の分離の欠如。

心配しないでください、あなたは一人ではありません。 私は、すべてのフロントエンド開発者がこれらの苦痛な問題を時々経験しているに違いありません。 私は過去にたくさんのプロジェクトがあり、それらすべての典型的な問題に遭遇したと言っても過言ではありません。

これらの問題を回避または最小化する1つの方法は、モジュール方式で構築することです。

モジュラーボタン

そのボタンをモジュール方式でコーディングするにはどうすればよいですか？ モジュール式のアプローチは、再利用できるコードを書くことです。 それらのレゴを覚えておいてください。これらのレゴは、何度も使用および再利用できます。

 .button { padding: 10px 20px; font-size: 16px; } .button-orange { background: orange; color: #fff; }

 <a href=“#” class=“button button-orange”>A link</a>

私たちがやったことは、スタイルの巧妙な分離です。 .buttonクラスには、プロジェクト内のすべてのボタンが使用するスタイルが含まれているため、繰り返す必要はありません。 .button-orangeクラスは、オレンジ色のボタンに関連するスタイルのみを使用します。 他のすべてのボタンについても同じことを行い、背景とテキストの色を定義します。

ボタンモジュールは、いくつかの独立したボタンで構成され、必要なときにいつでも使用できるようになる可能性があります。

より複雑なものはどうですか？

必要になる可能性のある他のすべてのコンポーネントについても、同じ原則に従います。 目的は、他のモジュールから独立したスタンドアロン要素であるモジュールを作成することです。 これらのモジュールを組み合わせると、テンプレートが形成され、必要に応じてモジュールを再利用して、設計を完成させることができます。

モジュラーフロントエンド開発の詳細については、SMACSSを強くお勧めします。これは、大小を問わず、すべてのプロジェクトで使用する傾向のあるアーキテクチャです。

モジュール式のプロセスは、構築、テスト、および反復がすべてであることを忘れないでください。 モジュールは最初にエディターで作成され、次にブラウザーでテストされ、必要に応じて繰り返されます。 必要に応じてそのサイクルを繰り返します。

クライアントを巻き込む

クライアントのニーズを忘れないでください—彼らはループにとどまり、彼らが彼らのお金の価値を手に入れているという確認を得たいと思っています。 この開発プロセスの利点は、クライアントがチームのアクティブなメンバーになることができることです。 あなたは彼らにモジュールを安全に見せることができ、彼らは開発プロセスを見落とし、製品をより良くするために常に売り込むことができます。 実際の進捗状況を確認する前に、静的なコンプが終了するか、マイルストーンに到達するのを待つ必要はありません。 モジュールがクライアントにどのように機能するかを説明するのに少し時間がかかると、クライアントは設計プロセスとそれらの構築に費やした時間をよりよく理解して理解できるようになります。

私が通常クライアントにモジュールを提示する方法は、Bootstrapが行う方法とよく似ています。分離されたモジュールをそのコードとともに設定することは、すべての設計者、開発者、およびクライアントをプロセスに参加させるための優れた方法です。

作成したモジュールをページの構成要素として使用します。 インデックスページでは、ナビゲーションモジュールを上に配置し、次にヒーローモジュールを配置し、次にいくつかのコンテンツモジュールを配置し、次にフッターを下に配置します。 あなたがそれを知る前に、あなたはすでにHTMLプロトタイプのページを持っています。 しかし、プロトタイプとは正確には何ですか？ 私はいつも、リア・ブリーの素晴らしい本「ユーザーエクスペリエンスチームオブワン」のプロトタイプの定義が大好きでした。

実装後に設計がどのように動作および動作するかについての機能または半機能の例。

プロトタイプを作成することで、プロジェクトの初期段階で得られるもの、つまり半機能のWebサイトになります。 静的モックアップとInVisionが不十分な場合、HTMLプロトタイプが優れています。 プロトタイプは、クライアントにとって完璧なレスポンシブな成果物として機能します。 そして、クライアントがプロトタイプのルックアンドフィールに問題がなければ、必要な方法で動作するまでそれを磨くだけです。 ビルド、テスト、反復。

ビルディングブロックを再利用する

モジュールとプロトタイプを使用すると、現在のプロジェクトだけでなく、将来のプロジェクトでもコードを再利用できます。 最後のプロジェクトからモジュールを微調整すると、時間を大幅に節約できます。各プロジェクトで必要なモジュールはよく似ています。 タブ、ナビゲーションメニュー、ボタン、ブレッドクラム、フォーム、テーブル、ページネーション、リストなど、頻繁に再利用するモジュールの大きなライブラリがあります。これらのモジュールのコードはすべてのプロジェクトで完全に同じではありませんが、かなりの部分があります。再利用できるので、開発時間を大幅に節約できます。 あなたへの私のアドバイスは、あなた自身のためにも再利用可能なモジュールを作成することです。 インスピレーションを得るためにBASSCSS、Pure、Refillsをチェックしてください。

モジュール式の設計と開発への切り替えに時間がかかる場合でも、がっかりしないでください。 当然のことながら、モジュラーの原則が初めての場合は、設計と開発のプロセスを微調整する必要がありますが、変更する価値があることがわかる場合があります。

この記事で取り上げたモジュール式の方法と手法は、表面を傷つけているだけです。 それでも、この記事がお役に立てば幸いです。また、モジュラー設計と開発に飛び込むことに興味をそそられたことを願っています。