目次
コンポーネントって何？
コンポーネントは、ウェブサイトを作るための「パーツ」や「部品」のようなものです。ホームページを作るときに使う小さな部分を組み合わせて、大きなページを作ります。例えば、ボタンや入力フォーム、ナビゲーションバーなどがコンポーネントです。
プログラミングにおける「コンポーネント」の歴史
コンポーネントの始まり
コンポーネントの概念は、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）は、コンポーネントにデータを渡すための特別なものです。これを使うと、コンポーネントにいろいろな情報を与えることができます。例えば、名前や色、サイズなど、さまざまな情報を渡せます。
なぜプロパティ（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>;
}
これで、「こんにちは、ハイパーさん！」が青色で大きな文字で表示されます。
結論
コンポーネントは、ウェブサイトを作るための小さなパーツです。小さなパーツに分けて、再利用できるようにして、シンプルに作ることが大事です。