Githubレポートについて👨‍🚀

Introduction🛸#

GitHub は、Git を使用したバージョン管理のソフトウェアソースコードホスティングサービスプラットフォームであり、GitHub 社（以前は Logical Awesome と呼ばれていました）の開発者である Chris Wanstrath、P. J. Hyett、Tom Preston-Werner によって Ruby on Rails で開発されました。2020 年 1 月時点で、GitHub には 4000 万以上の登録ユーザーと 1.9 億以上のリポジトリ（少なくとも 2800 万のオープンソースリポジトリを含む）があり、実際には世界最大のコードホスティングサイトおよびオープンソースコミュニティとなっています。

GitHub は、世界最大のオープンソースコミュニティとして、私のプログラミング学習において非常に重要な存在です。以前は課題を乗り越えるために他の人のコードをコピーするために使用したこともありますが、以前に Puppeteer を使用して GitHub の一部のデータをスクレイピングしようとしました。そのため、自分が試したい React の関数コンポーネントと以前に書いたバックエンドを組み合わせて、人々の GitHub のデータを表示するためのページを作成することにしました。

プロジェクトのリンク：Github Report

NES.css🚀#

NES は 1980 年代後半から 1990 年代初頭に中国に導入された、80 年代の人々が最初に接触したゲーム機で、一般的には「赤白機」と呼ばれています。これは 8 ビットプロセッサを使用したゲーム機であり、NES.css は NES スタイル（8 ビット機）の CSS フレームワークであり、ピクセルスタイルの CSS コンポーネントライブラリです。JavaScript の依存関係はなく、CSS のみを含んでいます。

NES.css が提供するコンポーネントスタイルは私の好みに合っており、いくつかの楽しいピクセルアイコンも提供しています。NES.css ではデフォルトで英字のフォントがピクセルスタイルになっていますが、他の言語もピクセルスタイルにする場合は、フォントをダウンロードする必要があります。

👀詳細な使用方法は公式ドキュメントを参照してください：NES.css

React-spring🌏#

最初からページ全体をスクロールする効果を作りたいと思いました。各ページは 100vh であり、スクロールバーを非表示にし、マウススクロール（モバイルではタッチ）を監視してページを 100vh 上または下にスクロールする方法を実装しました（margin-top を使用して超過部分を非表示にし、transition を設定してアニメーション効果を与えました）。また、スロットル（一定時間内に特定のメソッドを 1 回だけ実行する）を実現するためにタイムスタンプを使用しました。

 function throttle(event, time) {
      let pre = 0;
      return function (...args) {
        if (Date.now() - pre > time) {
          pre = Date.now();
          event.apply(this, args);
        }
      }
 }

効果はありましたが、少し普通すぎると感じました🤨。その後、React-spring のドキュメントを見て Parallax というものを見つけました。Parallax はスクロール可能なコンテナを作成し、ParallaxLayer を使用してコンテンツを含め、オフセットと速度を設定することができます。つまり、視差スクロール（多くの要素が相互に独立してスクロールする）を作成することができます。とても見栄えが良かったので、すぐに採用しました😆。

オンラインで background-attachment（背景画像の位置をビューポート内で固定するか、それを含むブロックと一緒にスクロールするか）や transform（translateZ を設定することで、スクロールの上下距離を異ならせる）を使用して実現する方法を見たことがありますが、React-spring の Parallax は JavaScript を使用して実装されており、スクロールを監視し、リアルタイムで位置を設定しています🤔。

時間があるときに詳しく見る必要があります。ドキュメントはこちら👉：React-spring

React Hook📡#

React の関数コンポーネントを使用しているので、フック関数を避けることはできません。私がよく使ういくつかを紹介します。

useState#

関数コンポーネントに状態を導入するためのフック関数で、この関数は配列を返します。配列の最初の要素は変数であり、2 番目の要素は変数を変更するためのメソッドです。例えば：

// "count"という名前のstate変数を宣言します
const [count, setCount] = useState(0);

useEffect#

useEffect は、componentDidMount、componentDidUpdate、componentWillUnmount の 3 つのライフサイクルメソッドを置き換えるフック関数で、コンポーネントが最初にレンダリングされるときにも useEffect () が実行されます。具体的には✍：

useEffect(
  // componentDidMountと同等
  () => {

    // returnはcomponentWillUnmountと同等
    return () => {

    };
  },
  // 依存リスト、変更時にuseEffect()を実行します（componentDidUpdateと同等）
  []
);

useContext#

useContext () は、コンポーネント間で状態を共有する必要がある場合に使用されます。明示的にプロップスをコンポーネントツリーを介して渡す必要はありません。

const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee"
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222"
  }
};

const ThemeContext = React.createContext(themes.light);

function App() {
  return (
    <ThemeContext.Provider value={themes.dark}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}
// 子コンポーネント
function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}
// 孫コンポーネントまたはそれ以上のネスト
function ThemedButton() {
  const theme = useContext(ThemeContext);
  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      I am styled by theme context!
    </button>
  );
}

useRef#

useRef は、変更可能な ref オブジェクトを返します。その.current プロパティは、渡された引数（initialValue）で初期化されます。

返された ref オブジェクトは、コンポーネントのライフサイクル全体で持続し、クラスのインスタンスプロパティのように任意の可変値を簡単に保存できます。

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const intervalRef = useRef();

  const onButtonClick = () => {
    // `current`は、DOMにマウントされたテキスト入力要素を指します
    inputEl.current.focus();
  };

  useEffect(
    () => {
      const id = setInterval(() => {
        // ...
      });
      intervalRef.current = id;
    return () => {
      clearInterval(intervalRef.current);
    };
  });

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>

      // ...
    </>
  );
}

警告 🔒#

✅フックは最上位レベルでのみ使用する（ループ、条件、ネストされた関数内では使用しない）
✅React 関数内でフックを呼び出す
✅他のフックを呼び出すカスタムフック内でフックを呼び出す

これらは React フックのドキュメントでのルールです。理由は、React 内部では状態を実際に保持していないためであり、状態の追跡は呼び出しの順序によって行われます。

つまり、複数の useState 呼び出しは、リンクリストを使用して識別される複数の状態を追跡するために行われます。 もし if/else 内でフックを呼び出すと、関数コンポーネントが再実行されると呼び出し順序が変わる可能性があり、エラーが発生する可能性があります。

このプロセス：

最初のレンダリング時、useState の順序に従って状態を宣言し、それをグローバルな配列に入れます。状態を宣言するたびに、カーソルを 1 つ増やします。
各イベントは対応するカーソルの状態値を持ち、状態イベントがトリガーされるたびに、対応する状態配列の値が変更され、再レンダリングが行われます。カーソルは 0 にリセットされます。useState の宣言順に従って、最新の状態の値が順番に取り出され、ビューが更新されます。

最後に🔭#

NES.cssとReact-springに感謝します🙏

これは私個人の気まぐれな学習プロジェクトであり、改善点やバグがあればお気軽にご連絡ください🙌

もしこのものがあなたの学習に役立つことができれば、それは私の名誉です🔮