今日はサイトの雛形を作っている時に考えた小ネタをご紹介します。

問題

Next.jsは開発着手までの時間の短さから、本番のサイトだけでなく モックアップやサンプルプロジェクトの開発にも頻繁に利用されていると思います。

その際に、また実データがないブログにデータを埋め込んでいかなければいけないことが度々起こってきます。

具体的には以下のような横4列のグリッドレイアウト の時などは、同じパターンのコンテンツを並べなければいけません。

サンプルで使用している技術

なお、上記のCodepen のサンプルでは、

• react
• react-dom
• tailwindcss

を使用していますが、Next.js でも、JSX の部分をコピーすれば問題なく使えます。(Next.jsの最新版ではtailwindcssがビルトインされています。)

解決策

サンプルコードを連続して出すループを組む...どうやって？

モックアップの開発では環境を整えている時間も勿体無い、といったケースはよくあると思います。個人開発でも同様です。

とはいえ、初っ端からコピペコピペではさすがに開発効率が悪くなりすぎるとは感じます。ソースコードの見栄えも良くない感じになり、結局VSCodeやXcodeなどのIDEを使って置換作業を繰り返しているなあと 感じることもしばしば。

そこで、今回は以下の方針で実装します。

できあがり

具体的には、先ほど例示したソースコードを、以下のように変えていきます。

// 繰り返したいコンポーネント。
// もちろん import { SampleComponent } from "path/to/SampleComponent" の形で外部呼び出しできる。
const SampleComponent = () => {
  return (
    <a href="https://moldspoon.jp/blog">
      <div className="p-2 shadow hover:shadow-xl">
        <div className="w-full h-20 p-8 text-center bg-red-500 text-white text-sm block mb-5 ">
          画像
        </div>
        <h3 className="text-sm font-bold mb-2">
          記事のタイトルがここに入ります。
        </h3>
        <p className="text-xs mb-5">2023.10.11</p>
      </div>
    </a>
  );
};

// 呼び出し元のコンポーネント
function App() {
  return (
    <div className="w-full p-4">
      <div className="grid grid-cols-4 gap-4">
        {Array.from({ length: 12 },(_, index) => (
            <div key={index}>
              <SampleComponent />
            </div>
        ))}
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("app"));

全体的なコード量としてはそこまで変わらないように見えますが、子コンポーネントを 別ファイルとして切り出すと、2行加えるだけで繰り返し処理が書けるのがお分かりいただけるかと思います。

CodePenで実行すると以下のようになります。

こうした処理を積極的に使って、プロジェクト早期からの保守性の確保と、開発スピードアップを両立させたいと思っています！

この記事が何かのお役に立てれば幸いです。
最後までお読みいただきありがとうございました！