見出し画像
Photo by voice_watanabe

componentのはじまり

NAKANOSHIMA

目次

  1. コンポーネントって何？

  2. コンポーネントを考えるときに大事なこと

  3. コンポーネントを作ってみよう

  4. 結論

コンポーネントって何？

コンポーネントは、ウェブサイトを作るための「パーツ」や「部品」のようなものです。ホームページを作るときに使う小さな部分を組み合わせて、大きなページを作ります。例えば、ボタンや入力フォーム、ナビゲーションバーなどがコンポーネントです。

プログラミングにおける「コンポーネント」の歴史

コンポーネントの始まり

コンポーネントの概念は、1970年代にモジュールプログラミングの考え方から始まりました。当時のプログラマーたちは、大きなプログラムを小さな部品（モジュール）に分けることで、プログラムの管理が容易になることに気づきました。

コンポーネント指向プログラミング

1980年代には、オブジェクト指向プログラミング（OOP）が登場し、コンポーネントの考え方がさらに進化しました。OOPでは、データとその操作を一つにまとめた「オブジェクト」という単位でプログラムを構築します。これにより、再利用可能な部品を作ることができるようになりました。

ソフトウェアコンポーネントの普及

1990年代後半から2000年代初頭にかけて、コンポーネントを使ったソフトウェア開発が急速に普及しました。特に、MicrosoftのCOM（Component Object Model）やJavaのEJB（Enterprise JavaBeans）などが代表的です。これらの技術により、異なるプログラム間で部品を共有しやすくなりました。

Web開発でのコンポーネント

2000年代後半からは、Web開発でもコンポーネントの考え方が広まりました。特に、ReactやVue.jsといったJavaScriptフレームワークは、UI（ユーザーインターフェース）をコンポーネントとして分けることで、効率的なWebアプリケーション開発を実現しています。

プログラミングにおけるコンポーネントの歴史は、プログラムを管理しやすくするために始まり、オブジェクト指向プログラミングを経て、Web開発にも広がりました。これにより、再利用可能で効率的なプログラムの作成が可能になりました。これにより、開発者は効率的に作業できるようになり、バグも減ります。

コンポーネントを考えるときに大事なこと

1. 小さなパーツに分ける

ホームページを作るとき、一度に全部を作るのは難しいです。だから、まず小さなパーツに分けて、それを一つずつ作っていきます。コンポーネントは小さなパーツに分けて作るのがいいです。

2. 再利用できるようにする

一度作ったコンポーネントは、いろんな場所で使えるようにします。例えば、ボタンコンポーネントを一度作れば、他のページでも同じボタンを使えます。

3. シンプルにする

コンポーネントが複雑すぎると使いにくいです。シンプルにして、使いやすくするのが大事です。

コンポーネントを作ってみよう

ステップ1: コンポーネントの基本

まずは、シンプルなコンポーネントを作ってみましょう。例えば、「こんにちは」と表示するコンポーネントです。

// Hello.js
export default function Hello() {
  return <h1>こんにちは！</h1>;
}

このコンポーネントは、「Hello」という名前で、`<h1>`タグの中に「こんにちは！」と表示するだけです。とてもシンプルですね！

ステップ2: コンポーネントにプロパティ（props）を渡す

次に、コンポーネントにプロパティ（props）を渡してみましょう。プロパティは、コンポーネントに情報を渡すためのものです。たとえば、名前を表示するコンポーネントを作ってみます。

プロパティ（props）って何？

プロパティ（props）は、コンポーネントにデータを渡すための特別なものです。これを使うと、コンポーネントにいろいろな情報を与えることができます。例えば、名前や色、サイズなど、さまざまな情報を渡せます。

https://ja.react.dev/learn/passing-props-to-a-component

なぜプロパティ（props）が必要なの？

プロパティ（props）があると、同じコンポーネントをいろんな場面で使い回すことができます。これにより、コードの再利用性が高まり、開発が効率的になります。

プロパティ（props）を使ってみよう

名前を表示するコンポーネントを作ってみましょう。このコンポーネントは、渡された名前を表示します。

// Greeting.js
export default function Greeting(props) {
  return <h1>こんにちは、{props.name}さん！</h1>;
}

このコンポーネントを使うときは、次のようにします：

// App.js
import Greeting from './Greeting';

export default function App() {
  return (
    <div>
      <Greeting name="ハイパー" />
      <Greeting name="スーパー" />
    </div>
  );
}

これで、「こんにちは、ハイパーさん！」と「こんにちは、スーパーさん！」と表示されます。

プロパティ（props）の仕組み

プロパティは、コンポーネントを呼び出すときに渡されます。上記の例では、`<Greeting name="ハイパー" />`とすることで、`Greeting`コンポーネントに`name`というプロパティを渡しています。そして、`Greeting`コンポーネントの中では、`props.name`としてその値を使っています。

複数のプロパティを渡す

プロパティは複数渡すことができます。例えば、名前と年齢を渡す場合は次のようにします。

// Profile.js
export default function Profile(props) {
  return (
    <div>
      <h1>こんにちは、{props.name}さん！</h1>
      <p>年齢: {props.age}</p>
    </div>
  );
}

使うときは、次のようにします：

// App.js
import Profile from './Profile';

export default function App() {
  return (
    <div>
      <Profile name="ハイパー" age={20} />
      <Profile name="スーパー" age={18} />
    </div>
  );
}

これで、「こんにちは、ハイパーさん！」と「年齢: 20」と表示され、「こんにちは、スーパーさん！」と「年齢: 18」と表示されます。

ステップ3: コンポーネントのスタイリング

コンポーネントを見た目よくするために、スタイルを追加します。例えば、`<h1>`タグに色を付けてみましょう。

// StyledGreeting.js
export default function StyledGreeting(props) {
  const style = {
    color: 'blue',
    fontSize: '20px'
  };

  return <h1 style={style}>こんにちは、{props.name}さん！</h1>;
}

これで、「こんにちは、ハイパーさん！」が青色で大きな文字で表示されます。

結論

コンポーネントは、ウェブサイトを作るための小さなパーツです。小さなパーツに分けて、再利用できるようにして、シンプルに作ることが大事です。

いいなと思ったら応援しよう！