初めてReact使ってみました。

めちゃくちゃわかりやすい記事を見つけました→こちら
この記事は上記サイトを読んだ後、復習or辞書的な役割で使っていこうと思います。

知らない単語一覧

React

そもそもですが。jsみたいにデータを表示するもの。詳しく

DOM

「Document Object Model」の略。プログラムからHTMLやXMLを自由に操作するための仕組み。

CDN

「Content Delivery Network」の略。同一のコンテンツを、 多くの配布先、多くのユーザーの端末に効率的に配布するために使われる仕組み。

babel

新しい機能を使って書いた JavaScript のコードを、以前のバージョンの書き方に変換してくれるツール。

jsx

JavaScriptに変換される拡張子

defer

スクリプトの読み込みを非同期で読み込む方法の一つ.
deferにするとscriptが書かれた順に実行される。また、確実にDOM操作ができる。詳しく

コンポーネント

ReactではUI表示部品の事を言う。コンポーネントは最終的にHTML要素として表示される。
コンポーネントはjsのclassや関数で下記のように定義される。

main(冒頭サイトのコピペです).jsx

function App() {
  return <div>Hello React!</div>;
}

const target = document.querySelector('#app');
ReactDOM.render(<App/>, target);

document.querySelector

JavaScriptから任意のHTML要素を検出・取得することができるメソッド。
この例ではid="app"のものを取得している。

ReactDOM.render

1つ目の引数に出力する出力するコンポーネント、2つ目に出力先のelementを指定。

関数コンポーネントについて

Tweet(冒頭サイトのコピペ).jsx

function Tweet(props) {
  return <div>{props.content}</div>;
}

関数コンポーネントは引数をひとつ受け取る。
引数をpropsとして受け取り、その中身を表示する。
htmlの自作タグを作成しているイメージ？
別ファイルでTweetタグを使ってfunction Tweetを呼び出せる。

Hooks

冒頭記事ではいいね機能実装のために説明されていた。
関数に状態を保持させるためにReactに備えられた解決策。
コンポーネントごとに専用の変数ストレージができるような機能。

const [value, setValue] = React.useState('デフォルト値');
setValue('新しい値！');

関数の中にこれをつけるだけらしいです。

コールバック関数

関数に渡される関数
(onClick時の挙動に関しては後日記載します)

下記コードからわからない部分をまとめる

これもパクリ.jsx

function TweetInput(props) {
  // 要素にアクセスするための参照を取得
  // ref.currentのデフォルト値はnullにしておく
  // 参照したい要素にJSXの方でこのrefをセットする
  const textareaRef = React.useRef(null);

  // Tweetボタンクリック時のコールバック関数を作って保存
  // textareaRef.currentかprops.addTweetが更新されたら
  // コールバック関数を作り直し
  const sendTweet = React.useCallback(() => {
    // refのcurrentに入っている値がDOM
    // 初期値はnull（上で指定した）で、
    // 実際にHTML側に描画されると値が入ります
    if(textareaRef.current) {
      props.addTweet({
        id: new Date().getTime(), // IDはユニークな値にする
        icon: '☠️', // このあたりの値は好きにしてください
        displayName: 'ミスター死',
        accountName: 'mrdeath',
        content: textareaRef.current.value
      });
    }
  }, [textareaRef.current, props.addTweet]);

  return (
    <div>
      <div><textarea className="tweet-textarea" ref={textareaRef}></textarea></div>
      <div><button onClick={sendTweet} className="send-tweet">Tweet</button></div>
    </div>
  );
}

React.useRef

書き換え可能な値を .current プロパティ内に保持することができる「箱」のようなもの

React.useCallback

メモ化されたコールバックを返す。メモ化はキャッシュみたいなもの。

冒頭記事の大まかな処理の流れ

それぞれのファイルの役割

index.htmlでjsxファイルを読み込む、読み込んだ順に処理していく。
Tweet.jsxでTweet関数を定義し、与えられた内容を基にTweetを作成。
Timeline.jsxでtweetが格納された配列を取得し、keyを基に一つずつ表示していく
TweetInput.jsxでtweetを取得

流れ

main.jsxで、既存のツイートを表示したのち、addTweet関数を呼び出し新しいツイートを取得。その際にinputフォーマットを表示、入力されたものをTweetInput.jsxで配列に格納。Timeline.jsxでTweet.jsxを呼び出し値を表示していく。

こんな感じだと思いました。

おまけ

おまけと言いつつ自分にとっての本題です。せっかくなので孤独った―の一部を変えたり追加機能つけたりし、理解してるかな？の確認をしていこうと思います。

リツイート機能を付けてみた

いいね機能をそのまま持ってきて作成できました。

Tweet.jsx

function Tweet(props) {
  // Reactからこのコンポーネントの
  // like値と、likeの値をセットするための関数を取り出す
  // デフォルト値はfalseにする
  const [liked, setLike] = React.useState(false);
  const toggleLike = React.useCallback(() => setLike((prev) => !prev), [setLike]);
  // おまけ！！リツイート機能を付けてみた
  const [retweeted, setRetweet] = React.useState(false);
  const toggleRetweet = React.useCallback(() => setRetweet((prev) => !prev), [setRetweet]);


  return (
    <div className="tweet">
      <div className="icon-container">{props.icon}</div>
      <div className="body-container">
        <div className="status-display">
          <span className="display-name">{props.displayName}</span>
          <span className="account-name">@{props.accountName}</span>
        </div>
        <div className="content">{props.content}</div>
        <div className="status-action">
          <span onClick={toggleLike}>{liked ? '❤️' : '♡'}</span>
        </div>
        <div className="status-action">
          <span onClick={toggleRetweet}>{retweeted ? '●️' : '○'}</span>
        </div>
      </div>
    </div>
  );
}

ちょっと簡単すぎましたね。続きはまた今度

追記

Reactってどんなものなの？ってところから入りましたが、どのサイト見ても「いろいろ入れてね」から始まるのが面倒なので、冒頭のサイトをなぞってみました。

よかったこと

・reactは何ができるのか、どう動くのか、という浅い部分はふんわりわかってきたと思います。
・面倒なことが一切なく、すぐに表示されたのでやってて楽しかったです。

よくなかったこと

・記事で書かれていましたが、実践的ではないようですね。実務経験ないから知らんけどって感じでしたが。
・Reactだけで実装しているサイトがほかになかったので、機能追加しようとしたときにこの環境でできることなのかどうか判断が出来ませんでした(フロントエンドょゎょゎな自分のせいですが)。

終わりに

めちゃくちゃ楽しかったです。バックエンドでやっていた処理がフロントでできるのめちゃすごいですね(コナミ)。
なんとなくいじれたので、次は実際の現場で使われるような環境を整えて再チャレンジしたいと思います。