日本語

ReactJS チュートリアル

Hooks

ReactJSの高度な機能

追加の概念

ReactJS - 他のライブラリとの統合

こんにちは、未来のReact開発者さんたち！Reactと他のライブラリを統合する興味深い世界案内をお楽しみにしていましたね。コンピュータサイエンスを多年間教えてきた者として、このスキルはマスター・シェフのようなものです。異なる材料（または、ここではライブラリ）をブレンドして素晴らしいものを創造する方法を知っているのです！

ReactJS - Integrating With Other Libraries

Reactを他のライブラリと統合する理由

まず、Reactを他のライブラリと混ぜる理由について話しましょう。例えば、ツリーハウスを建てているとします。Reactは丈夫な基盤と壁ですが、時々、窓やカッコよい滑り台が必要になるかもしれません。それが他のライブラリの出番です。Reactがデフォルトで提供しない追加機能を追加します。

CreateRootベースの統合

まずはCreateRootメソッドから始めましょう。これはツリーハウスの主要な入口を設けるようなものです。

CreateRootとは？

CreateRootはReactコンポーネントをレンダリングする現代的な方法です。Reactの木を成長させるための種を植えるようなものです。

以下は簡単な例です：

import { createRoot } from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);

このコードでは：

  1. createRootをReact DOMからインポートします。
  2. HTML内のコンテナ（通常はidが'root'のdiv）を見つけます。
  3. このコンテナを使ってrootを作成します。
  4. メインのAppコンポーネントをこのrootにレンダリングします。

グラフライブラリの統合

さて、Reactアプリにクールなグラフを追加したいとしましょう。ここではChart.jsというライブラリを例にとって説明します。

まず、Chart.jsをインストールします：

npm install chart.js

次に、Chart.jsを使うコンポーネントを作成します：

import React, { useEffect, useRef } from 'react';
import Chart from 'chart.js/auto';

function ChartComponent() {
const chartRef = useRef(null);

useEffect(() => {
if (chartRef.current) {
new Chart(chartRef.current, {
type: 'bar',
data: {
labels: ['赤', '青', '黄', '緑', '紫', 'オレンジ'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
}
}, []);

return <canvas ref={chartRef} />;
}

export default ChartComponent;

このコードは：

  1. 関数型コンポーネントを作成します。
  2. useRefを使ってcanvas要素の参照を作成します。
  3. useEffectを使ってコンポーネントがマウントされたときに新しいChartを作成します。
  4. Chart.jsがレンダリングするcanvas要素を返します。

これをメインのAppで使用できます：

import React from 'react';
import ChartComponent from './ChartComponent';

function App() {
return (
<div>
<h1>私の素晴らしいグラフ</h1>
<ChartComponent />
</div>
);
}

export default App;

Refベースの統合

次に、Refベースの統合について話しましょう。ReactのRefsはUIの特定の部分を見つけて操作するための名札のようなものです。

Refとは？

RefsはDOMノードやReact要素にアクセスする方法を提供します。特定のコンポーネントへの直接のラインのようなものです。

以下は簡単な例です：

import React, { useRef, useEffect } from 'react';

function TextInput() {
const inputRef = useRef(null);

useEffect(() => {
inputRef.current.focus();
}, []);

return <input ref={inputRef} type="text" />;
}

このコードでは：

  1. useRefを使って参照を作成します。
  2. この参照をinput要素にアタッチします。
  3. useEffectでコンポーネントがマウントされたときにinputにフォーカスを当てます。

デートピッカーライブラリの統合

次に、Flatpickrというデートピッカー・ライブラリをrefsを使って統合します。

まず、Flatpickrをインストールします：

npm install flatpickr

次に、Flatpickrを使うコンポーネントを作成します：

import React, { useRef, useEffect } from 'react';
import flatpickr from 'flatpickr';
import 'flatpickr/dist/flatpickr.css';

function DatePicker() {
const datePickerRef = useRef(null);

useEffect(() => {
flatpickr(datePickerRef.current, {
dateFormat: 'Y-m-d',
onChange: function(selectedDates, dateStr, instance) {
console.log(dateStr);
}
});
}, []);

return <input ref={datePickerRef} type="text" placeholder="日付を選択..." />;
}

export default DatePicker;

このコードは：

  1. 参照を作成します。
  2. useEffectでコンポーネントがマウントされたときにFlatpickrをinput要素に初期化します。
  3. Flatpickrのオプションを設定し、日付が選択されたときのコールバックを設定します。

このDatePickerコンポーネントをアプリで使用できます：

import React from 'react';
import DatePicker from './DatePicker';

function App() {
return (
<div>
<h1>日付を選択してください</h1>
<DatePicker />
</div>
);
}

export default App;

jQuery Slickプラグインの統合

最後に、jQueryプラグインの統合について話しましょう。具体的にはSlickカルーセルプラグインです。jQuery？古いニュースじゃないかと思うかもしれませんが、時々古いツールが一番の仕事をするんです！

Slickの設定

まず、jQueryとSlickをインストールします：

npm install jquery slick-carousel

次に、Sliderコンポーネントを作成します：

import React, { useRef, useEffect } from 'react';
import $ from 'jquery';
import 'slick-carousel';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

function Slider() {
const sliderRef = useRef(null);

useEffect(() => {
$(sliderRef.current).slick({
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
});
}, []);

return (
<div ref={sliderRef}>
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
</div>
);
}

export default Slider;

このコードは：

  1. jQueryとSlickカルーセルプラグインをインポートします。
  2. 参照を作成します。
  3. useEffectでコンポーネントがマウントされたときにSlickカルーセルを初期化します。
  4. スライダーのコンテンツを返します。

このSliderコンポーネントをアプリで使用できます：

import React from 'react';
import Slider from './Slider';

function App() {
return (
<div>
<h1>私の素晴らしいスライダー</h1>
<Slider />
</div>
);
}

export default App;

結論

そしてここまで、React統合の旅がありました。CreateRootからRefs、そしてjQueryの魔法まで、Reactの機能を拡張するための方法を学びました。

以下に、私たちがカバーした方法の簡単なまとめです：

メソッド 使用例 例
CreateRoot メインReactアプリの設定 Chart.js統合
Refベース 特定のDOM要素にアクセス Flatpickrデートピッカー
jQueryプラグイン jQueryベースのライブラリの使用 Slickカルーセル

練習を続け、探索を続け、そして最も重要な的是、Reactを楽しみましょう！次に作るアプリがどんなに素晴らしいものになるか、誰もが知りません。ハッピーコーディング！

Credits: Image by storyset

前のチュートリアル:
ReactJS - 高階コンポーネント
次のチュートリアル:
ReactJS - 性能最適化