モバイルファースト設計のJSの基本 #レスポンシブ

本記事では、モバイルファーストの設計においてJavasciptを使ったレスポンシプテザインに注目し、パフォーマンスや保守性を考慮したコーディング手法について解説します。
JavaScriptを使ったレスポンシブデザインの基本として、パフォーマンスの確保、レスポンシブデザインに対応する、プログラムの保守性の確保の3点を取り上げ、それぞれについて具体的な説明やコード例を示します。

モバイルファーストの設計において、JavaScrptでレスポンシブデザインを実装する際には、以下のポイントに注意する必要があります。

①パフォーマンスの確保
②レスポンシブデザインに対応する
③プログラムの保守性の確保

①パフォーマンスの確保
Javascripは処理が重たく、モバイル端末ではパフォーマンスの問題が起こりやすくなります。そのため、処理の軽量化や、必要な処理だけを実行するようにするなど、パフォーマンスの確保に注意が必要です。
②レスポンシプデザインに対応する
JavaScriptでは、画面サイズに応じたレイアウトの変更や、ユーザーの端末環境に応じた処理の実行を行うことができます。そのため、レスポンシプデザインに対応するために、画面サイズの判定や条件分岐などを行う必要があります。
③プログラムの保守性の確保
JavaScriptはコードの行数が多くなりがちで、保守性の問題が起こりやすい言語です。そのため、可読性の高いコードの書き方や、コメントの活用、関数の分割など、保守性の確保に注意が必要です。

具体例
①の具体例

JavaScriptの最適化
Javascriptのコードを最適化することで、処理の軽量化を図ることができます。具体的には、以下のような方法があります。
・変数のスコープを限定する
・変数や関数の名前を短くする（ただし、可読性が悪くならないように注意が必要）
・ループ処理を極力避ける
・関数の再帰呼び出しを避ける
・関数内で同じ処理を何度も繰り返さないようにする
レスポンシブデザインの実装
モバイル端末において、画面サイズが小さいためにレイアウトが前れたり、表示が崩れたりすることがあります。この問題を解決するために、レスポンシブデザインを実装することが重要です。具体的には、以下のような方法があります。
・メディアクエリを使用して、画面サイズに応じたスタイルを適用する
・画像のサイズを自動で調整する
不要な処理の削除
JavaScriptによる処理が重い場合、不要な処理を削除することでパフォーマンスを向上させることができます。具体的には、以下のような方法があります。
・ページ読み込み時に必要のない処理を遅延させる
・不要なライプラリやプラグインを削除する
・キャッシュを使用して、同じ処理を何度も行わないようにする

以上のような処理を取り入れることで、Javascrpiによる処理の重さを軽減し、モバイル端末でも
快適なパフォーマンスを実現することができます。

②の具体例
1.画面サイズの判定
レスポンシプデザインでは、画面サイズに応じてレイアウトを変更する必要があります。そのため、画面サイズを判定する処量を行う必要があります。具体的には、以下のような方法があります。
・window.innerwidth プロパティを使用して、画面幅を取得する
・matchMediaメソッドを使用して、メディアクエリにマッチするかどうかを判定する
・レイアウトをシンプルにする

【window.innerwidthを用いて画面幅を取得し、取得した幅に応じて処理を実行するコード例】

function checkWidth() {
    var windowWidth = window.innerWidth;

    if (windowWidth < 600) {
        //画面幅が609px以下の場合の処理
    ) else if (windowWidth < 1200) (
        //画面幅が1200px以下の場合の処理
    } else
        //画面幅が1290px以上の場合の処理
    }
}

window.addEventListener('resize', checkWidth);

2.条件分岐の実装
画面サイズに応じたレイアウトの変更や、ユーザーの端末環境に応じた処理の実行には、条件分岐が必要です。具体的には、以下のような方法があります。
・if文を使用して、条件分岐を実装する
・switch文を使用して、条件分岐を実装する
・三項演算子(条件演算子)を使用して、簡潔な条件分岐を実装するかどうかを判定する

【三項演算子(条件演算子)を使用したコード例】

var num = 12;
var result = num >= 10 ? "numは10より大きい":"numは10より小さい"
console.log(result);

3.イベントの取得
レスポンシプデザインでは、ユーザーの端末環境に応じた処理の実行が必要な場合があります。そのため、ユーザーの操作に対するイベントの取得が必要です。具体的には、以下のような方法があります。
・addEventListenerメソッドを使用して、クリックやスクロールなどのイベントを取得する
・touchstartやtouchendなど、タッチ操作に対するイベントを取得する

画面サイズの判定や条件分岐を実装することで、画面サイズに応じたレイアウトの変更や、ユーザーの端末環境に応じた処理の実行を行うことができます。また、イベントの取得により、ユーザーの操作に応じた処理を実行することができます。

③の具体例

可読性の高いコードの書き方
コードの可読性を高めることで、保守性を向上させることができます。具体的には、以下のような方法があります。
・インデントを揃える
・変数や関数の名前をわかりやすくする
・コードのブロックを{}で囲む
・コメントを付ける（後述）
コメントの活用
コードの中には、何をしているかわかりにくい部分もあります。そのため、コメントを活用することで、コードの意図を明確にすることができます。具体的には、以下のような方法があります。
・コードの前に、何をする関数か、どのような引数を受け取るかを説明する
・コードの中に、なぜその処理をする必要があるか、どのようなデータを扱っているかを説明する
・コードの後に、何を返すのか、何を更新したのかを説明する

3.関数の分割
1つの関数が長くなりすぎると、コードの保守性が低下します。そのため、関数を複数の小さな関数に分割することで、コードを見やすくすることができます。具体的には、以下のような方法があります。
・関数の役割を明確にする
・1つの関数で何度も同じ処理をしないようにする
・関数の引数と戻り値を明確にする

コードの可読性を高め、コメントを活用し、関数を分割することでコードの理解が容易になり、保守性を確保することができます。