自己紹介ページをReact,Next.js,Tailwind CSSで作成してみた

ランディングページで苦労したこと

今回企業さんの課題で、以下ルールでランディングページを作成する課題があったので挑戦してみました。
12月からJavascriptの勉強を始めた初学者なので、
作成までの学習方法や躓いた点など初学者中身に共有できたらと思います！

プログラミング言語： JavaScript
UIライブラリ：　React
フレームワーク：　Next.js
CSS:Tailwind CSS

1. プログラムの学習方法

ルールに記載したJavaScript,React,Next.jsそしてTailwind CSSの学習方法についてまずどうしたかを紹介します。

まず何をするにも基本的にこちらの知識がないと何もできないですよね。。
自分が効率的！と思った動画や参照サイトについて説明します。

JavaScript

JavaScriptは、王道のドットインストールで学習しました！

React

Reactは、Webサイト上のUIを効率よく開発するために作られたUIライブラリだそうです。
今注目のUIライブラリだとのことでモチベーションが上がります

詳しくはこちらのサイトに説明が載っています。

私はじゃけぇさんのUdemyの動画をみて学習しました。
JavaScriptの復習もできて、JavascriptとReactの比較もできてかなりおすすめです！

Next.js

Nextjsは、JavaScriptライブラリであるReact開発におけるフレームワークだそうです。
詳しい説明はこちらのサイトがわかりやすいです。

私は、やはりNext.js公式サイトの説明が一番シンプルで、使い方を理解するのによかったです。

ただ、これだけだと実践で使うのは厳しかったのでこちらのUdemy動画とYoutube動画をみて学習しました！

また、Udemy動画では、Tailwind CSSの使い方についても説明しているのでとてもコスパのいい動画です

2.躓いた点

ランディングページを作る上で、機能的な実装がないので、最初のほうはtaillwindCSSのチートシートをみながらガツガツ作成を進められました。
今回特に躓いて、自分でgoogleで調べたり考えたところを中心的に共有します。

-全体のバックグラウンドイメージ

私が今回作成したランディングページは、
画像と画像が重なり合う部分（スキルの青波部分）があるのですがここの実装につまずきました。

解決方法として、
ページ全体のレイアウトに対して、
「重なる部分が上にきてほしい画像」→「重なる部分が下にくる画像」の順にバックグラウンドイメージを指定しました。

いきなりtailwindでの実装方法がわからなかったので、まずcssで以下のようにスタイルを当ててみて、自分の想定通りになるか確認してみました。

.background {
  //背景画像を指定（「重なる部分が上にきてほしい画像」→「重なる部分が下にくる画像」の順）
  background-image: url(/bg-skills.png), url(/bg-about.png), url(/bg-future.png);
  background-repeat: no-repeat, no-repeat, no-repeat;
  //背景画像の位置を指定
  background-position: 0px 400px, 0px -40px, 0px bottom;
  //背景画像のサイズを調整
  background-size: 100% 33%, 100% auto, 100% auto;
}

【参考にしたサイト】
・CSSで背景画像(background)を複数指定する方法
・CSSで背景画像を複数重ねて表示する方法

背景画像が想定通りに適用されたことが確認できたので、cssからtailwindに変えていきます。
cssで利用している以下の要素について、tailwind.config.jsでのカスタマイズ方法と適応方法を公式ページで確認しました。

・background-image
・background-repeat
・background-position
・background-size

cssで書いた設定値をそれぞれの要素に対して、tailwindの記法に変換してtailwind.configに書き出していきます。私は、携帯画像とデスクトップでのレスポンシブ対応をしたかったので、携帯版とデスクトップ版でスタイルを分けて記載しています。

tailwind.config.js

module.exports = {
  theme: {
    screens: {
      'mobile': {'max': '894px'},
      'desktop': {'min': '895px'},
    },
    backgroundImage: {
      'img': "url('/bg-skills.png'), url('/bg-about.png'), url('/bg-future.png')",
      'img-mobile': "url('/bg-skills.png'), url('/bg-future.png')",
    },
    backgroundPosition: {
      'position': '0px 500px, 0px top, 0px 1400px',
      'position-mobile': '0px 1310px, 0px bottom'
    },
    backgroundSize: {
      'size': '100% 33%, 100% auto, 100% 50%',
      'size-mobile': '100% 25%, 100% auto'
    }
  },
};

3. プラスで試してみた点

ランディングページの作成が一通り終わって、コードが冗長化していることが気になりました。
例えば、上画像の「私について」を見ると、同じスタイルが3つ並んでいてそれぞれ写真、タイトル、文章だけ違います。
この部分について、コードをスッキリさせたいと思いました。

そこで、同じスタイルを持つオブジェクトに対して、
「jsonファイルから配列を取得して、map処理で値を渡す」ということを今回挑戦してみました！

【実装手順】
１．jsonファイルを用意。

２．渡したい値をオブジェクト毎に書き出して、配列に持たせる。

"about": [
    {
      "category": "趣味",
      "text": "テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト",
      "src": "/about-1.png",
      "width": 180,
      "height": 150
    },
    {
      "category": "好きな食べ物",
      "text": "テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト",
      "src": "/about-2.png",
      "width": 190,
      "height": 150
    },
    {
      "category": "性格",
      "text": "テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト",
      "src": "/about-3.png",
      "width": 200,
      "height": 150
    }
  ],

3.　map処理でjsonファイルから、データを取り込んで出力する。

{items.map((data, index) => (
          <div key={index}>
            <div>
              <Image
                src={data.src}
                alt="about1"
                width={data.width}
                height={data.height}
              />
            </div>
            <p>
              {data.category}
            </p>
            <p>{data.text}</p>
          </div>
        ))}

4. 最後にWebサイトを作ってみた感想

本サイトは２月で一旦完成していたのですが、他アプリの作成やプログラム学習でだいぶ間を空けたあとに見た時に、レスポンシブ対応や背景の指定方法などが気になり再度ブラッシュアップしました。

２月に作成した際は、tailwind初学者にとってとてもいい学習になりましたし、自分の苦手だったcssもおさらいができて、かなり学習コスパがいいと感じました。また、自分なりに工夫してjsonを使うなど気軽に試せた点もよかったです。

６月に改めて見直して、レスポンシブ対応ができていないことや背景画像だけcssで記載していたことが気になり、再度修正を加えました。ここでも、アプリ作成のときには手が回しきれていなかったレスポンシブ対応について、しっかり学び直すことができました。

まだまだWebサイトについては学ぶことが多いので、時間を見つけてはこちらのサイトを参考に、どのようなことに気をつけるべきか勉強を続けていきたいと思います。
Web サイトをリリースする前に必ず確認したいチェックリスト ~ React / Next.js / Tailwind CSS 編 ~