React とNext.jsのざっくり学習したことまとめ

Reactとは　facebookが開発元のUIを作ることに特化したJavaScriptライブラリ。主に使われているアプリとしては

・Facebook
・Instagram
・Yahoo!
・Airbnb
・Netflix

　

Reactの特徴

仮想DOM

Reactは仮想DOMを使用することで、高速なレンダリングを実現している。DOMとはHTMLやXMLなどの文書をプログラムを通じて、直接変更できるインターフェイスのこと。仮想DOMとはDOMをJavaScriptのオブジェクトとして表現しているもの。

jsx

jsxとはJavaScriptの拡張構文。JavaScript内にHTMLのようなコードを書けるようにしたもの。

ReactHookとは

クラスでできたことを関数コンポーネントで表現しようとしてできたもの。クラスを使わないようにできる。

コンポーネントとは

システムを構成する部品のこと。下のコードはボタンを出力する関数を部品として、App関数にボタンを挿入している。たとえば記事の編集ボタンや削除ボタン等は、何度も同じ記述を繰り返すよりも部品化して使いまわした方が良い。

import logo from './logo.svg';
import './App.css';

const name = 'libero'
const Number = 1+1

function App() {
  return (
    <div className="App">
      <Button/>
    </div>
  );
}

function Button (){
  return(
    <button>ボタン</button>
  )
}

export default App;

ボタン関数のようなjsxを返り値としてもつJavaScript関数なので関数コンポーネントと呼ばれている。

propsとは

自分で調整できるコントローラーのつまみのようなもの

import logo from './logo.svg';
import './App.css';

const name = 'libero'
const Number = 1+1

function App() {
  return (
    <div className="App">
      <Button btn_txt = "クリックしてね" />
    </div>
  );
}

function Button (props){
  return(
    <button>{props.btn_txt}</button>
  )
}

export default App;

コンポーネントにはpropsというものを渡して、それを関数内で使うことができる。

useStateとは

ReactHookのうちの1つ。

useStateは、関数コンポーネントでstateを管理（stateの保持と更新）するためのReactフックであり、最も利用されるフック。

stateとはコンポーネントが内部で保持する「状態」のことで、画面上に表示されるデータ等、アプリケーションが保持している状態を指しています。stateはpropsと違い後から変更することができる。

**useStateは、関数コンポーネントのstateを保持したり、更新したりするためのフック。**数あるReact Hooksの機能の中でも、特に頻繁に利用される。

stateとは、フォームに入力されたデータなど、アプリケーションが保持している状態のことです。useStateは次のような形で記述される。

const [stateの変数, stateを更新する関数] = useState(stateの初期値)

useStateが必要となる場面は、インタラクティブにやり取りされる値を管理したい時です。典型的な例として、入力フォームを実装する場合が挙げられる。

import React, {useState} from 'react';
import './App.css';

function App() {

  const [count, setCount] = useState(0)

  return (
    <div className="App">
      <p>カウント : {count}</p>
      <Button btn_click = {() => {setCount(count+1)}} btn_txt = "1を足す" />
      <Button btn_click = {() => {setCount(count-1)}} btn_txt = "1を引く"/>
    </div>
  );
}

function Button (props){
  return(
    <button onClick={props.btn_click}> {props.btn_txt}</button>
  )
}

export default App;

上記の書き方はあまり推奨されない書き方です。なぜなら純枠関数ではないから。

純枠関数とは• 引数が同じ場合、常に同じ結果を返す（参照透過性とも言います）もの。

countが定義されているが、このcountの値によって返ってきた値が変わってしまう。

内部でどのような処理を行うかはコードの記述者が任意に決めることができるため、引数以外の何らかの条件を返り値の算出に反映させたり、返り値を求めるために必要な処理以外の挙動が実装されることもある。関数内の処理が関数外に影響を与えることを「副作用」（side effect）という。

モジュールの導入とは

JavaScriptの機能で別ファイルにあるリソースをインポートして利用できる。

import React from 'react'

function Button (props){
  return(
    <button onClick={props.btn_click}> {props.btn_txt}</button>
  )
}

export default Button

import React, {useState} from 'react';
import './App.css';
import Button from './Button';

function App() {

  const [count, setCount] = useState(0)

  return (
    <div className="App">
      <p>カウント : {count}</p>
      <Button 
      btn_click = {() => {setCount(count+1)}}
      btn_txt = "1を足す" />
      <Button
      btn_click = {() => {setCount(count-1)}} 
      btn_txt = "1を引く"/>
    </div>
  );
}

export default App;

このように分割してソースを管理することで何度も同じコードを書かなくて済むようになります。

useEffectとは

関数の実行をレンダリング後まで遅らせる。例えばuseStateの第２引数に更新関数（setCount）を作って実行した後に、レンダリングというDOMの書き換えが生じる。そのレンダリングが終わった後に副次的に起こしたい何か処理を書いておくとそれが実行される。活用例としてDOMの書き換え、変数代入、API通信等UI以外の処理がある。

import { useEffect } from 'react'
import './App.css';

function App () {
  useEffect(() => {
    console.log("レンダリング後に実行されるよ！")
  })
  return(
    <div className='App'>
      
    </div>
  )
}

export default App;

呼び出すタイミングは主に

毎回のレンダリングの時

function App () {
  useEffect(() => {
    console.log("レンダリング後に実行されるよ！")
  })

初回レンダリングの時、

function App () {
  useEffect(() => {
    console.log("レンダリング後に実行されるよ！")
  },[ ])

設定した値が変化したとき。

function App () {
  useEffect(() => {
    console.log(name + "さんこんにちは！")
  },[ name ])

Reactの使いどころ。

• Reactはページ数が少ない小規模なwebサイトで使われる。
• クライアント側でJavaScriptを読み込み事足りる。

Next.jsとは

• Reactのフレームワーク
• SEO対策になる。
• プリレンダリングできる。（SSG（静的生成）、SSR（サーバーサイドレンダリング））
• ページの軽量化

Next.jsの使いどころ

• 大規模なwebサイト。
• ユーザーのリクエスト毎にサーバー側でレンダリングして高速に処理。
• 直感的なルーティング設計ができる。
• APIエンドポイント設計もできる。

SSGとは

• Static Site Generator（静的生成）の略。ビルド時にAPIからもってきた情報をもとにすべてレンダリングする。クライアント側からリクエストされたときにはすでにデータが生成されているので、初回読み込み時に高速に表示できる。
• 変更が少ないページに利用される。（記事詳細ページなど）

SSRとは

• Server Side Rendering(サーバーサイドレンダリング)の略
• クライアントがサーバー側にリクエストしたときにサーバー側でHTMLをプリレンダリングする。
• 変更が多いページに利用される（記事一覧ページ等）

ISRとは

• Incremental Static regenarationの略
• SSGとSSRの中間みたいなもの
• クライアントがサーバー側にリクエストを送るとキャッシュを生成する。すぐ取り出したいデータは近いところにおいて取りやすくして、あまり使われないデータは遠くにおいておくようなイメージ
• リバリデイトで再ビルドを60秒間隔で行うこともできる。

ざっくりNext.js12と13の違い

• Routing設定がAPPディレクトリになった。
• fetch Web API が拡張された。
• next dev - -turboでひな型を作る時間が短縮。