Reactでポートフォリオサイト作成記録

経緯

フロントエンド開発において主流になった印象のフレームワークReact.js。
業務でも使えるようになりたいので、学習がてら実際に練習サイトを作成してみようと思いました。

Reactについての私の理解度

JavaScriptはES6の仕様を含めた基本構文は抑えている程度。
レンダリング、props、stateについての基本をざっくり学んだだけ。Progateで言うと無料レッスンをすべて終えた程度です。

使用技術など

Vite, React, TypeScript, Tailwind CSS

やったことと解説

1. 環境作成

以前、その快適さに慣れてしまっていたViteを使用しました。
初期構築のコマンドでも簡単にReactやTypeScriptを導入して使えます。

こちらのページを参考にさせていただきました。
ESLint周りはいつも複雑に思うので、分かりやすくて書かれていて助かります。
zenn.dev

2. コンポーネント分け

ViteのReact環境は、初期状態ではロゴだけですので、コーディングしていきます。
HTMLへ変換される大本のファイルApp.tsxです。

そして、ヘッダーやフッターは、componentsとして別ファイルで管理するのが一般的らしく、扱いやすくもあるので、
以下のようにcomponentsフォルダを作って、移動させます。

ディレクトリ例）
react/
　└src/
　　├ components/
　　　├ Header.tsx
　　　└ Footer.tsx
　　├ App.tsx
　　├ index.css
　　├ main.tsx
　　（省略）

そして、App.tsxにて、Classコンポーネントとしてエクスポートしたコードをインポートします。

return (
    <div className="App">
      <Header />
　　（中略）      
      <Footer />
    </div>
  );

3. スタイリング

Tailwind.cssを使って、よしなにマークアップ＆スタイルをしていきます。

4. Stateを使ったコンポーネント実装

Reactにおいて状態を管理する役目の「State」を使った何かしら動きがあるコンポーネントを実装します。

【いいねボタンの解説】

react\src\components\LikeButton.tsx

import React, { useState } from 'react';

const LikeButton = () => {
  const [likes, setLikes] = useState(99);
  const [isClicked, setIsClicked] = useState(false);

  // stateを増減させる関数
  const handleClick = () => {
    if (isClicked) {
      setLikes(likes - 1);
    } else {
      setLikes(likes + 1);
    }
    setIsClicked(!isClicked);
  };

  return (
    <button
      // &&は、インラインifで、isClickedがtrueならlikedが付与される
      className={`rounded-md bg-slate-200 p-1 ${isClicked && 'liked'}`}
      onClick={handleClick}
    >
      <span className="">{`いいね | ${likes}`}</span>
    </button>
  );
};

export default LikeButton;

基本的な構文なので、かいつまんで解説します。

useStateの定義について

構文は以下です。

const [state, setState] = useState(initialState);

setStateはstateを更新する関数であり、
initialStateはstateの初期値が格納されている箇所になります。

式は、分割代入（ https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment ）というものが使われています。

今回の場合、
1つ目のlikesというstateには、初期値99が入る定数を、
2つ目のisClickedというstateには、初期値falseが入る定数を宣言しています。

イベントについて

onClickで関数handleClickを起こしています。
関数の中身は、
真偽値（true or false）を管理しているstate「isClicked」を判定し、
falseなら-1を、trueなら+1を、数字を管理しているstate「likes」に対してsetLikes()にて更新します。
最後に、state「isClicked」に対してsetIsClicked()にて更新します。

class付与について

ボタン押下時、状態変化のclassを付与するため、
「論理 && 演算子によるインラインIf」という仕組みを使いシンプルに記述しています。

<button
  className={` ${isClicked && 'liked'}`}
>
</button>

上記の場合、 isclicked がtrue なら、likedが付与されます。

参考： https://ja.reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator

【画像検索ギャラリーの解説】

引用元のサイト様にかなり詳しく書いてあるので、そちらを参照ください。

https://www.webcreatorbox.com/tech/react-unsplash-api

簡単に説明すると、
inputに入力した文字列がstateに入るようになっていて、
その上で「検索」ボタンを押すと、
事前にサイト登録したUnsplashのAPIへ、axiosでURLのリクエストを叩き、成功したら画像データなどを取ってこれます。
そのデータを、map()により、入力文字列に応じた検索でヒットした画像の入ったdivタグが並ぶように処理されます。

余談ですが、
Form.tsxとResults.tsxの各関数の引数に指定する型が分からなくて、anyにせざるを得なかったので消化不良です。

完成物

github.com

終わりに

まだ基礎中の基礎部分しか触れていないので、もうちょっと深掘りしたいところですが、やはりJavaScriptの基礎を固めていないと難しいですね（TypeScriptも先に理解した方が良さげ）。
次回は、これもReact重要な機能である、useEffectについて実装した上でブログにまとめしたいです。
Reactの利点として、コンポーネントの管理のしやすさ、レンダリングの速さ、JSXにおけるTailwind CSSとの相性の良さなどを実感しました。