Hi, I'm Junya03!

2月_Reactを勉強してみた！学習記録と気づき

2月_Reactを勉強してみた！学習記録と気づき

monthlystudy

2025-02-24

こんにちは。いかがお過ごしでしょうか？最近私は更にフロントエンド技術を伸ばしたいと思い、Reactの学習を始めました。これまでHTML,CSS,JavaScriptの基礎などに触れてきましたが、最近のトレンドであるAstro以外フレームワークに触れた機会がなく、他にも使われるフレームワークを学習してみようということで今回Reactの学習に踏み込んでみました。この記事では、Reactを学びながら感じたことや学習の過程を記録していこうと思います。

React って何！？

React は、Facebook（現：Meta）が開発した JavaScript のライブラリで、ユーザーインターフェース（UI）を構築するためのツールのことを指します。特にコンポーネントという仕組みを使って、再利用可能な UI パーツを作るのが特徴です。

今回学習した際にできたものを URL で貼り付けておきます。よかったら触ってみてね！

Reactに触れてみる →

React を選んだ理由

フロントエンドのライブラリやフレームワークは Vue や Angular など色々ありますが、React を選んだ理由は以下の 3 つです。

  • 利用している企業が多い：求人情報を見ても React の案件が多く、実務で役立ちそう。
  • Astro 以外でコンポーネント指向の開発を学びたかった：再利用しやすいコンポーネント設計を体験してみたかった。
  • 情報が豊富：日本語のドキュメントがあり、初心者でも学びやすい。

React の基本を学ぶ

まずは Udemy の講座を見ながら、学んでいきました。

コンポーネントの概念

React の特徴は、UI をコンポーネントという単位で分割することです。 例えば、ボタンをコンポーネント化すると以下のように再利用できます。

// Buttonの中で定義したProps(label)を受け取る
const Button = ({ label }) => {
// 受け取ったlabelを文字として出力する
  return <button>{label}</button>;
};

const App = () => {
  return (
    <div>
      <Button label="クリック！" />
      <Button label="送信" />
    </div>
  );
};

State と Props

  • Props（プロパティ）：親コンポーネントから子コンポーネントにデータを渡す
  • State（状態管理）：コンポーネント内で変化するデータを管理する

簡単なカウンターアプリを作るとこんな感じになります。

import React, { useState } from 'react';

const Counter = () => {
// 初期値を0に指定
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>現在のカウント: {count}</p>
      // クリックしたら数字にプラスしたものをcountにセット、更新する。
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
};

export default Counter;

パーツとして管理しておくと、再利用がしやすいので良いですね！

ちなみに技術は異なりますが、このサイトの様々な場所でもコンポーネントが使われております。 パーツを自分でカスタマイズして配置できる用になると管理がしやすいので Web サイトを作るのがとても楽になります。

学習方法とおすすめのリソース

学習する上で役立った教材をいくつか紹介します。

  1. 公式ドキュメント

    学習面で躓いた際はやはり公式ページが一番かと思います。

  2. Udemy の動画講座

    私は Udemy を用いたハンズオン形式で学習しました。

  3. YouTube のチュートリアル・実際に作ってみる

    YouTube などの無料講座でとりあえず触ってみるというのは非常に大事かと！

今後の目標

  • useEffect の学習
  • React Router を使ったページ遷移の学習
  • Next.js の学習

ある程度触れるようになってきたのでそろそろ Web サイトを 1 つ作ってみようかななんて考えてます。

まとめ

React を学び始めて感じたことは、とにかく手を動かすことが大事ということ。 とりあえず手を動かさないと始まらないな…と感じました。プログラミングって文字ばかりでわからないことが多く、やろうってなっても結構後回しにしがちな気がします…笑

実際に手を動かして今後もいろいろなことを勉強していきたいです。

今回は React についてお話をさせていただきました。 もしフロントエンド技術について気になった方がいらっしゃったら遠慮なくお声がけください！ それではまた来月…。