こんにちは、広野です。
今回は、私が React・MUI 学習時に参考にしたフリーの React コードテンプレートを紹介します。
WEB サイト
ここにある、Blog というサンプルが良かったです。ブログサイト用途に限らず、汎用的に使えるテクニックが盛り込まれています。また、バックエンドリソースが一切不要な構成で作られているので、とりあえずフロントエンドに集中して学びたい方にはうってつけです。
サンプルコードは JavaScript 版と TypeScript 版が用意されています。
何を学べるか
- レスポンシブデザインの画面設計
- ヘッダー、メイン、フッター、サイドバーといった標準的な画面設計
- コンポーネント分割、コンポーネント間のパラメータ渡し
- 画像とテキストの重ね合わせ（バナーコンポーネント）
- カード形式のボタン、リンクの作り方
- マークダウンを使った画面コンポーネント
レスポンシブデザインの画面設計
React はモダン WEB アプリケーション開発に向いており、つまりモバイルデバイスとの相性が良いです。MUI と組み合わせれば、PC、スマホ、タブレット、あらゆるデバイスに自動的に最適な画面デザインになるよう簡単に書くことができます。レスポンシブデザインはアクセス数増や満足度向上に欠かせないと考えています。
テンプレートでは、Grid という MUI モジュールを使って設計されています。どう書けばこのような可変デザインになるのか、テクニックを盗み取ることができます。
ヘッダー、メイン、フッター、サイドバーといった標準的な画面設計
一般的に、WEB サイトはサイト内で統一された画面設計をしていることが多いです。画面によっては特別な設計ももちろんありますが。
テンプレートでは、上記標準的な設計をしており、それぞれがコンポーネント化されてブラウザ画面内に適切に配置されるようになっています。配置のし方をどう書けばよいのか、学ぶことができます。
コンポーネント分割、コンポーネント間のパラメータ渡し
React では上述しましたが画面をコンポーネントという単位で分割して配置します。それによって、任意のコンポーネント単位でコードの再利用が非常にしやすくなっています。コード量が減少し、重複したコードが減少することで修正漏れも少なくなります。データベースで言えばデータの正規化みたいな感じでしょうか。
そんなコンポーネントの分割をどのようにするのか、画面設計とセットでテクニックを盗み取ることができます。
また、コンポーネントは基本コンポーネント内でデータをクローズドに扱いますので、他のコンポーネントのデータが必要なときはデータをパラメータとして渡してもらわねばなりません。そのパラメータ渡しの手法を学ぶことができます。
興味深かったのは、パラメータ渡し時のデータ型チェックです。prop-types というモジュールを使用して、コンポーネント間のパラメータ渡し時に型をチェックさせることができるようです。その手法も学べます。
画像とテキストの重ね合わせ（バナーコンポーネント）
テンプレートでは、バナーの部分でテクニックが使われています。
バナー画像に任意のテキストを重ね合わせ、かつ画面サイズに応じて画像のフォーカスも変わっていくというテクニックも盛り込んで、サイトのトップ画面を飾っています。
この部分はコードが非常に難しく、私は腹落ちさせられていません。そのまんまパクらせて頂いています。
カード形式のボタン、リンクの作り方
いわゆるリンクと言うと、a href= のタグを想像すると思います。
テンプレートでは、画像と組み合わせたカード形式のリンクがあり、単純な a タグのリンクよりもおしゃれです。MUI の Card モジュールが使われており、この書き方は非常に参考になります。オプションをいじれば任意のデザインに簡単に変えられます。私の MUI お気に入りパーツのひとつです。
MUI では、1つのタグにもう1つ別のタグの機能を統合させる機能があります。例えば Button タグに a タグの機能を統合させると、Button タグに a タグのオプションを書くことができます。コードを書く上でタグの階層構造が少なくなり、コード量が少なくなるので私は多用しています。テンプレートでも Card タグでそのような機能が使われているので、是非見つけて下さい。
マークダウンを使った画面コンポーネント
マークダウンとは、HTML をベタに書いてテキストを装飾するのではなく、よく使う装飾をより簡易な表現で実現できる記法です。標準の記法では表現力が乏しいため、GFM (GitHub Flavored Markdown) という記法がよく使われます。
マークダウン記法を紹介しているブログサイトはいっぱいあります。記法については公式よりブログの方が参考になると思います。
マークダウン記法で書いたファイルは .md の拡張子で保存し、一般的な開発ツールでは装飾された状態で画面表示することができます。そのため開発者がコードのドキュメント作成をするのによく使われています。開発ツールを主戦場としている開発者であればマークダウンを使うのは便利なのですが、WEB サイトやブラウザでは md ファイルそのままでは装飾された状態で表示できず、HTML への変換処理をかます必要があります。
そんな変換処理をしてくれるのが markdown-to-jsx という React モジュールです。テンプレートでは、それを使って md ファイルを変換している箇所があります。
これって何が良いの？と言うと、静的コンテンツのメンテが非常に楽になるんですね。簡単なテキストファイル (md) でコンテンツを更新、配置さえすれば markdown-to-jsx が自動で HTML に変換して表示してくれるのです。面倒な HTML を書く必要がなく、うまく環境を作れば静的コンテンツを React コードにベタ書きすることなく（＝ビルド、デプロイ不要）コンテンツをアップデートできるのです。
markdown-to-jsx では変換後の HTML を属性含めカスタマイズできます。WEB サイトの標準デザインを決めて設定さえしておけばその通り出力されるので、サイトデザインの強制的な統一も図れます。
私がこの手法をテンプレートを見つけたとき、衝撃を受けました。これは使わない手はない！とすぐに採用し、お蔭でサイトの更新がかなり楽になりました。
自分の開発環境で動かすときは
テンプレートサイトからコードをダウンロードします。
package.json がないので、create-react-app で環境をセットアップした後は以下の必要モジュールをインストールしましょう。（npm を使用した例）
npm install --save @mui/material @mui/icons-material @emotion/react @emotion/styled markdown-to-jsx prop-types
まとめ
いかがでしたでしょうか？
React を使った一般的な WEB アプリ開発に必要な要素が、少ないコード量でうまくまとめられているので大変勉強になりました。今でもときどき「あれどうやって書いてたっけ？」と見直すときがあります。
本記事が皆様のお役に立てれば幸いです。