React、Vue.jsについて　21日目　2024/10/27（お金持ちまでの道のり）

英国紳士風のお金持ちアンドロイドの絵です。 プログラミング
2024.10.27

本日はReact、Vue.jsについてです。Javascript関数とReactとVue.js、三つ巴の戦いです。大混乱必至。ということで今日も張り切っていきましょう。

初めての人はお金持ちまでの道のり：０日目をまず読んでみてください！よろしくお願いします★

React、Vue.jsとは？

ReactとVue.jsはどちらもJavaScriptのフレームワークまたはライブラリで、動的でインタラクティブなウェブアプリケーションを効率よく作るためのツールです。

  • React：Facebookが開発したJavaScriptライブラリで、コンポーネントベースのUI開発に特化しています。JSXという独自の記法を使い、状態（state）を管理しながら、動的なユーザーインターフェースを構築します。
  • Vue.js：Evan Youが作成したJavaScriptフレームワークで、シンプルで学びやすい設計が特徴です。リアクティブなデータバインディングを使い、テンプレート内で直感的にUIを制御できます。

コンポーネントベースの開発手法

コンポーネントベースの開発手法とは？

コンポーネントベースの開発は、アプリケーションを「コンポーネント」と呼ばれる小さな部品に分けて作成する方法です。各コンポーネントは独立して機能し、再利用可能なため、同じUI要素を複数箇所で使いたいときに便利です。

例えば、ボタン、フォーム、ナビゲーションバーなどのUI要素をコンポーネントとして分割しておけば、必要な場所で簡単に呼び出すことができ、修正も一箇所で済みます。

function ProfileCard() {
  return (
    <div className="profile-card">
      <h2>John Doe</h2>  // UI要素 (テキスト)
      <p>Web Developer</p> // UI要素 (テキスト)
      <button>Follow</button> // UI要素 (ボタン)
    </div>
  );
}

各部分の解説

  1. コンポーネント名：ProfileCard
    • このコンポーネントはReactの関数コンポーネントです。（この関数全体が「プロフィールカード」という1つの部品（コンポーネント）です）
    • 関数名ProfileCardを使用し、<ProfileCard />として他の場所で呼び出せます。
  2. <div className="profile-card">
    • className="profile-card"は、CSSのスタイルクラスを適用するためのものです。Reactではclass属性の代わりにclassNameを使用します。
  3. UI(ユーザーインターフェース)要素
    • <h2>John Doe</h2>：これはテキストの見出しで、ユーザーの名前（John Doe）を表示しています。
    • <p>Web Developer</p>：段落として職業を表示します。
    • <button>Follow</button>：ボタン要素で、クリック可能な「Follow」ボタンを表示しています。

Reactでのコンポーネントの作り方

Reactでは、コンポーネントはJavaScriptの関数またはクラスで作成されます。関数コンポーネントは以下のようにシンプルに定義できます。

Javascriptの関数で作成されたコンポーネント

function Greeting() {  //Javascriptの関数で作成されたコンポーネント
  return <h1>Hello, World!</h1>;
}

各部分の解説

  1. コンポーネント名：Greeting
    • このコンポーネントは関数コンポーネントで、Greetingという名前で定義されています。
    • 他の場所で<Greeting />として呼び出し、再利用が可能です。
  2. return：
    • returnの後に書かれている<h1>Hello, World!</h1>がこのコンポーネントの出力内容です。
    • JSX（JavaScript XML）構文を使い、HTMLタグのように要素を記述しています。
  3. UI要素：
    • <h1>Hello, World!</h1>は、UI要素として、画面に「Hello, World!」という大きな見出しテキストが表示されるようになっています。

上記のようにして、<Greeting name="Alice" />と書けば、「Hello, Alice!」と表示され、他の場所で<Greeting name="Bob" />とすると「Hello, Bob!」と表示されるように、汎用性が高まります。

classで作成されたコンポーネント

import React, { Component } from 'react';

class Greeting extends Component {  //classで作成されたコンポーネント
  render() {
    return <h1>Hello, World!</h1>;
  }
}

export default Greeting;

各部分の解説

  1. import React, { Component } from 'react';
    • このコードは、ReactとそのComponentクラスをインポートしています。
    • ComponentはReactが提供するクラスで、これを継承してクラスベースのコンポーネントを作成します。
  2. class Greeting extends Component
    • Greetingという名前のクラスを作成し、Componentを継承しています。これによってGreetingがReactのクラスコンポーネントになります。
    • extends Componentにより、GreetingクラスがReactのコンポーネントとしての機能を持ちます。
  3. render()メソッド
    • クラスコンポーネントには必ずrender()メソッドが必要です。
    • render()メソッドは、コンポーネントが表示する内容を返す関数です。ここでは<h1>Hello, World!</h1>を返しており、画面に「Hello, World!」と表示されます。
  4. export default Greeting;
    • このコードは、Greetingクラスを他のファイルでインポートして使用できるようにするためのものです。
    • 他のファイルでこのコンポーネントを使いたい場合、import Greeting from './Greeting';のようにインポートして利用できます。

JavaScriptの関数との違い

JavaScriptの関数でも同じような再利用性が得られます。ただし、Reactコンポーネントには、通常の関数と異なる以下の特徴があり、UIの構築に特化した利便性が追加されています：

1. HTMLとJavaScriptの統合（JSXの活用）

  • Reactコンポーネントは、JavaScriptとHTMLを組み合わせたJSXという記法を使い、HTMLタグのようにUIを構築します。JSXを使うことで、UIのレイアウトやデザインを直感的にコードで表現できます。

2. UIのリアクティブな更新

  • コンポーネントはReactの状態管理（state）やpropsを通して、データの変化に応じてリアクティブにUIを再描画します。例えば、ユーザーの操作に応じてボタンが切り替わるといったUIの変化が自動的に行われるため、関数だけでは対応しにくいインタラクティブなUIも実現できます。

3. DOMの最適化（仮想DOMの利用）

  • Reactは内部的に仮想DOMを使用し、必要な部分だけを効率よく更新します。通常の関数では、DOM操作を手動で行う必要がありますが、Reactコンポーネントを使うと効率よく自動で画面が更新されます。
  • DOM（Document Object Model）とは、HTMLやXMLで記述されたウェブページの構造をオブジェクト形式で表現したものです。JavaScriptなどのプログラミング言語から、ページの各要素（見出し、段落、画像など）を操作・変更できるようにする仕組みです。
// JavaScriptでDOMノードにアクセス
let greetingElement = document.getElementById("greeting");

// ノードがオブジェクトとして取得される
greetingElement.textContent = "Hello, World!"; // オブジェクトのプロパティを使って内容を変更

各部分の解説

  1. document.getElementById("greeting")
    • document.getElementById("greeting")を使うと、HTMLの<div id="greeting">Hello!</div>ノードにアクセスできます。
    • このとき、greetingElementには、このノードがオブジェクトとして取得されます。
  2. オブジェクトとしての操作
    • greetingElement.textContentは、このオブジェクトのプロパティの1つで、要素のテキスト内容を表します。
    • textContentプロパティを変更することで、<div>の表示内容が「Hello, World!」に変わります。
JavaScript関数でUIを変更する場合
function showGreeting(name) {
  document.getElementById('greeting').textContent = `Hello, ${name}!`;
}

// 呼び出し
showGreeting("Alice");

各部分の解説

  1. 関数名：showGreeting
    • nameという引数を受け取り、その名前に基づいた挨拶メッセージを表示する役割の関数です。
  2. document.getElementById('greeting')
    • document.getElementByIdは、ページ内の特定のHTML要素を取得するためのJavaScriptのメソッドです。
    • id属性がgreetingである要素を取得し、そのテキスト内容を変更します。
  3. textContentプロパティ
    • .textContentを使って要素内のテキストを設定し、メッセージをHello, ${name}!の形式で表示しています。
    • この例では、showGreeting("Alice")と呼び出すことで、「Hello, Alice!」が表示されます。

※この関数を使うには、<div id="greeting"></div>のようなHTML要素が必要です。

完成形のコード

<!-- HTML部分 -->
<div id="greeting"></div>

<!-- JavaScript部分 -->
<script>
  function showGreeting(name) {
    document.getElementById('greeting').textContent = `Hello, ${name}!`;
  }

  // 関数の呼び出し
  showGreeting("Alice");
</script>
ReactコンポーネントでのUI変更
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// 呼び出し
<Greeting name="Alice" />

各部分の解説

  1. コンポーネント名：Greeting
    • function Greeting(props)で定義されている関数コンポーネントです。
    • このコンポーネントは、<Greeting />というタグとしてHTMLのように呼び出しができ、他の場所で再利用可能です。
  2. propsの使用
    • propsは、コンポーネントに外部から渡されるデータを格納するオブジェクトです。
    • props.nameの形式でアクセスし、nameというプロパティに格納されたデータを利用します。
  3. <h1>Hello, {props.name}!</h1>
    • JSX記法を使い、<h1>タグ内にprops.nameの値を埋め込んでいます。
    • props.nameが「Alice」である場合、「Hello, Alice!」という見出しが画面に表示されます。
  4. 呼び出し
    • <Greeting name="Alice" />でコンポーネントを呼び出すと、props.nameに「Alice」が渡され、表示内容が「Hello, Alice!」となります。

Vue.jsでのコンポーネントの作り方

<template>
  <h1>Hello, World!</h1>
</template>

<script>
export default {
  name: 'Greeting'
};
</script>

各部分の解説

  1. <template>タグ
    • VueコンポーネントのHTML構造を記述する場所です。
    • <h1>Hello, World!</h1>という見出しがテンプレートに含まれており、コンポーネントが表示されると画面に「Hello, World!」が表示されます。
    • この部分がUIとして表示される要素（UI要素）を表します。
  2. <script>タグ
    • この部分では、コンポーネントのJavaScriptの設定やロジックを記述します。
    • export defaultでこのコンポーネントを他のファイルから利用可能にしており、Vue.jsアプリ内でインポートして再利用できます。
    • name: 'Greeting'は、コンポーネントに「Greeting」という名前をつけています。この名前は開発時にエラーやデバッグの際に役立ちます。

JavaScript関数、React、Vue.jsの3つの比較

1. JavaScript関数

  • 最適な用途：シンプルなページや、特定のUI要素のみを操作する小規模アプリに最適です。
  • 特徴：通常のJavaScriptでHTMLやCSSと連携してUIを動的に操作できますが、手動でDOMを操作する必要があり、コードが増えると管理が難しくなります。 (Document Object Model, DOM) 
  • パフォーマンス：ライブラリが不要なため、軽量でページの読み込みが速くなります。
  • メリット：学びやすく、設定不要でHTMLやCSSと組み合わせて使えるため、シンプルなサイトやページに適しています。
  • デメリット：DOMの操作が増えるとコードが複雑になり、リアクティブなUIの更新や状態管理が難しくなります。


2. React

  • 最適な用途：インタラクティブで、ユーザーと頻繁にデータをやりとりする中規模〜大規模のアプリに向いています。
  • 特徴：コンポーネントベースの設計で、再利用可能なUI部品を作りやすく、状態管理（state）や仮想DOMにより効率的にUIが更新されます。
  • パフォーマンス：仮想DOMを使うため、効率的なUI更新が可能で、インタラクティブなアプリでも比較的パフォーマンスが良いです。
  • メリット：コンポーネントの再利用性が高く、JSXでUIを直感的に記述できるため、メンテナンスしやすいです。
  • デメリット：設定や初期の学習コストがやや高く、初期のセットアップが少し複雑になることがあります。


3. Vue.js

  • 最適な用途：中規模〜大規模のアプリで、特にシンプルでわかりやすいUIの構築が求められる場合に適しています。
  • 特徴：HTMLベースのテンプレート構文で直感的にUIを作成でき、リアクティブなデータバインディングが標準装備されているため、動的なデータ表示が簡単に実装できます。Vue RouterやVuexによるルーティングや状態管理も強力です。
  • パフォーマンス：仮想DOMとリアクティブなデータバインディングが効率的なUI更新を可能にします。
  • メリット：学びやすく、HTMLやCSSの知識があればすぐに扱えます。テンプレート構文がシンプルで、初めてのフレームワークとしても扱いやすいです。
  • デメリット：他のライブラリやツールとの統合性がReactに比べてやや劣る場合があります。

本日の感想

今日学んだことは同じようなことはやれるけど状況によって使い分けましょう、みたいな感じでしょうか。まだいまいちピンときていませんが、これからいろいろなことを実践していくうちに慣れていくのだと思います。

18-20日目の記事はこちら
フロントエンドフレームワーク　18-20日目　2024/10/24-26（お金持ちまでの道のり）

22-24日目の記事はこちら
状態管理とデータバインディングについて　22-24日目　2024/10/28-30（お金持ちまでの道のり）

ここに初めて来た人はゼヒ０日目を読んでください。プログラミング知識０のおじさんがお金持ちになるまでのプランと熱い思いが載っています。私と一緒に運要素を排除したゴリゴリの脳筋プレイでお金持ちを目指しませんか？

０日目の記事はこちら
お金持ちまでの道のり：０日目

コードの読み方が全く分からないという方は以下の記事がオススメです。コードの読み方の説明が一番詳しく書かれてある記事です。

ToDoリストアプリの作成　12-15日目　2024/10/18-21（お金持ちまでの道のり）

コメント

タイトルとURLをコピーしました