検索ガイド -Search Guide-

単語と単語を空白で区切ることで AND 検索になります。
例: python デコレータ ('python' と 'デコレータ' 両方を含む記事を検索します)
単語の前に '-' を付けることで NOT 検索になります。
例: python -デコレータ ('python' は含むが 'デコレータ' は含まない記事を検索します)
" (ダブルクオート) で語句を囲むことで 完全一致検索になります。
例: "python data" 実装 ('python data' と '実装' 両方を含む記事を検索します。'python data 実装' の検索とは異なります。)
web_development

React で Carousel Slider を作って Django のテンプレートに埋め込んでみた - Babel でコンパイル、webpack でビルド 投稿一覧へ戻る

Published 2022年5月14日21:07 by mootaro23

SUPPORT UKRAINE

- Your indifference to the act of cruelty can thrive rogue nations like Russia -

React で carousel slider コンポーネントを作成し Django テンプレートに埋め込んでみる

前提:
Web サーバーは既に運用している (AlmaLinux, Apache, Django, Python)
各ページの描画は Django テンプレートを利用しており、一部 JavaScript / jQuery を利用しているが React は使用していない (素人同然)
やりたいこと:
Carousel slider は base.html 内に設置した DOM コンテナに React コンポーネントとして描画する
スライドさせる各アイテムは、ブログの参考としている書籍の表紙画像。画像データは React 内から fetch API を利用して Django 側で用意した API をたたくことで取得する。各画像をクリックすることで、従来通りその書籍を参考にして書いたブログの一覧を表示する
Django プロジェクトのルートディレクトリに src フォルダを作成し、開発する React コンポーネント関連のファイルをまとめる。WebPack でビルドする際の entry ポイントは src/index.js、output 先は static/js/main.js とする。
base.html 内で static/js/main.js を script タグで読み込むことで カルーセルスライダー React コンポーネントをテンプレートに描画する
src/index.js ファイルでは、src/components/App.js のインポート、base.html 内の DOM コンテナの取得、それに対する App コンポーネントの描画を行う。
App コンポーネントは carousel slider の実体を構成するコンポーネントのまとめ役。これらのコンポーネントは src/components/slider/ 下に置く slider.js に記述する。また、必要なスタイルは同じフォルダ内の slider.css に記述し、App.js 内でインポートする。
Django プロジェクトルートディレクトリに webpack.config.js と babel.config.json を作成し設定を行う。
作業:
1. webpack をインストールする:
npm install webpack webpack-cli --include=dev
2. babel と babel の dependencies をインストールする:
npm install @babel/core @babel/preset-react @babel/preset-env --include=dev
3. webpack のビルドに必要な loader をインストールする:
npm install babel-loader css-loader style-loader --include=dev
4. react, react-dom をインストールする:
npm install react react-dom --include=dev
5. react-router などを使用する上で必要な dependencies をインストールする:
npm insatall react-router-dom @babel/plugin-proposal-class-properties
6. この時点での package.json の内容:
{
"name": "djangosite",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@babel/core": "^7.17.10",
"@babel/plugin-proposal-class-properties": "^7.16.7",
"@babel/preset-env": "^7.17.10",
"@babel/preset-react": "^7.16.7",
"babel-loader": "^8.2.5",
"css-loader": "^6.7.1",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-router-dom": "^6.3.0",
"style-loader": "^3.3.1",
"webpack": "^5.72.0",
"webpack-cli": "^4.9.2"
}
}
7. Django プロジェクトルートに webpack.config.js ファイルを作成し、webpack に対する設定を記述する。
webpack.config.js の記述の詳細は こちらのオフィシャルドキュメント を参照:
const path = require("path");
const webpack = require("webpack");

module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "static/js"),
filename: "main.js"
},
module: {
rules: [
{
test: /\.js|.jsx$/,
exclude: /node_modules/,
use: ["babel-loader"],
},
{
test: /\.css$/,
exclude: /node_modules/,
use: ["style-loader", "css-loader"],
},
],
},
optimization: {
minimize: true,
},
mode: 'production',
plugins: [
new webpack.DefinePlugin({
"process.env.NODE_ENV": JSON.stringify("production"),
}),
],
};
8. Django プロジェクトルートに babel.config.json ファイルを作成し、babel に対する設定を記述する。
{
"presets": [["@babel/preset-react", {"targets": "defaults"}]],
"plugins": ["@babel/plugin-proposal-class-properties"]
}
9. この時点での Django プロジェクトルートの static/js フォルダの中身は空。
10. Django プロジェクトのルートディレクトリ (仮想環境内) で webpack のビルドを実行:
npx webpack build
11. この時点で static/js には main.js が作成されている。また、httpd を再起動してサイトにアクセスすると、埋め込んでいる React コンポーネントはちゃんと動作している (ページ上部、ヘッダー部分の下で画像がスライドしていると思います。ポインタを hover させたり、クリックしたりして遊んでみてください)。
参考サイト:
今回 React を利用した carousel slider コンポーネントを作成するにあたり、下記のサイトを参考にさせてもらいました: