<h2 id="hb6200cc538">react-quill とは何か？</h2><a href="https://quilljs.com/" target="_blank" rel="noopener noreferrer">Quill</a>とは、オープンソースのWYSIWYGエディタをWeb上で実現するためのjsプラグインです。 QuillをReact上で使えるようにしたパッケージがreact-quillです。 <h2 id="h8787c63b0c">react-quillの使い方</h2>react-quillのオプションは以下の通りです。<ul><li><code>id</code>: 指定するとDOM要素に当該IDが付与されます</li><li><code>className</code>: 指定するとDOM要素に当該ClassNameが付与されます </li><li><code>value</code>: エディタに表示する値。「HTMLを含む文字列、Quill Delta インスタンス、または Deltaを表すプレーン オブジェクト」を指定できるみたい。 </li><li><code>defaultValue</code>: エディタに表示する初期値</li><li><code>readOnly</code>: trueを設定すると編集できなくなります。</li><li><code>placeholder</code>: エディタが空の時に表示する文字列。動的に変更したい時はrefsとdata-attributesを使え、とのこと。</li><li><code>modules</code>: エディターのツールバーなどに適用するモジュール</li><li><code>formats</code>: 編集中に有効にするフォーマットを配列で指定する。デフォルトでは全て有効になっています。</li><li><code>style</code>: CSSに適用するスタイル。キャメルケースで指定すること。</li><li><code>theme</code>: 適用するテーマ名。デフォルトは「snow」</li><li><code>tabIndex</code>: エディタがフォーカスする順番</li><li><code>bounds</code>: ポップアップの位置を制限するために Quill によって使用されるセレクターまたは DOM 要素。デフォルトは document.body</li><li><code>children</code>: デフォルトの代わりに編集領域として使用される要素。textareaは指定できない</li><li><code>onChange</code>: 編集後に新しい内容で実行されるコールバック</li><li><code>onChangeSelection</code>: 新しい選択値で実行されるコールバック</li><li><code>onFocus</code>: フォーカスされた時に実行するコールバック</li><li><code>onBlur</code>: フォーカスを失った時に実行するコールバック</li><li><code>onKeyPress</code>: キーを押して離した時に実行するコールバック</li><li><code>onKeyDown</code>: キーを押して離す前に実行するコールバック</li><li><code>onKeyUp</code>: キーを話す時に実行するコールバック</li><li><code>preserveWhitespace</code>: true の場合、デフォルトの div タグの代わりに pre タグがエディター領域に使用されます</li></ul> <h2 id="h14c51a0d2a">react-quill でブログ管理システムを作ってみる</h2>さっそくブログ管理システムを作ってみたいと思います。 まず、プロジェクトの雛形を作成します。vite を使用してJavaScript,Reactを選択し、プロジェクト名は<code>react-quill-sample</code>とします。<pre><code>npm create vite@latest
Need to install the following packages:
&nbsp; create-vite@4.2.0
Ok to proceed? (y) y
✔ Project name: … react-quill-sample
✔ Select a framework: › React
✔ Select a variant: › JavaScript

Scaffolding project in /react-quill-sample...

Done. Now run:</code></pre> ディレクトリを移動して、インストール、ローカルホストを立ち上げます。<pre><code>cd react-quill-sample
npm install
npm run dev</code></pre> 必要なパッケージをインストールします。CSSは<code>Bootstrap</code>を、<code>react-quill</code>で作成したHTMLを直接埋め込むために<code>html-react-parser</code>を使用します。<pre><code>npm install --save react-quill html-react-parser bootstrap reactstrap</code></pre> 次にBootstrapと<code>react-quill</code>のCSSファイルのセットアップを行います。 不要なCSSファイルの読み込みを削除するのと以下の2行で<code>src/main.jsx</code>でCSSファイルの読み込みを行います。<pre><code>import "react-quill/dist/quill.snow.css";
import "bootstrap/dist/css/bootstrap.css";</code></pre><code>src/main.jsx</code>のファイル全体は以下のようになります。これでセットアップは完了です。 ./src/main.jsx<pre><code>import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "react-quill/dist/quill.snow.css";
import "bootstrap/dist/css/bootstrap.css";

ReactDOM.createRoot(document.getElementById("root")).render(
 &lt;React.StrictMode&gt;
 &lt;App /&gt;
 &lt;/React.StrictMode&gt;
);</code></pre> 次にContextAPIでブログを管理するためにContextProviderを定義します。ブログの内容は<code>id</code>, <code>title</code>, <code>content</code>, <code>createdAt</code>となります。 ./src/BlogInfoProvider.jsx<pre><code>import { createContext, useState } from "react";

export const BlogInfoContext = createContext();

export const BlogInfoProvider = ({ children }) =&gt; {
 const [blogs, setBlogs] = useState([]);
 const [id, setId] = useState();
 const [title, setTitle] = useState("");
 const [content, setContent] = useState("");
 const [registerModal, setRegisterModal] = useState(false);
 const toggleRegisterModal = () =&gt; setRegisterModal(!registerModal);
 const [editModal, setEditModal] = useState(false);
 const toggleEditModal = () =&gt; setEditModal(!editModal);

 const addBlog = () =&gt; {
 const lastBlog = blogs[blogs.length - 1];
 const id = lastBlog ? lastBlog.id + 1 : 1;
 const newBlog = {
 id,
 content,
 title,
 createdAt: new Date(),
 };
 setBlogs([...blogs, newBlog]);
 toggleRegisterModal();
 setId();
 setTitle("");
 setContent("");
 };

 const updateBlog = () =&gt; {
 const newBlog = {
 id,
 content,
 title,
 };
 const newBlogs = blogs.map((blog) =&gt; {
 if (blog.id === id) {
 return { ...blog, ...newBlog };
 } else {
 return blog;
 }
 });
 setBlogs(newBlogs);
 toggleEditModal();
 setTitle("");
 setContent("");
 };

 const deleteBlog = (i) =&gt; {
 if (confirm("本当に削除しますか？")) {
 const newBlogs = [...blogs];
 newBlogs.splice(i, 1);
 setBlogs(newBlogs);
 }
 };
 return (
 &lt;BlogInfoContext.Provider
 value={{
 blogs,
 setBlogs,
 title,
 setTitle,
 content,
 setContent,
 registerModal,
 setRegisterModal,
 toggleRegisterModal,
 editModal,
 setEditModal,
 addBlog,
 deleteBlog,
 updateBlog,
 setId,
 }}
 &gt;
 {children}
 &lt;/BlogInfoContext.Provider&gt;
 );
};</code></pre> 次にmain.jsxで先ほど作成した<code>BlogInfoProvider</code>で<code>App</code>コンポーネントを囲います。 ./src/main.jsx<pre><code>import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "react-quill/dist/quill.snow.css";
import "bootstrap/dist/css/bootstrap.css";
import { BlogInfoProvider } from "./BlogInfoProvider";

ReactDOM.createRoot(document.getElementById("root")).render(
 &lt;React.StrictMode&gt;
 &lt;BlogInfoProvider&gt;
 &lt;App /&gt;
 &lt;/BlogInfoProvider&gt;
 &lt;/React.StrictMode&gt;
);

</code></pre> 次にブログの一覧を表示するためのコンポーネントを作成します。 一覧画面にはID、タイトル、内容、作成日時を表示します。対象の記事を削除、更新するためのボタンも設置します。 ./src/BlogList.jsx<pre><code>import React, { useContext } from "react";
import { Button, Table } from "reactstrap";
import parse from "html-react-parser";
import Modal from "./Modal";
import { BlogInfoContext } from "./BlogInfoProvider";

function BlogList() {
 const {
 setTitle,
 setContent,
 blogs,
 deleteBlog,
 editModal,
 toggleEditModal,
 updateBlog,
 setEditModal,
 setId,
 } = useContext(BlogInfoContext);
 const handleEditModal = (i) =&gt; {
 setTitle(blogs[i].title);
 setContent(blogs[i].content);
 setId(i + 1)
 setEditModal(!editModal);
 };
 return (
 &lt;Table&gt;
 &lt;thead&gt;
 &lt;tr&gt;
 &lt;th&gt;#&lt;/th&gt;
 &lt;th&gt;タイトル&lt;/th&gt;
 &lt;th&gt;内容&lt;/th&gt;
 &lt;th&gt;作成日時&lt;/th&gt;
 &lt;th&gt;更新&lt;/th&gt;
 &lt;th&gt;削除&lt;/th&gt;
 &lt;/tr&gt;
 &lt;/thead&gt;
 &lt;tbody&gt;
 {blogs.map((blog, i) =&gt; (
 &lt;tr key={i}&gt;
 &lt;th scope="row"&gt;{blog.id}&lt;/th&gt;
 &lt;td&gt;{blog.title}&lt;/td&gt;
 &lt;td&gt;{parse(blog.content)}&lt;/td&gt;
 &lt;td&gt;{blog.createdAt.toLocaleString()}&lt;/td&gt;
 &lt;td&gt;
 &lt;Button color="primary" onClick={() =&gt; handleEditModal(i)}&gt;
 更新
 &lt;/Button&gt;
 &lt;Modal
 modal={editModal}
 toggle={toggleEditModal}
 onClick={() =&gt; updateBlog()}
 /&gt;
 &lt;/td&gt;
 &lt;td&gt;
 &lt;Button color="danger" onClick={() =&gt; deleteBlog(i)}&gt;
 削除
 &lt;/Button&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
 ))}
 &lt;/tbody&gt;
 &lt;/Table&gt;
 );
}

export default BlogList;</code></pre> 次は記事を作成するためのフォームのモーダル実装です。ここでreact-quillを使用します。使用箇所は以下の部分です。<pre><code>&lt;ReactQuill
 id="content"
 theme="snow"
 value={content}
 onChange={setContent}
/&gt;</code></pre> <code>Modal</code>コンポーネントは記事の新規作成時と、既存記事の更新時に呼ばれるコンポーネントです。 ./src/Modal.jsx<pre><code>import React, { useContext } from "react";
import {
 Button,
 Modal as BootstrapModal,
 ModalHeader,
 ModalBody,
 ModalFooter,
 Label,
 Input,
 Form,
 FormGroup,
} from "reactstrap";
import ReactQuill from "react-quill";
import { BlogInfoContext } from "./BlogInfoProvider";

function Modal({ modal, toggle, onClick }) {
 const { title, setTitle, content, setContent } = useContext(BlogInfoContext);
 return (
 &lt;BootstrapModal isOpen={modal} toggle={toggle}&gt;
 &lt;ModalHeader toggle={toggle}&gt;
 ブログ記事を追加する
 &lt;/ModalHeader&gt;
 &lt;ModalBody&gt;
 &lt;Form&gt;
 &lt;FormGroup&gt;
 &lt;Label for="title"&gt;タイトル&lt;/Label&gt;
 &lt;Input
 id="title"
 name="title"
 placeholder="タイトルを入力"
 type="text"
 value={title}
 onChange={(e) =&gt; setTitle(e.target.value)}
 /&gt;
 &lt;/FormGroup&gt;
 &lt;FormGroup&gt;
 &lt;Label for="content"&gt;内容&lt;/Label&gt;
 &lt;ReactQuill
 id="content"
 theme="snow"
 value={content}
 onChange={setContent}
 /&gt;
 &lt;/FormGroup&gt;
 &lt;/Form&gt;
 &lt;/ModalBody&gt;
 &lt;ModalFooter&gt;
 &lt;Button color="secondary" onClick={toggle}&gt;
 キャンセル
 &lt;/Button&gt;
 &lt;Button color="primary" onClick={onClick}&gt;
 保存
 &lt;/Button&gt;
 &lt;/ModalFooter&gt;
 &lt;/BootstrapModal&gt;
 );
}

export default Modal;</code></pre> 最後にApp.jsxを実装します。 ./src/App.jsx<pre><code>import { Button } from "reactstrap";
import Modal from "./Modal";
import BlogList from "./BlogList";
import { BlogInfoContext } from "./BlogInfoProvider";
import { useContext } from "react";

function App() {
 const { toggleRegisterModal, addBlog, registerModal } =
 useContext(BlogInfoContext);
 return (
 &lt;&gt;
 &lt;h2&gt;ブログ管理システム&lt;/h2&gt;
 &lt;Button color="primary" onClick={toggleRegisterModal}&gt;
 ブログ記事を書く
 &lt;/Button&gt;
 &lt;Modal
 modal={registerModal}
 toggle={toggleRegisterModal}
 onClick={addBlog}
 /&gt;
 &lt;BlogList /&gt;
 &lt;/&gt;
 );
}

export default App;</code></pre>

【react-quill】簡単にリッチテキストエディタを実装する

<h2 id="h47ab4c152e">react-tabsとは？</h2>簡単にタブ実装を行うためのnpmパッケージです。 リポジトリは<a href="https://github.com/reactjs/react-tabs" target="_blank" rel="noopener noreferrer">こちら</a>です <h2 id="hd001437cff">react-tabsでタブ実装してみた</h2>実装してみました。 実装内容としてはマイページによくある「プロフィール情報」、「メールアドレス」、「パスワード」、「アイコン画像」の４タブからなるアカウント情報更新画面のようなものです。タブを切り替えても値が保持されるようにしました。 実装した感想としては本当に使いやすく、必要な時はすぐに導入したいなと感じました。 src/App.js<pre><code>import "./App.css";
import EmailContextProvider from "./EmailContextProvider";
import IconContextProvider from "./IconContextProvider";
import PasswordContextProvider from "./PasswordContextProvider";
import ProfileContextProvider from "./ProfileContextProvider";
import SampleTab from "./SampleTab";

function App() {
 return (
 &lt;div className="App"&gt;
 &lt;ProfileContextProvider&gt;
 &lt;EmailContextProvider&gt;
 &lt;PasswordContextProvider&gt;
 &lt;IconContextProvider&gt;
 &lt;SampleTab /&gt;
 &lt;/IconContextProvider&gt;
 &lt;/PasswordContextProvider&gt;
 &lt;/EmailContextProvider&gt;
 &lt;/ProfileContextProvider&gt;
 &lt;/div&gt;
 );
}

export default App;</code></pre> src/ProfileContextProvider.js<pre><code>import React, { createContext, useState } from "react";

export const ProfileContext = createContext();

function ProfileContextProvider({ children }) {
 const [userName, setUserName] = useState("");
 const [nickName, setNickName] = useState("");
 const [message, setMessage] = useState("");
 const [notifyEmail, setNotifyEmail] = useState(false);

 return (
 &lt;ProfileContext.Provider
 value={{
 userName,
 setUserName,
 nickName,
 setNickName,
 message,
 setMessage,
 notifyEmail,
 setNotifyEmail,
 }}
 &gt;
 {children}
 &lt;/ProfileContext.Provider&gt;
 );
}

export default ProfileContextProvider;</code></pre> src/EmailContextProvider.js<pre><code>import React, { createContext, useState } from "react";

export const EmailContext = createContext();

function EmailContextProvider({ children }) {
 const [email, setEmail] = useState("");

 return (
 &lt;EmailContext.Provider
 value={{
 email,
 setEmail,
 }}
 &gt;
 {children}
 &lt;/EmailContext.Provider&gt;
 );
}

export default EmailContextProvider;</code></pre> src/PasswordContextProvider.js<pre><code>import React, { createContext, useState } from "react";

export const PasswordContext = createContext();

function PasswordContextProvider({ children }) {
 const [password, setPassword] = useState("");

 return (
 &lt;PasswordContext.Provider
 value={{
 password,
 setPassword,
 }}
 &gt;
 {children}
 &lt;/PasswordContext.Provider&gt;
 );
}

export default PasswordContextProvider;</code></pre> src/IconContextProvider.js<pre><code>import React, { createContext, useState } from "react";

export const IconContext = createContext();

function IconContextProvider({ children }) {
 const [icon, setIcon] = useState(null);
 const [iconImage, setIconImage] = useState("");
 const onChangeIcon = (e) =&gt; {
 const files = e.target.files;
 if (files &amp;&amp; files[0]) {
 setIcon(files[0]);
 setIconImage(window.URL.createObjectURL(files[0]));
 }
 };

 return (
 &lt;IconContext.Provider
 value={{
 onChangeIcon,
 iconImage,
 }}
 &gt;
 {children}
 &lt;/IconContext.Provider&gt;
 );
}

export default IconContextProvider;</code></pre> src/SampleTabs.js<pre><code>import React, { useState } from "react";
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
import "react-tabs/style/react-tabs.css";
import ProfileForm from "./ProfileForm";
import EmailForm from "./EmailForm";
import PasswordForm from "./PasswordForm";
import { IconContext } from "./IconContextProvider";
import IconForm from "./IconForm";

function SampleTab() {
 return (
 &lt;Tabs defaultIndex={0}&gt;
 &lt;TabList&gt;
 &lt;Tab&gt;プロフィール情報&lt;/Tab&gt;
 &lt;Tab&gt;メールアドレス&lt;/Tab&gt;
 &lt;Tab&gt;パスワード&lt;/Tab&gt;
 &lt;Tab&gt;アイコン画像&lt;/Tab&gt;
 &lt;/TabList&gt;

 &lt;TabPanel&gt;
 &lt;ProfileForm /&gt;
 &lt;/TabPanel&gt;

 &lt;TabPanel&gt;
 &lt;EmailForm /&gt;
 &lt;/TabPanel&gt;
 
 &lt;TabPanel&gt;
 &lt;PasswordForm /&gt;
 &lt;/TabPanel&gt;

 &lt;TabPanel&gt;
 &lt;IconForm /&gt;
 &lt;/TabPanel&gt;
 &lt;/Tabs&gt;
 );
}

export default SampleTab;</code></pre> src/ProfileForm.js<pre><code>import React, { useContext } from "react";
import { ProfileContext } from "./ProfileContextProvider";

function ProfileForm() {
 const handleSubmit = (e) =&gt; {
 e.preventDefault();
 // do somthing... such as api call etc
 };
 const {
 userName,
 setUserName,
 nickName,
 setNickName,
 message,
 setMessage,
 notifyEmail,
 setNotifyEmail,
 } = useContext(ProfileContext);

 return (
 &lt;fonm
 style={{
 display: "flex",
 "flex-direction": "column",
 padding: "0 50px 0 50px",
 }}
 onSubmit={(e) =&gt; handleSubmit(e)}
 &gt;
 &lt;div&gt;
 &lt;label htmlFor="userName"&gt;ユーザー名&lt;/label&gt;
 &lt;input
 id="userName"
 type="text"
 value={userName}
 onChange={(e) =&gt; setUserName(e.target.value)}
 /&gt;
 &lt;/div&gt;
 &lt;div&gt;
 &lt;label htmlFor="nickName"&gt;ニックネーム&lt;/label&gt;
 &lt;input
 id="nickName"
 type="text"
 value={nickName}
 onChange={(e) =&gt; setNickName(e.target.value)}
 /&gt;
 &lt;/div&gt;
 &lt;div&gt;
 &lt;label htmlFor="message"&gt;メッセージ&lt;/label&gt;
 &lt;input
 id="message"
 type="textarea"
 value={message}
 onChange={(e) =&gt; setMessage(e.target.value)}
 /&gt;
 &lt;/div&gt;
 &lt;div&gt;
 &lt;label htmlFor="notifyEmail"&gt;お知らせメールを受け取るか&lt;/label&gt;
 &lt;input
 id="notifyEmail"
 type="checkbox"
 checked={notifyEmail}
 onChange={() =&gt; setNotifyEmail(!notifyEmail)}
 /&gt;
 &lt;/div&gt;
 &lt;input
 type="submit"
 style={{ margin: "10px 300px 0 300px" }}
 value="更新する"
 /&gt;
 &lt;/fonm&gt;
 );
}

export default ProfileForm;</code></pre> src/EmailForm.js<pre><code>import React, { useContext } from "react";
import { EmailContext } from "./EmailContextProvider";

function EmailForm() {
 const handleSubmit = (e) =&gt; {
 e.preventDefault();
 // do somthing... such as api call etc
 };
 const { email, setEmail } = useContext(EmailContext);

 return (
 &lt;fonm
 style={{
 display: "flex",
 "flex-direction": "column",
 padding: "0 50px 0 50px",
 }}
 onSubmit={(e) =&gt; handleSubmit(e)}
 &gt;
 &lt;div&gt;
 &lt;label htmlFor="email"&gt;Eメール&lt;/label&gt;
 &lt;input
 id="email"
 type="text"
 value={email}
 onChange={(e) =&gt; setEmail(e.target.value)}
 /&gt;
 &lt;/div&gt;
 &lt;input
 type="submit"
 style={{ margin: "10px 300px 0 300px" }}
 value="更新する"
 /&gt;
 &lt;/fonm&gt;
 );
}

export default EmailForm;</code></pre> src/PasswordForm.js<pre><code>import React, { useContext } from "react";
import { PasswordContext } from "./PasswordContextProvider";

function PasswordForm() {
 const handleSubmit = (e) =&gt; {
 e.preventDefault();
 // do somthing... such as api call etc
 };
 const { password, setPassword } = useContext(PasswordContext);

 return (
 &lt;fonm
 style={{
 display: "flex",
 "flex-direction": "column",
 padding: "0 50px 0 50px",
 }}
 onSubmit={(e) =&gt; handleSubmit(e)}
 &gt;
 &lt;div&gt;
 &lt;label htmlFor="password"&gt;パスワード&lt;/label&gt;
 &lt;input
 id="password"
 type="password"
 value={password}
 onChange={(e) =&gt; setPassword(e.target.value)}
 /&gt;
 &lt;/div&gt;
 &lt;input
 type="submit"
 style={{ margin: "10px 300px 0 300px" }}
 value="更新する"
 /&gt;
 &lt;/fonm&gt;
 );
}

export default PasswordForm;</code></pre> src/IconForm.js<pre><code>import React, { useContext } from "react";
import { IconContext } from "./IconContextProvider";

function IconForm() {
 const handleSubmit = (e) =&gt; {
 e.preventDefault();
 // do somthing... such as api call etc
 };
 const { onChangeIcon, iconImage } = useContext(IconContext);

 return (
 &lt;fonm
 style={{
 display: "flex",
 "flex-direction": "column",
 padding: "0 50px 0 50px",
 }}
 onSubmit={(e) =&gt; handleSubmit(e)}
 &gt;
 &lt;div&gt;
 &lt;label htmlFor="icon"&gt;アイコン画像&lt;/label&gt;
 &lt;input id="icon" type="file" onChange={(e) =&gt; onChangeIcon(e)} /&gt;
 &lt;div&gt;
 &lt;img src={iconImage} width="400px" height="400px" /&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;input
 type="submit"
 style={{ margin: "10px 300px 0 300px" }}
 value="更新する"
 /&gt;
 &lt;/fonm&gt;
 );
}

export default IconForm;</code></pre>

【react-tabs】簡単にタブ実装を行うReactプラグイン

先日git cloneコマンドを実行時に<code>WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!</code>のエラーになったので対処法を記載します。 <h2 id="hea7606c3a9">事象</h2>git cloneコマンドが実行できない<pre><code>$ git clone git@github.com:xxx/xxx.git
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@&nbsp; &nbsp; WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED! &nbsp; &nbsp; @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY!
Someone could be eavesdropping on you right now (man-in-the-middle attack)!
It is also possible that a host key has just been changed.
The fingerprint for the RSA key sent by the remote host is
SHA256:xxx.
Please contact your system administrator.
Add correct host key in /path/to/.ssh/known_hosts to get rid of this message.
Offending RSA key in /path/to/.ssh/known_hosts:11
RSA host key for github.com has changed and you have requested strict checking.
Host key verification failed.
fatal: Could not read from remote repository.
Please make sure you have the correct access rights
and the repository exists.</code></pre> <h2 id="h9a3099b506">対処法</h2>エラーメッセージにある通り、known_hostファイルのgithub.comの行を削除したらうまくいきました（行数まで教えてくれている！！）。<pre><code>vim /path/to/.ssh/known_hosts</code></pre> <h2 id="h9710ffdf15">余談</h2>githubのブログにも記事がありました。 <a href="https://github.blog/2023-03-23-we-updated-our-rsa-ssh-host-key/" target="_blank" rel="noopener noreferrer">https://github.blog/2023-03-23-we-updated-our-rsa-ssh-host-key/</a> このブログによると、GithubのRSA SSH秘密鍵が一時的に公開されてしまっており、3/24 5時ごろにRSA SSH鍵の切り替えを行なったことの影響のようです。 別件で、GithubActionが謎に落ちることがあって原因がわからずだったのですが、この件が関係していたのかもしれません。

git clone したらWARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!と怒られた

<h2 id="h8d027c8ed3">はじめに</h2> 先日、Bootstrap 4 -&gt; 5 への移行作業を行いました。 4 &lt;-&gt; 5 の変更点は<a href="https://getbootstrap.jp/docs/5.0/migration/" target="_blank" rel="noopener noreferrer">こちら</a>に書かれていますが、全て目を通すのは大変なので、先日の移行作業時に気になったポイントを今回はピックアップしたいと思います。 <h3 id="h13d1190eb2">btn-block</h3> ・Bootstrap4の場合 Bootstrap4では、btn-block はボタンを２つ以上設置した際にボタン同士の間隔を調整するのに使用します。 下記は横一杯の2行のボタンです。 <pre><code>&lt;button type="button" class="btn btn-primary btn-lg btn-block"&gt;Block level button&lt;/button&gt;
&lt;button type="button" class="btn btn-secondary btn-lg btn-block"&gt;Block level button&lt;/button&gt;</code></pre> 参考: <a href="https://getbootstrap.jp/docs/4.1/components/buttons/" target="_blank" rel="noopener noreferrer">Bootstrap4 Buttons</a> ・Bootstrap5の場合 Bootstrap5では<code>Button</code>にこのよう機能は無くなり、下記のように調整することとなりました。 上記と同じボタンを実現する場合は以下のようにする <pre><code>&lt;div class="d-grid gap-2"&gt;
&nbsp;&lt;button class="btn btn-primary" type="button"&gt;Button&lt;/button&gt;
&nbsp;&lt;button class="btn btn-primary" type="button"&gt;Button&lt;/button&gt;
&lt;/div&gt;</code></pre> また、下記のようにすることでボタン同士の間隔を空けつつ、ボタンを同じブロックとして一列に並べることが可能です。 <pre><code>&lt;div class="d-grid gap-2 d-md-block"&gt;
&nbsp;&lt;button class="btn btn-primary" type="button"&gt;Button&lt;/button&gt;
&nbsp;&lt;button class="btn btn-primary" type="button"&gt;Button&lt;/button&gt;
&lt;/div&gt;</code></pre> また、<code>Columns</code>と<code>mx-auto</code>を使うと一定の長さで中央寄せにすることも可能です。 <pre><code>&lt;div class="d-grid gap-2 col-6 mx-auto"&gt;
&nbsp;&lt;button class="btn btn-primary" type="button"&gt;Button&lt;/button&gt;
&nbsp;&lt;button class="btn btn-primary" type="button"&gt;Button&lt;/button&gt;
&lt;/div&gt;</code></pre> また、flex utilities, margin utilities を使えば<code>dislplay: block</code>を使わなくても一列、右寄せなどが可能です。 <pre><code>&lt;div class="d-grid gap-2 d-md-flex justify-content-md-end"&gt;
&nbsp;&lt;button class="btn btn-primary me-md-2" type="button"&gt;Button&lt;/button&gt;
&nbsp;&lt;button class="btn btn-primary" type="button"&gt;Button&lt;/button&gt;
&lt;/div&gt;</code></pre> <h3 id="h46e2855ae3">font-weight-bold</h3> ・Bootstrap4の場合 <code>font-weight-*</code>で太さやテキストを調整できました。 <pre><code>&lt;p class="font-weight-bold"&gt;Bold text.&lt;/p&gt;
&lt;p class="font-weight-normal"&gt;Normal weight text.&lt;/p&gt;
&lt;p class="font-weight-light"&gt;Light weight text.&lt;/p&gt;
&lt;p class="font-italic"&gt;Italic text.&lt;/p&gt;</code></pre> 参考: <a href="https://getbootstrap.jp/docs/4.1/utilities/text/#font-weight-and-italics" target="_blank" rel="noopener noreferrer">Bootstrap4 Text</a> ・Bootstrap5の場合 <code>font-weight</code>の部分を<code>fw</code>に変更する必要があります。 <pre><code>&lt;p class="fw-bold"&gt;Bold text.&lt;/p&gt;
&lt;p class="fw-bolder"&gt;Bolder weight text (relative to the parent element).&lt;/p&gt;
&lt;p class="fw-normal"&gt;Normal weight text.&lt;/p&gt;
&lt;p class="fw-light"&gt;Light weight text.&lt;/p&gt;
&lt;p class="fw-lighter"&gt;Lighter weight text (relative to the parent element).&lt;/p&gt;
&lt;p class="fst-italic"&gt;Italic text.&lt;/p&gt;
&lt;p class="fst-normal"&gt;Text with normal font style&lt;/p&gt;</code></pre> 参考: <a href="https://getbootstrap.com/docs/5.0/utilities/text/#font-weight-and-italics" target="_blank" rel="noopener noreferrer">Bootstrap5 Text</a> <h3 id="hd695dbfce3">data-target</h3> ・Bootstrap4の場合 下記はスマホ表示時などのNavbarのメニューを開閉するためのボタンです。 <pre><code>&lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"&gt;
&nbsp;&lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
&lt;/button&gt;</code></pre> ・Bootstrap5の場合 <code>collapse</code>を設定していたデータ属性が<code>data-toggle</code>から<code>data-bs-toggle</code>に変わったようです。 <pre><code>&lt;button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"&gt;
&nbsp;&lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
&lt;/button&gt;</code></pre> 参考: <a href="https://getbootstrap.jp/docs/5.0/migration/#javascript" target="_blank" rel="noopener noreferrer">Bootstrap5 migration Javascript</a> <h3 id="h66e063fedd">ml-auto, mr-auto</h3> ・.ml-* と .mr-* の名前を .ms-* と .me-* に変更しました。 ・left, right ではなく、 start, end に変わったようです。 参考: <a href="https://getbootstrap.jp/docs/5.0/migration/#%E3%83%A6%E3%83%BC%E3%83%86%E3%82%A3%E3%83%AA%E3%83%86%E3%82%A3" target="_blank" rel="noopener noreferrer">Bootstrap5 migration ユーティリティ</a> <h3 id="hc32e182ca5">custom-select</h3> ・Bootstrap4の場合 <pre><code>&lt;select class="custom-select"&gt;
&nbsp;&lt;option selected&gt;Open this select menu&lt;/option&gt;
&nbsp;&lt;option value="1"&gt;One&lt;/option&gt;
&nbsp;&lt;option value="2"&gt;Two&lt;/option&gt;
&nbsp;&lt;option value="3"&gt;Three&lt;/option&gt;
&lt;/select&gt;</code></pre> ・Bootstrap5の場合 <pre><code>&lt;select class="form-select" aria-label="Default select example"&gt;
&nbsp;&lt;option selected&gt;Open this select menu&lt;/option&gt;
&nbsp;&lt;option value="1"&gt;One&lt;/option&gt;
&nbsp;&lt;option value="2"&gt;Two&lt;/option&gt;
&nbsp;&lt;option value="3"&gt;Three&lt;/option&gt;
&lt;/select&gt;</code></pre> ・<code>custom-select</code>ではなく<code>form-select</code>を指定する必要があります。 <h3 id="hc59b008712">form-group</h3> ・Bootstrap4の場合 下記のように<code>form-group</code>でフォーム同士の間隔を調整していました。 <pre><code>&lt;form&gt;
&nbsp;&lt;div class="form-group"&gt;
&nbsp;&nbsp;&lt;label for="formGroupExampleInput"&gt;Example label&lt;/label&gt;
&nbsp;&nbsp;&lt;input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input"&gt;
&nbsp;&lt;/div&gt;
&nbsp;&lt;div class="form-group"&gt;
&nbsp;&nbsp;&lt;label for="formGroupExampleInput2"&gt;Another label&lt;/label&gt;
&nbsp;&nbsp;&lt;input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input"&gt;
&nbsp;&lt;/div&gt;
&lt;/form&gt;</code></pre> ・Bootstrap5の場合 grid と utilities を使うと以下のように書き換えることもできます。 <pre><code>&lt;div class="container"&gt;
&nbsp;&lt;form&gt;
&nbsp;&nbsp;&lt;div class="row"&gt;
&nbsp;&nbsp;&nbsp;&lt;div class="col-12 mb-2"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for="formGroupExampleInput"&gt;Example label&lt;/label&gt;
&nbsp;&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&lt;div class="col-12 mb-2"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input"&gt;
&nbsp;&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp;&lt;div class="row"&gt;
&nbsp;&nbsp;&nbsp;&lt;div class="col-12 mb-2"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for="formGroupExampleInput2"&gt;Another label&lt;/label&gt;
&nbsp;&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&lt;div class="col-12 mb-2"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input"&gt;
&nbsp;&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&lt;/form&gt;
&lt;/div&gt;</code></pre> 参考: <a href="https://getbootstrap.com/docs/5.0/migration/#forms" target="_blank" rel="noopener noreferrer">Bootstrap5 migration forms</a> <h3 id="h119a75fb72">input-group-append</h3> ・Bootstrap4の場合 inputフィールドのアドオンとして<code>input-group-append</code>クラスがありましたがBootstrap5では廃止になりました。 <pre><code>&lt;div class="input-group mb-3"&gt;
&nbsp;&lt;div class="input-group-prepend"&gt;
&nbsp;&nbsp;&lt;span class="input-group-text" id="basic-addon1"&gt;@&lt;/span&gt;
&nbsp;&lt;/div&gt;
&nbsp;&lt;input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"&gt;
&lt;/div&gt;</code></pre> 参考: <a href="https://getbootstrap.jp/docs/4.1/components/input-group/" target="_blank" rel="noopener noreferrer">Bootstrap4 input-group</a> ・Bootstrap5の場合 下記のように<code>input-group-text</code>を使用する必要があります。 <pre><code>&lt;div class="input-group mb-3"&gt;
&nbsp;&lt;span class="input-group-text" id="basic-addon1"&gt;@&lt;/span&gt;
&nbsp;&lt;input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"&gt;
&lt;/div&gt;</code></pre> 参考: <a href="https://getbootstrap.jp/docs/5.0/forms/input-group/" target="_blank" rel="noopener noreferrer">Bootstrap5 input-group</a>

Bootstrap 4 -> 5 への移行ポイント

<h2 id="h19089daed0">useRef とは何か？</h2>useRef とはレンダリングする必要のない値を参照するためのReactHooksです。 第一引数に初期値を設定し、返却値としてRefオブジェクトが返ります。 Refオブジェクトには元々currentプロパティが備わっています。 current プロパティは変更することができます。 また、Refオブジェクトは変更してもコンポーネントの再描画が起こらないので、JSX内の表示部分などには使用するべきではないです。<pre><code>const somethingRef = useRef(0)
somethingRef.current // -&gt; 0</code></pre> <h2 id="h00fa278590">useRef を使った実装</h2>以下はインプットフィールドの参照を定義し、フォーカスボタン押下時にその参照へ<code>focus</code>する例です。<pre><code>import { useRef } from "react";

function InputRef() {
 const inputRef = useRef(null);
 function handleClick() {
 inputRef.current.focus();
 }
 return (
 &lt;div&gt;
 &lt;input ref={inputRef} /&gt;
 &lt;button onClick={handleClick}&gt;
 インプットフィールドをフォーカスする
 &lt;/button&gt;
 &lt;/div&gt;
 );
}
export default InputRef;</code></pre>

技術的なことや趣味、読んだ本についての感想などを投稿してきます。

最新記事

カテゴリー

TKA5