Materializeフレームワークを使用したWebアプリケーション開発において、CSSやJavaScriptのリソースを効率的に管理し、ページの読み込み速度を向上させる方法について説明します。この記事では、SassによるカスタマイズとJavaScriptコンポーネントの分離を通じて、必要なコンポーネントのみをロードする方法を紹介します。

モジュール化設計の利点とプロジェクト構造

Materializeは、プロジェクトに応じたコンポーネントの選択的な導入が可能で、リソースサイズを削減できます。以下に代表的なディレクトリ構成を示します：

materialize/
├── css/                 
├── js/                  
│   ├── button.js        
│   ├── card.js          
│   └── ...
└── scss/                
    ├── materialize.scss 
    └── components/      
        ├── _button.scss
        ├── _card.scss
        └── ...

Sassを利用したスタイルのモジュール化

Sassを利用して、必要なコンポーネントのみをインポートすることで、最終的なCSSファイルを最小限に抑えることができます。

1. まず、Sassのエントリポイントをコピーして、カスタム設定を作成します。
2. 不要なコンポーネントのインポート行をコメントアウトします。

// 必要な基本コンポーネント
@import "components/base";
@import "components/grid";

// 按需引入のコンポーネント
@import "components/button";  // ボタンコンポーネント
@import "components/card";    // カードコンポーネント
// @import "components/carousel"; // 不要なコンポーネント

JavaScriptコンポーネントの按需ロード

JavaScriptコンポーネントも同様に、必要な部分のみをHTMLまたはビルドツールを使ってロードします。

例：Webpackを使用した按需ロード

import './js/core';
import './js/global';

// 特定の機能コンポーネント
import './js/button';
import './js/card';

document.addEventListener('DOMContentLoaded', () => {
  M.AutoInit(); // 全てのコンポーネントを自動初期化
});

プロダクション環境での最適化

プロダクション環境向けには、Gruntなどのビルドツールを使用して、CSSやJSの圧縮や画像の最適化を行います。

concat: {
  options: {
    separator: ';\n',
  },
  dist: {
    src: [
      'js/core.js',
      'js/global.js',
      'js/button.js',  // 必要なコンポーネントのみ
      'js/card.js'
    ],
    dest: 'dist/js/materialize.custom.js',
  },
}

実践事例：商品展示ページ

例えば、商品リストページでは、ナビゲーションバー、カード表示、ボタン、波紋効果などが必要です。これらを必要なコンポーネントとしてSassとJavaScriptで設定します。

// Sass設定
@import "components/nav";
@import "components/card";
@import "components/button";
@import "components/waves";

<script src="js/nav.js"></script>
<script src="js/card.js"></script>
<script src="js/button.js"></script>
<script src="js/waves.js"></script>