<p>Ubuntu 22.04 LTS で バーチャルホストを立ち上げる機会があったため、手順をメモしておきます。</p><h2 id="h874ce5b00a">1. 設定ファイルのディレクトリへ移動</h2><p>バーチャルホストの設定は <code>sites-available</code> に置く必要があります</p><div data-filename="bash"><pre><code class="language-bash">cd /etc/apache2/sites-available/</code></pre></div><h2 id="ha4320aab48">2. 既存の .conf をコピーする</h2><p>ゼロから書くのは手間なので、既にある <code>.conf</code> を流用します。</p><p>ここでは <code>foo.conf</code> という名前にしました。</p><div data-filename="bash"><pre><code class="language-bash">sudo cp 000-default.conf foo.conf</code></pre></div><p></p><h2 id="h123a15552e">3. 設定を書く</h2><p>コピーした <code>foo.conf</code> を開いて、中身を次のように書き換えます。</p><div data-filename="bash"><pre><code class="language-bash">Listen 8001
&lt;VirtualHost *:8001&gt;
 ServerName foo.com
 DocumentRoot /var/www/foo
&lt;/VirtualHost&gt;</code></pre></div><p>自分は <code>Listen 8001</code>を書き忘れて30分くらい詰まりました。</p><p>これを書かないとApacheがそのポートで待ち受けてくれません。</p><p>80番以外のポートを使うときは、忘れずに <code>Listen</code> も指定しましょう。</p><p></p><p><code>DocumentRoot</code> に指定したディレクトリ（ここでは <code>/var/www/foo</code>）も作成しておき、</p><p><code>index.html</code> など表示確認用のファイルも一緒に配置すると良いと思います。</p><p></p><h2 id="ha2c4bf10f7">4. サイトを有効化</h2><p><code>a2ensite</code> で作った設定を有効にします。</p><div data-filename="bash"><pre><code class="language-bash">sudo a2ensite foo.conf</code></pre></div><p>これで <code>sites-enabled</code> にシンボリックリンクが張られます。</p><p>無効にしたいときは <code>a2dissite foo.conf</code>を実行しましょう。</p><h2 id="h0fda2bd661">5. Apache を再起動</h2><p>設定を反映させるためにApacheを再起動します。</p><div data-filename="bash"><pre><code class="language-bash">sudo systemctl restart apache2</code></pre></div><p><code>sudo apache2ctl configtest</code> で構文チェックが可能です。</p><p>エラーが出た時はこのコマンドを使うと良いと思います。</p><h2 id="hba2317ebc0">6. 疎通確認</h2><p>最後は疎通確認を行います。</p><p>ブラウザで開くか、<code>curl</code> を叩いてちゃんと返ってくるかを確認してみます。</p><p><code>/var/www/foo</code> に置いたページのHTMLが返ってくれば成功です。</p><p></p>

Ubuntu 22.04 LTS で Apache のバーチャルホストを設定する

<p>レンタルサーバーにインストールされた WordPress を<br>ローカル環境にもインストールする場合、<br>データベース内のドメインをローカル環境用のドメインに書き換える必要があります。<br><br>別環境に引っ越しする場合は <a href="https://interconnectit.com/search-and-replace-for-wordpress-databases/" target="_blank" rel="noopener noreferrer">Search Replace DB</a> などブラウザで動作するプログラムを使用して書き換えますが、<br>今回はSQL文のみで書き換えを行ってみます。<br>また、テーブルやカラム単位ではなく、1つのデータベース内のドメインをまるごと書き換えます。<br><br>実行前に必ずデータベースのバックアップを取得してから実行してください。<br></p><h2 id="h5d746a97ca">動作環境</h2><p>以下の環境で動作を確認しました。</p><pre><code>- MySQL 5.7.39</code></pre><p><br></p><h2 id="h8a0743146d">操作手順</h2><h3 id="h43f2ff702b">1.  書き換え用のUPDATE文を一括で出力する</h3><p>以下のSQL文を実行してください。<br>SQL文内の「データベース名」「古いURL」「新しいURL」は適時書き換えをお願いいたします。<br></p><pre><code>USE データベース名;

SET @old_url = '古いURL';
SET @new_url = '新しいURL';

SELECT CONCAT('UPDATE `', TABLE_NAME, '` SET `', COLUMN_NAME, '` = REPLACE(`', COLUMN_NAME, '`, \'', @old_url, '\', \'', @new_url, '\');') AS sql_statements
FROM INFORMATION_SCHEMA.COLUMNS
WHERE TABLE_SCHEMA = DATABASE()
AND DATA_TYPE IN ('CHAR', 'VARCHAR', 'TEXT', 'TINYTEXT', 'MEDIUMTEXT', 'LONGTEXT');</code></pre><p><br></p><h3 id="h46599e5704">2. UPDATE文を実行する</h3><p>実行後は以下のような形式のSQL文が大量に出力されますので、それら全てを実行してください。<br>「カラム名」「古いURL」「新しいURL」はデータベースの内容に応じて自動的に書き換わります。<br></p><pre><code>UPDATE `wp_admin_columns` SET `list_id` = REPLACE(`カラム名`, '古いURL', '新しいURL');</code></pre><p><br>これで作業は終了です。<br>データベースを開いて書き換わっているか確認してください。</p>

MySQL 5.7.39 で特定のデータベース内に格納されたURLをすべて置き換える

<p>数ヶ月ぶりに記事を投稿したところ、Vercelから「デプロイに失敗しました」という内容のメールが届きました。<br>Vercelにアクセスしてログを確認すると、以下のようなエラーが出力されていました。<br></p><blockquote>Error: Node.js Version "12.x" is discontinued and must be upgraded. Please set Node.js Version to 18.x in your Project Settings to use Node.js 18.</blockquote><p>どうやら 12.x はサポートが終了したようです。<br><br>詳しく調べてみると、2022/10/03 にサポート終了の告知が公式ブログでなされていたようです。</p><blockquote>On October 3rd 2022, Node.js 12 will be disabled in the Project Settings and existing Projects that have Node.js 12 selected will render an error whenever a new Deployment is created. The same error will show if the Node.js version was configured in the source code.Node.js 12 is being deprecated</blockquote><p><a href="https://vercel.com/changelog/node-js-12-is-being-deprecated" target="_blank" rel="noopener noreferrer">Node.js 12 is being deprecated – Vercel</a><br>この機会に 18.x にアップデートしてみます。<br></p><h2 id="h8bb68ed570">Node.jsのアップデート</h2><p>まず、ローカル環境の Node.js を 18.x に更新してみます。<br>私の環境ではバージョン管理ツール Nodenv を使用しているため、<br>以下の方法は参考にならない可能性があります。<br>それぞれの構築方法に合わせてアップデートを行ってください。<br><br>まず、Nodenvからインストールできるバージョンを確認します。</p><pre><code>$nodenv install -l</code></pre><p><br>18.x の中で最もバージョンが新しい、18.12.0 をインストールすることにしました。<br>以下のコマンドを実行してインストールを行います。</p><pre><code>$nodenv install 18.12.0
$nodenv rehash</code></pre><p><br>正常にインストールできているか確認します。リストに 18.12.0が表示されれば成功しています。</p><pre><code>$nodenv versions
* 12.22.12
  18.12.0</code></pre><p><br>普段は 12.x で開発を行っているため、当ブログの開発にのみ使用するように設定します。<br>全体で使用したい場合は  <code>$nodenv global XX.XX.XX</code> というコマンドを実行してください。</p><pre><code>$nodenv local 18.12.0</code></pre><p><br>ルートディレクトリにバージョンのみ記載された .node-versions というファイルが作成されれば成功です。</p><pre><code>18.12.0</code></pre><p><br></p><h2 id="h08a3eb7c23">パッケージのアップデート</h2><p>アップデートが完了したのでパッケージのインストール後に起動してみましたが、<br>12.x で動作するよう構成されているため、エラーが出力されて動作しませんでしたので、<br>インストールされているパッケージのアップデートを行います。<br>私の環境では yarn v1 を使用してアップデートを行いました。<br><br><code>npm-check-updates</code>というパッケージをインストールします。<br>インストールされているパッケージの一括アップデートが可能となります。</p><pre><code>$yarn add npm-check-updates</code></pre><p><br>続いて以下のコマンドを実行します。<br>アップデートが必要なパッケージがリストアップされます。</p><pre><code>$yarn ncu</code></pre><p><br>続いて以下のコマンドを実行し、アップデートを行います。</p><pre><code>$yarn ncu -u</code></pre><p><br>成功すると package.json が書き換わります。<br>再度パッケージのインストールを実行します。</p><pre><code>$yarn install</code></pre><p><br>インストールが完了後、next.js を起動してみます。<br>エラーが出力されなくなったのでアップデート作業は完了です。</p><pre><code>$yarn dev</code></pre><p><br></p><h2 id="h14588fc126">Vercelで使用するNode.jsのバージョンを変更する</h2><p>最後にVercelで使用するNode.jsのバージョンを変更します。これは管理画面から変更が可能です。<br>バージョンを変更したいプロジェクトにアクセス後、Setting をクリックしてください。<br><br><img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/dc390a12c6fb4365aa21e8d506901ae3/vercel-dashboard-node.png?w=1287&amp;h=604" alt="Vercelの管理画面"><br>General の Node.js Version の値を 18.X に設定すれば作業は完了です。</p>

Vercel で使用する Node.js のバージョンを 12.X から  18.X にアップデートする

<p>さくらVPSにCPANをインストールし、Perlのモジュールをインストールできるようにしてみます。<br>MovableType をインストールしたかったのですが、モジュールの不足でエラーが出力されたので導入ついでに記事を書きました。<br></p><h2 id="h79513e3015">CPANとは？</h2><blockquote><strong>CPAN</strong>（シーパン、<strong>C</strong>omprehensive <strong>P</strong>erl <strong>A</strong>rchive <strong>N</strong>etwork）とは、<a href="https://ja.wikipedia.org/wiki/Perl" target="_blank" rel="noopener noreferrer">Perl</a>の<a href="https://ja.wikipedia.org/wiki/%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA" target="_blank" rel="noopener noreferrer">ライブラリ</a>・<a href="https://ja.wikipedia.org/wiki/%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB" target="_blank" rel="noopener noreferrer">モジュール</a>やその他のPerlで書かれたソフトウェアを集めた巨大な<a href="https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%BC%E3%82%AB%E3%82%A4%E3%83%96" target="_blank" rel="noopener noreferrer">アーカイブ</a>で、世界中の<a href="https://ja.wikipedia.org/wiki/%E3%82%B5%E3%83%BC%E3%83%90" target="_blank" rel="noopener noreferrer">サーバ</a>にその内容が<a href="https://ja.wikipedia.org/wiki/%E3%83%9F%E3%83%A9%E3%83%BC%E3%83%AA%E3%83%B3%E3%82%B0" target="_blank" rel="noopener noreferrer">ミラーリング</a>されている。再利用性・汎用性の高いモジュールが登録されており、Perlプログラマができるだけ<a href="https://ja.wikipedia.org/wiki/%E8%BB%8A%E8%BC%AA%E3%81%AE%E5%86%8D%E7%99%BA%E6%98%8E" target="_blank" rel="noopener noreferrer">車輪の再発明</a>をせずに済むための支援環境となっている。</blockquote><p>Perlのモジュールをコマンドからインストールできるようにするプログラムとなります。<br><a href="https://ja.wikipedia.org/wiki/CPAN" target="_blank" rel="noopener noreferrer">CPAN - Wikipedia</a><br></p><h2 id="h705f30e492">検証環境</h2><p>以下の環境で検証を実施しました。</p><pre><code>・CentOS Linux release 7.9.2009 (Core)</code></pre><p><br>CentOS のバージョン確認は以下のコマンドを実行してください。</p><pre><code>[XXX@XX-XXX-XXXX]# cat /etc/redhat-release</code></pre><p><br></p><h2 id="h6c90ec4024">導入手順</h2><p>まず、yum を使用して CPAN をインストールします。<br>rootユーザーで実行してください。</p><pre><code>[XXX@XX-XXX-XXXX]# yum -y install perl-CPAN</code></pre><p><br>つづいて CPAN を実行します。</p><pre><code>[XXX@XX-XXX-XXXX]# cpan</code></pre><p><br>実行後、以下のような長文が出力され、最後に質問されるので yes と入力します。</p><pre><code>CPAN is the world-wide archive of perl resources...
(中略)
Would you like me to configure as much as possible automatically? [yes] yes</code></pre><p><br>入力後、いくつか質問されますのですべて yes と入力していきます。<br>デフォルトが yes のため、入力せずにそのままエンターを押しても問題ありません。<br>その後、以下のようなテキストが出力されます。これでセットアップは完了です。</p><pre><code>cpan[1]&gt;</code></pre><p><br></p><h3 id="h51049a6b64">モジュールをインストールする</h3><p>さっそくモジュールをインストールしてみます。<br>ここでは HTML::Entities というモジュールをインストールしてみます。</p><pre><code>cpan[1]&gt; install HTML::Entities</code></pre><p><br>インストール状況を示すテキストが大量に出力されますので待機します。<br>その後以下のテキストが出力されればインストールは完了です。</p><pre><code>cpan[2]&gt;</code></pre><p><br></p><h3 id="h3cd954e103">CPANを終了する</h3><p>作業が完了したので CPAN を終了します。以下のコマンドを実行することで終了します。</p><pre><code>cpan[2]&gt; exit</code></pre><p><br></p><h3 id="h359aee1f05">CPANを再度起動したいときは</h3><p>CPANを再度起動したいときは cpan と入力すれば起動可能です。</p><pre><code>[XXX@XX-XXX-XXXX]# cpan</code></pre><p><br>以上となります。<br></p>

さくらVPSにCPANをインストールしてみる

<p>非常に小さな気付きですが、覚書として残しておきます。<br><br>MovableTypeのテンプレートに記事のURLを記述する場合、<br>URLを直書きしてもいいですが、記事のパーマリンクが編集された場合は<br>リンク切れとなってしまいます。修正には手動でテンプレートを編集する必要があります。</p><pre><code>&lt;a href="../blog/2022/03/news.html"&gt;&lt;/a&gt;</code></pre><p><br>受注案件などではクライアント側がパーマリンクを変更される機会も考えられるため、<br>自動で反映されるような仕様にすべきです。<br><br><code>&lt;MTEntires&gt;</code> の<code>id</code> モディファイアを使用することで<br>パーマリンクが自動で反映される仕様になります。</p><pre><code>&lt;mt:Entries id="112233"&gt;
  &lt;a href="&lt;$mt:EntryPermalink$&gt;"&gt;&lt;/a&gt;
&lt;/mt:Entries&gt;</code></pre><p><br><a href="https://www.movabletype.jp/documentation/appendices/tags/entries.html" target="_blank" rel="noopener noreferrer">MTEntries - テンプレートタグリファレンス | CMSプラットフォーム Movable Type ドキュメントサイト</a><br><br>記事のIDを調べる手間が発生しますが、リンク切れを事前に防ぐことが可能なため、<br>基本的にはこのような仕様で実装するようにしましょう。</p>

MovableTypeのテンプレートに記事のパーマリンクを直書きしないほうがよい

<p>macOS Catalina に CSSフレームワーク Compass をインストールしようとしたところ、<br>想像以上に手間取ってしまいました。<br><br>解決方法について日本語での情報がなかったため、まとめて記事として投稿することにしました。<br></p><h2 id="h98229beb66">Compassとは</h2><p>Compass は CSSフレームワークです。<br>SCSSと併用することで利用可能で、ベンダープレフィックスの自動付与、<br>CSSスプライトの自動作成など便利な機能がたくさん実装されています。<br><a href="http://compass-style.org/" target="_blank" rel="noopener noreferrer">Compass Home | Compass Documentation</a><br><br>2009年に作られたフレームワークであり、CSS3が普及し始めた頃にはよく使われていたようですが、<br>時代が進み、ブラウザの進化・より高機能な代替ソフトが開発された結果、<br>利用される機会がどんどん減り、2016年に開発が停止したという過去があります。<br><a href="https://tech.pepabo.com/2018/03/15/bye-bye-compass/" target="_blank" rel="noopener noreferrer">Compass の送別会 - ペパボテックブログ</a><br></p><h2 id="h705f30e492">検証環境</h2><p>以下の環境で検証をおこないました。</p><pre><code>macOS　Catalina 10.15.7</code></pre><p><br></p><h2 id="h04f8f4ecae">発生した問題</h2><p>Compass は gem形式 で提供されているため、Ruby を使用します。<br>macOS ビルトインの Ruby では gem のアップデートやインストールに失敗してしまいました。<br><br>公式サイトのインストール手順ページに沿って作業を進めました。<br><a href="http://compass-style.org/install/" target="_blank" rel="noopener noreferrer">Install the Compass Stylesheet Authoring Framework | Compass Documentation</a><br><br>まずは gemコマンド で Compass のインストールを試みます。</p><pre><code>gem install compass</code></pre><p><br>以下のようなエラー文が出力されました。</p><pre><code>ERROR:&nbsp; While executing gem ... (Gem::FilePermissionError)
You don't have write permissions for the /Library/Ruby/Gems/2.6.0 directory.</code></pre><p><br>エラー文的にパーミションの問題であると判断したため、<br>sudo をつけてコマンドを実行してみました。</p><pre><code>sudo gem install compass</code></pre><p><br>今度は別のエラーによりインストールが完了しませんでした。</p><pre><code>ERROR: Error installing compass:
ERROR: Failed to build gem native extension.</code></pre><p><br></p><h2 id="had0b1b94af">解決方法</h2><p>手詰まり状態となったため、Googleで解決方法について調査したところ、<br>StackOverflowに解決方法が紹介されていました。<br><a href="https://stackoverflow.com/questions/39381360/how-do-i-install-ruby-gems-on-mac" target="_blank" rel="noopener noreferrer">How do I install ruby gems on Mac</a><br><br>ビルトインの ruby を使用していることが原因なので、<br>rbenv 経由の ruby を使用してこの問題を回避します。<br><br>作業内容としては、Homebrew経由 で ruby をインストールしてパスを通し、<br>その後 rbenv をインストールし、rbenv を経由した ruby で gem のインストールを行います。<br><br>直接的な問題解決ではありませんが、Compass の使用が目的であるため、<br>あまり時間をかけるべき作業ではないと判断し、StackOverflowの手法に従いました。<br></p><h3 id="h13341b39a0">rbenvとは</h3><p>rubyのバージョン管理ができるソフトウェアです。<br>node.js 用に開発された nodenv など言語ごとに存在しています。<br></p><h3 id="h8676c207ae">作業手順</h3><p>1から順に実行してください。</p><pre><code>1.  brewパッケージのアップデート
brew update

2. ruby を homebrew でインストール
brew install ruby

# bash を使用している場合
echo 'export PATH=/usr/local/Cellar/ruby/(インストールされたバージョンを入力)/bin:$PATH' &gt;&gt; ~/.bash_profile
# パスの追加後、ターミナルに設定を反映する
source ~/.bash_profile 

3. rbenv と ruby-build を homebrew でインストール
brew install rbenv ruby-build

# bash を使用している場合
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' &gt;&gt; ~/.bash_profile
echo 'eval "$(rbenv init -)"' &gt;&gt; ~/.bash_profile  
# パスの追加後、ターミナルに設定を反映する
source ~/.bash_profile 

4. rbenv でインストール可能な ruby のバージョンをリストアップ
rbenv install -l

5. ruby 2.4.1 をインストール
rbenv install 2.4.1

# 特定のディレクトリで使用する ruby のバージョンを指定
rbenv local 2.4.1
# システム全体で使用する ruby のバージョンを指定
rbenv global 2.4.1

6. rbenv にインストールした ruby を認識させる
rbenv rehash</code></pre><p><br>rbenv を経由した ruby では gem のアップデートやインストールが問題なく実行できました。<br>Compass をインストールしてみます。</p><pre><code>1. gem のアップデート
gem update --system

2. conpass をインストール 
gem install compass</code></pre><p><br>インストールも正常に完了したため、Compassを使用してSCSSのコンパイルを実行してみます。<br>プロジェクトのルートディレクトリに <code>config.rb</code>  を作成し、以下のように記述します。</p><pre><code>http_path = "/"
css_dir = "css"
sass_dir = "css"
images_dir = "images"
javascripts_dir = "js"
output_style = :expanded 
relative_assets = true
line_comments = false</code></pre><p><br>SCSSファイルに以下の文を記述します。</p><pre><code>@import 'compass/css3/';</code></pre><p><br>ターミナルで以下のコマンドを実行します。</p><pre><code>compass w</code></pre><p><br>これでSCSSファイルが更新された際にコンパイルが行われるようになりました。</p>

<ul><li><a href="https://stackoverflow.com/questions/39381360/how-do-i-install-ruby-gems-on-mac" target="_blank" rel="noopener noreferrer">How do I install ruby gems on Mac</a></li></ul>

macOS Catalina に Compassをインストールしようとしたら詰まった件

<p>jQueryでドロップダウンメニューを実装してみます。<br></p><h2 id="h5a59f43619">ドロップダウンメニューとは</h2><p>プルダウンメニューとも呼ばれます。Webに限らずソフトウェアやアプリなど様々な場面でよく見かけるUIの一種です。</p><blockquote>プルダウンメニューとは、ソフトウェアやWebサイトなどにおけるメニューの表示方法の一種で、クリックなどの操作によって複数のメニュー項目を表示させるタイプの表示方法のことである。<br>ロールスクリーンを下ろすような動作で展開されるため「プルダウン」や「ドロップダウン」などと呼ばれている。</blockquote><p><a href="https://www.weblio.jp/content/%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%E3%83%80%E3%82%A6%E3%83%B3%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC#:~:text=%E3%83%97%E3%83%AB%E3%83%80%E3%82%A6%E3%83%B3%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%A8%E3%81%AF%E3%80%81%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2,%E3%81%A8%E5%91%BC%E3%81%B0%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8B%E3%80%82" target="_blank" rel="noopener noreferrer">「ドロップダウンメニュー」の意味や使い方 Weblio辞書</a><br></p><h2 id="h5ef7d69a3b">成果物</h2><p>1からCSSを書くのは時間がかかるので <strong>Bootstrap5</strong> のCSSをお借りました。<br>操作形態が異なるため、PCではマウスオーバー、モバイルではタップで展開するような仕様となっております。<br></p><h3 id="hce947c89f2">ナビゲーションの仕様について</h3><p>ブラウザ幅が<strong>768px</strong>以上であればリンクは折りたたまずに横並びで表示します。<br>ブラウザ幅が<strong>767.98px</strong>以下であれば、リンクを折りたたんで縦並びで表示します。<br> </p><h3 id="heb4384662b">ドロップダウンメニューの仕様について</h3><p>ブラウザ幅が<strong>768px</strong>以上であればリンクに<span style="color:#333333">マウスポインタが重なった際に展開を行います。</span><br>ブラウザ幅が<strong>767.98px</strong>以下であれば、リンクをクリックした際に<span style="color:#333333">展開を行います。</span></p><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fjs6we&display_name=CodeSandbox&url=https%3A%2F%2Fcodesandbox.io%2Fs%2Fjs6we&image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Fjs6we%2Fscreenshot.png&key=d640a20a3b02484e94b4b0a08440f627&type=text%2Fhtml&schema=codesandbox" width="1000" height="500" scrolling="no" title="CodeSandbox embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br></p><h2 id="h109f43f351">必要なHTMLを記述</h2><h3 id="h63091202a2">全体のHTML</h3><p>ナビゲーションも含めた全体のHTMLとなります。<br>まるごとコピペ頂いて問題ありません。</p><pre><code>&lt;nav class="navbar navbar-expand-md navbar-light bg-light"&gt;
    &lt;div class="container-fluid"&gt;
        &lt;a class="navbar-brand" href="#"&gt;Navbar&lt;/a&gt;
        &lt;button class="navbar-toggler" type="button"&gt;
        &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;div class="collapse navbar-collapse"&gt;
        &lt;ul class="navbar-nav ms-auto mb-2 mb-lg-0"&gt;
            &lt;li class="nav-item"&gt;
            &lt;a class="nav-link active" aria-current="page" href="#"&gt;Home&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#"&gt;Link&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item dropdown navbar-dropdown"&gt;
            &lt;a
                class="nav-link dropdown-toggle navbar-dropdown-toggle"
                href="#"
                role="button"
            &gt;
                Dropdown
            &lt;/a&gt;
            &lt;ul class="dropdown-menu navbar-dropdown-menu"&gt;
                &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;hr class="dropdown-divider" /&gt;&lt;/li&gt;
                &lt;li&gt;
                &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/nav&gt;</code></pre><h3 id="ha78001c723">ドロップダウンメニューの動作に必要なHTML</h3><p>PCでは  <code>.navbar-dropdown</code> にマウスポインタが重なるとドロップダウンメニューが展開します。<br><code>.navbar-dropdown-toggle</code>にイベントリスナーを設定してしまうと、展開したドロップダウンメニューに<br>マウスポインタを移動させた際に非表示となってしまいます。<br><br>モバイルでは<code>.navbar-dropdown-toggle</code> にクリックされるとドロップダウンメニューが展開します。<br><code>.navbar-dropdown</code>にイベントリスナーを設定してしまうと、展開したドロップダウンメニューをクリックした際に<br>非表示となってしまいます。<br><br>PCではドロップダウンメニュー全体、モバイルではリンク項目にだけイベントリスナーを設定しているイメージです。</p><pre><code>&lt;li class="nav-item dropdown navbar-dropdown"&gt;
    &lt;a
        class="nav-link dropdown-toggle navbar-dropdown-toggle"
        href="#"
        role="button"
    &gt;
        Dropdown
    &lt;/a&gt;
    &lt;ul class="dropdown-menu navbar-dropdown-menu"&gt;
        &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;hr class="dropdown-divider" /&gt;&lt;/li&gt;
        &lt;li&gt;
        &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/li&gt;</code></pre><p><br></p><h3 id="hcb7430d109">必要なJavaScriptを記述</h3><p>まるごとコピペ頂いて問題ありませんが、<br>1行目から3行目については ES modules の記法となるため、<br>不要であれば削除頂いても問題ありません。</p><pre><code>import $ from "jquery";
import "bootstrap/dist/css/bootstrap.min.css";
import "./index.css";


/**
 * ナビゲーションの開閉処理を有効化
 */
const enableNavBarToggle = () =&gt; {
    $(".navbar-toggler").on("click", function () {
        $(".navbar-collapse").slideToggle();
    });
};


/**
 * ナビゲーションの開閉処理を無効化
 */
const disableNavBarToggle = () =&gt; {
    $(".navbar-toggler").off();
};


/**
 * ナビゲーション内のドロップダウンメニューを有効化
 *
 * stop()
 * 第一引数: 現在のアニメーションをゴールまでジャンプさせるか否か
 * 第二引数: 待機状態のアニメーションを破棄するか否か
 */
const enableDropDownMenuNavBar = () =&gt; {
    $(".navbar-dropdown-menu").hide();
    $(".navbar-dropdown").on({
        mouseover: function () {
            $(this).find(".navbar-dropdown-menu").stop(false, true).slideDown(300);
        },
        mouseleave: function () {
            $(this).find(".navbar-dropdown-menu").stop(false, true).slideUp(300);
        },
    });
};


/**
 * ナビゲーション内のドロップダウンメニューを無効化
 */
const disableDropDownMenuNavBar = () =&gt; {
    $(".navbar-dropdown-menu").hide();
    $(".navbar-dropdown").off();
};


/**
 * ナビゲーション内のプルダウンメニュー処理を有効化
 */
const enablePullDownMenuNavBar = () =&gt; {
    $(".navbar-dropdown-toggle").on("click", function () {
        $(this).next().slideToggle();
    });
};


/**
 * ナビゲーション内のプルダウンメニュー処理を無効化
 */
const disablePullDownMenuNavBar = () =&gt; {
    $(".navbar-dropdown-toggle").off();
};


/**
 * 画面幅によって有効化と無効化する処理を振り分け
 */
const mediaQueryList = window.matchMedia("(max-width: 767.98px)");
const listener = (event) =&gt; {
    if (event.matches) {
        // 767.98px以下
        disableDropDownMenuNavBar();
        enableNavBarToggle();
        enablePullDownMenuNavBar();
    } else {
        // 768px以上
        disableNavBarToggle();
        disablePullDownMenuNavBar();
        enableDropDownMenuNavBar();
    }
};
mediaQueryList.addEventListener("change", listener);


/**
 * 処理の開始
 */
$(function () {
    listener(mediaQueryList);
});</code></pre><h3 id="hbfde2b377d">ブラウザ幅の取得について</h3><p><code>resize</code>はブラウザに負担がかかるため、間引き処理を実装する必要が出てきます。</p><pre><code>$(window).on('load resize', function(){
 // 処理を記述
});</code></pre><p>そのため、ブラウザ幅がブレイクポイントより 大きく or 小さく なったときに1度だけ実行される<br><code>window.matchMedia</code> をここでは使用しています。</p><pre><code>const mediaQueryList = window.matchMedia("(max-width: 767.98px)");
const listener = (event) =&gt; {
    if (event.matches) {
        // 767.98px以下
    } else {
        // 768px以上
    }
};
mediaQueryList.addEventListener("change", listener);</code></pre><h3 id="h63be7e2d99">イベントの登録について</h3><p>今回は <code>on</code> メソッドを使用して実装していますが、<code>hover</code> メソッドを使用して実装することも可能です。</p><pre><code>$(".navbar-dropdown").hover(
      function() {
        // mouseover
        $(this).find(".navbar-dropdown-menu").stop(false, true).slideDown(300);
      }, function() {
        // mouseleave
        $(this).find(".navbar-dropdown-menu").stop(false, true).slideUp(300);
      }
);</code></pre><p><br></p><h2 id="h3bcda3e6b0">最後に</h2><p>毎回ググってスクラッチで実装するのは時間の無駄なため、<br>記事として登録してすぐに参照できるように致しました。<br><br>実案件ではこのような仕様で実装をよく行うため、<br>よろしければご活用ください。</p>

<ul><li><a href="https://rinblog.org/jquery-drop-down-menu/" target="_blank" rel="noopener noreferrer">【jQuery】ドロップダウンメニューを簡単に実装する【2つ】</a></li></ul>

jQueryでドロップダウンメニューを実装する

<h2 id="h07e1c30a1d">ページネーションとは</h2><p>情報がたくさんあり、そのまま表示してしまうと読みづらいため、<br>ページを分割して情報を読みやすくするコンポーネントのことを指します。<br><br><img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/9fd12ca9e37343f5a694b83e3d0efde9/example-pagination.png" alt=""><br><br>Googleの検索結果ページの一番下などにも設置されており、<br>日常的に使用されているのはないでしょうか。<br>今回はES2015(ES6)を使用して、このコンポーネントを作成してみたいと思います。<br></p><h2 id="h5ef7d69a3b">成果物</h2><p>CodeSandboxを使用して実装致しました。</p><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2F16luq&display_name=CodeSandbox&url=https%3A%2F%2Fcodesandbox.io%2Fs%2F16luq&image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2F16luq%2Fscreenshot.png&key=d640a20a3b02484e94b4b0a08440f627&type=text%2Fhtml&schema=codesandbox" width="1000" height="500" scrolling="no" title="CodeSandbox embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><h3 id="hcf83e1357e"><br></h3><h2 id="hc499e4ad38">解説</h2><h3 id="h109f43f351">必要なHTMLを記述</h3><pre><code>&lt;div class="container"&gt;
&nbsp; &nbsp; &lt;div&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;span id="js-pagination-result-total"&gt;&lt;/span&gt;件中
&nbsp; &nbsp; &nbsp; &nbsp; &lt;span id="js-pagination-result-range-text"&gt;&lt;/span&gt;
&nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &lt;div&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;button id="js-button-prev"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 前へ
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/button&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;button id="js-button-next"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 次へ
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/button&gt;
&nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &lt;div&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;nav id="js-pagination-result-range"&gt;&lt;/nav&gt;
&nbsp; &nbsp; &nbsp; &nbsp; 現在のページ: &lt;span id="js-pagination-current"&gt;&lt;/span&gt;
&nbsp; &nbsp; &lt;/div&gt;
&lt;/div&gt;</code></pre><p><br></p><h3 id="heab1cdbf79">必要なJavaScriptを記述する</h3><p>jQueryは使用せず、ES2015(ES6)で書きました。<br>IE11などレガシーブラウザではそのままでは動作しません。<br>Babelなどを用いてトランスパイルしてください。</p><pre><code>// 前へ_DOM指定
const prevButton = document.getElementById("js-button-prev");
// 次へ_DOM指定
const nextButton = document.getElementById("js-button-next");

// 総数
const globalTotalItem = 100;
// 1ページに表示したい件数
const PER_PAGE = 10;
// 初期ページ
var initialPage = 0;
// 現在のページ
var currentPage = 0;

// 配列を任意の数だけ作成
const range = (start, end) =&gt; {
  const array = [...Array(end - start + 1)].map((_, i) =&gt; {
    return start + i;
  });
  return array;
};

// 閲覧中の情報の件数の範囲を表示
const rangeCurrentPage = () =&gt; {
  if (!globalTotalItem) return;
  const start = currentPage * PER_PAGE + 1;
  const text =
    (currentPage + 1) * PER_PAGE &lt; globalTotalItem
      ? `${start}件〜${(currentPage + 1) * PER_PAGE}件目を表示`
      : `${start}件〜${globalTotalItem}件目を表示`;
  return text;
};

// 前へボタン_アクション
prevButton.addEventListener("click", () =&gt; {
  if (initialPage &gt;= currentPage) return;
  currentPage = currentPage - 1;
  render();
});
// 次へボタン_アクション
nextButton.addEventListener("click", () =&gt; {
  if (PER_PAGE * (currentPage + 1) &gt;= globalTotalItem) return;
  currentPage = currentPage + 1;
  render();
});

// レンダリング
const render = () =&gt; {
  document.getElementById(
    "js-pagination-result-total"
  ).innerHTML = globalTotalItem;
  document.getElementById("js-pagination-result-range").innerHTML = range(
    1,
    Math.ceil(globalTotalItem / PER_PAGE)
  );
  document.getElementById(
    "js-pagination-result-range-text"
  ).innerHTML = rangeCurrentPage();
  document.getElementById("js-pagination-current").innerHTML = currentPage + 1;
};

render();</code></pre><p><br>ここまでに紹介したHTMLとJSをコピペいただければ<br>問題なく動作するはずです。<br>ページ番号にリンクは指定されていないため、必要であれば自身で追加をお願いします。<br></p><h2 id="h3bcda3e6b0">最後に</h2><p>もともと「○○件中 ○○件 ~ ○○件を表示」のテキストを出力するためスクリプトでしたが、<br>それだけではテストしづらいため、ページ番号を操作できるパーツをいくつか追加致しました。</p>

JavaScript(ES6) でページネーションを作成する

<h2 id="h1897a1eff6">開発環境について</h2><p>以下の環境、ソフトウェアで開発を行いました。<br>Ant Desing はUIライブラリのため必須ではありませんが、<br>TODOアプリに最低限必要なコンポーネントがすべて用意されているため、<br>開発期間の短縮を目的に使用させていただきました。</p><pre><code>React 17.0.2
Redux 7.2.4
Ant Desing 4.16.6</code></pre><p><br></p><h2 id="h5ef7d69a3b">成果物</h2><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fhskwg&display_name=CodeSandbox&url=https%3A%2F%2Fcodesandbox.io%2Fs%2Fhskwg&image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Fhskwg%2Fscreenshot.png&key=d640a20a3b02484e94b4b0a08440f627&type=text%2Fhtml&schema=codesandbox" width="1000" height="500" scrolling="no" title="CodeSandbox embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br></p><h2 id="h00558bbc38">Reduxについて</h2><p>歴史のあるライブラリのため、<a href="https://redux.js.org/tutorials/fundamentals/part-1-overview" target="_blank" rel="noopener noreferrer">公式ドキュメント</a>も充実していますし、<br>わかりやすく紹介されているブログもたくさんあるため、ここでは簡単な説明のみを行います。<br></p><h3 id="ha86a6bfbe6">Reduxとは</h3><p><strong>Action</strong> と呼ばれるイベントを使用してアプリケーションの状態の管理や更新を行うライブラリです。<br><br><strong>Store</strong> と呼ばれる大きな箱が1つだけ用意されており、そこで <strong>State</strong> の管理を行います。<br>どのコンポーネントからでも取得と更新が可能であるため、<br>個々のコンポーネントの状態管理としては使用せず、<br><strong>アプリケーション全体の状態管理</strong>として使用するのに適しています。<br><br><strong>Store </strong>の更新には大きくわけて3つの手続きを踏む必要があり、<br><strong>必ず左から順番に実行される</strong>という特徴を持ちます。</p><pre><code>Action &gt; Reducer &gt; Store</code></pre><p>そのため、データの流れが追いやすくなるというメリットがあります。<br>ただ、複数回の手続きが必要になるためどうしてもコード量が増えてしまいます。<br>小規模なアプリに採用しても時間がかかるだけなので、<strong>中規模以降のアプリに採用すべき</strong>です。<br></p><h3 id="h2fe7453683">3つの原則</h3><p>Redux には3つの原則があります。<br>これらのルールを守ることでバグの発生を防ぐことができます。</p><pre><code>Single source of truth
State is read-only
Changes are made with pure functions</code></pre><p><a href="https://redux.js.org/understanding/thinking-in-redux/three-principles" target="_blank" rel="noopener noreferrer">Three Principles</a><br></p><h3 id="hf744e42219">Redux Toolkitについて</h3><p>今回は <strong>Redux</strong> と<strong> React-Redux</strong> だけを使用しているため、コードの総量がかなり多くなっていますが、<br><strong>Redux Toolkit </strong>というパッケージを併用すれば、もっと簡単に書くことが可能です。<br><br><strong>公式ドキュメントでも使用が推奨</strong>されているため、<br>新しいプロジェクトを立ち上げる場合は併用することをオススメします。<br><a href="https://redux-toolkit.js.org/introduction/getting-started" target="_blank" rel="noopener noreferrer">Getting Started with Redux Toolkit</a><br></p><h2 id="hbbc6673007">Actionを定義する</h2><p>まずは Action を定義しましょう。<br><br>最終的に、以下のようなオブジェクトを用意する必要があり、<br>これを <strong>Actionオブジェクト</strong> と呼びます。</p><pre><code> return {
    type: "起こしたいアクション名",
    payload: "ユーザーが行った操作"
};</code></pre><p><br></p><h3 id="ha81c98c056">Action Typesを定義する</h3><p>起こしたい Action の名前を決めます。<br>ユニークな値でなければならないため、定数として定義いたします。</p><pre><code>const CREATE_TASK = "CREATE_TASK";
const DELETE_TASK = "DELETE_TASK";</code></pre><p><br></p><h3 id="h12ad2397da">Action Creatorsを定義する</h3><p>行いたい Action とユーザーが操作した値が返却される関数を作成します。</p><pre><code>export const createTask = (task) =&gt; {
  return {
    type: CREATE_TASK,
    payload: task
  };
};
export const deleteTask = (id) =&gt; {
  return {
    type: DELETE_TASK,
    payload: id
  };
};</code></pre><p><br></p><h2 id="he419f5e19b">Reducersを定義する</h2><p>次に Reducers を定義します。</p><h3 id="h3d4d996670">Reducer関数を定義する</h3><p>現在の状態 <code>todo</code> と、先程定義した Action の2つを引数として受け取ります。<br>Reduxは初回起動時には状態を持っていません。<code>initialState</code> を代入して状態を作成します。</p><pre><code>const initialState = [];

function taskReducer(todo = initialState, action) {
  const { type, payload } = action;
  switch (type) {
    case CREATE_TASK:
      return [...todo, payload];
    case DELETE_TASK:
      return todo.filter((t) =&gt; t.id !== payload);
    default:
      return todo;
  }
}</code></pre><p><br></p><h3 id="h297ca690ea">複数のReducersを1つにまとめる</h3><p><code>combineReducers</code> という関数を使用すれば複数の Reducers を1つにまとめることが可能です。<br>今回は Reducers が1つしかないため使用する必要はありませんが、<br>特に動作への影響はなく、後で Reducers が追加された際に書き直しが不要となるため使用しています。</p><pre><code>import { combineReducers } from "redux";

export const rootReducer = combineReducers({
  task: taskReducer
});</code></pre><p><br></p><h2 id="hfa545cbd3b">Storeを作成</h2><p>次に状態管理を行う <strong>Store</strong> を定義します。</p><h3 id="h8caaef373d">ストアインスタンスを作成する</h3><p><code>createStore</code> を実行し、<span style="color:#1c1e21">ストア</span>インスタンスを作成します。<br>第1引数に定義したReducers の <code>rootReducer</code>、第2引数に初期状態を示す変数 &nbsp;<code>initialState</code> を指定して実行します。</p><pre><code>import { createStore } from "redux";

const initialState = {};
const store = createStore(rootReducer, initialState);

export default store;</code></pre><p><br></p><h3 id="he366b8384e">ReactにStoreを提供</h3><p><code>&lt;App /&gt;</code> に <code>&lt;Provider&gt;</code> をラップします。<br>ここまでの繋ぎこみが完了すれば、以降は Action が実行されるたびに状態の更新が行われます。</p><pre><code>import ReactDOM from "react-dom";
import App from "./App";

import { Provider } from "react-redux";
import store from "./store";
import "antd/dist/antd.css";

const rootElement = document.getElementById("root");
ReactDOM.render(
  &lt;StrictMode&gt;
    &lt;Provider store={store}&gt;
      &lt;App /&gt;
    &lt;/Provider&gt;
  &lt;/StrictMode&gt;,
rootElement
);</code></pre><p><br></p><h2 id="hfc9a4a9a8f">状態管理を行う</h2><p>コンポーネント内で <strong>Store</strong> の取得と更新を行います。どちらも専用の関数を使用します。</p><h3 id="h0dacf234c4">タスクの仕様</h3><p>先にタスクがどのような形式で保存されるのか解説致します。<br>タスクの内容と、固有のIDを持ったオブジェクト形式で保存を行います。<br>IDは <code>generateId</code> という関数を使って作成しています。</p><pre><code>{
  task: "タスクの内容"
  id: 12345678
}</code></pre><h3 id="ha6edad7201"><br>状態の取得を行う</h3><p>Store の状態を取得するには <code>useSelector</code> という関数を使用します。</p><pre><code>import { useSelector } from "react-redux";
const App = () =&gt; {
  const tasks = useSelector((state) =&gt; state.task);
}</code></pre><p><br></p><h3 id="h45e7e66525">状態の更新を行う</h3><p>Store の状態を更新するには <code>useDispatch</code> という関数を使用します。</p><pre><code>import { useDispatch } from "react-redux";
const App = () =&gt; {
&nbsp; &nbsp; const dispatch = useDispatch();
&nbsp; &nbsp; let normalize = {
&nbsp; &nbsp; &nbsp; &nbsp; task: task,
&nbsp; &nbsp; &nbsp; &nbsp; id: generateId()
&nbsp; &nbsp; };
&nbsp; &nbsp; dispatch(createTask(normalize));
}

</code></pre><h3 id="h930f2d92d4"><br>タスクの削除</h3><p>タスク削除用関数の引数に <code>id</code> を指定した状態で実行します。<br>この関数は保存済みタスクの <code>id</code> と引数の <code>id</code> を比較、一致しないタスクのみを返却します。</p><pre><code>dispatch(deleteTask(item.id))</code></pre><p><br></p><h2 id="hf8a9587c26">全体のコード</h2><p>全体のコードは以下のようになります。コピペいただければそのまま動作します。</p><pre><code>import React, { useState, useEffect } from "react";
import { Button, Input, Row, Col, Typography, List } from "antd";
import { useDispatch, useSelector } from "react-redux";
import { createTask, deleteTask } from "./redux";
import "./styles.css";

const App = () =&gt; {
&nbsp; const [task, setTask] = useState("");
&nbsp; const [inputEmptyError, setInputEmptyError] = useState(false);

&nbsp; const dispatch = useDispatch();
&nbsp; const tasks = useSelector((state) =&gt; state.task);

&nbsp; useEffect(() =&gt; {}, [dispatch]);

&nbsp; const generateId = () =&gt; {
&nbsp; &nbsp; const strong = 1000;
&nbsp; &nbsp; return (
&nbsp; &nbsp; &nbsp; new Date().getTime().toString(16) +
&nbsp; &nbsp; &nbsp; Math.floor(strong * Math.random()).toString(16)
&nbsp; &nbsp; );
&nbsp; };

&nbsp; const handleInput = (e) =&gt; {
&nbsp; &nbsp; const value = e.target.value;
&nbsp; &nbsp; setTask(value);
&nbsp; };

&nbsp; const handleSubmit = () =&gt; {
&nbsp; &nbsp; if (!task) {
&nbsp; &nbsp; &nbsp; setInputEmptyError(true);
&nbsp; &nbsp; &nbsp; return;
&nbsp; &nbsp; } else {
&nbsp; &nbsp; &nbsp; setInputEmptyError(false);
&nbsp; &nbsp; }
&nbsp; &nbsp; let normalize = {
&nbsp; &nbsp; &nbsp; task: task,
&nbsp; &nbsp; &nbsp; id: generateId()
&nbsp; &nbsp; };
&nbsp; &nbsp; dispatch(createTask(normalize));
&nbsp; &nbsp; initialForm();
&nbsp; };

&nbsp; const initialForm = () =&gt; {
&nbsp; &nbsp; setTask("");
&nbsp; };

&nbsp; return (
&nbsp; &nbsp; &lt;div className="App"&gt;
&nbsp; &nbsp; &nbsp; &lt;div className="container"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;section&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;List
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="taskList"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; itemLayout="horizontal"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dataSource={tasks}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; renderItem={(item) =&gt; (
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;List.Item
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; actions={[
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Button onClick={() =&gt; dispatch(deleteTask(item.id))}&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 削除
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/Button&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {item.task}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/List.Item&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/section&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;section&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Row&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Col span={20}&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Input
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="task"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={handleInput}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={task}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placeholder="タスク内容を入力"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {inputEmptyError &amp;&amp; (
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Typography.Text type="danger"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; タスク内容は入力必須です。
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/Typography.Text&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/Col&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Col span={4}&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Button type="primary" onClick={handleSubmit} block&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 追加
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/Button&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/Col&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/Row&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/section&gt;
&nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &lt;/div&gt;
&nbsp; );
};

export default App;</code></pre><p><br></p><h2 id="h3bcda3e6b0">最後に</h2><p>より詳しい情報が知りたくなったときは公式ドキュメントを参照してください。<br>以上で解説は終了です。お疲れ様でした。</p>

<ul><li><a href="https://redux.js.org/" target="_blank" rel="noopener noreferrer">Redux - A predictable state container for JavaScript apps. | Redux</a></li><li><a href="https://www.wakuwakubank.com/posts/703-react-redux/" target="_blank" rel="noopener noreferrer">Redux(Actions, Reducers, Store)による状態管理</a></li></ul>

React と Redex でTODOアプリを作ってみる

<p>今回は<a href="https://ja.wordpress.org/plugins/all-in-one-seo-pack/" target="_blank" rel="noopener noreferrer">All in One SEO</a>を使用してFacebookとWordPressとの連携を行います。<br></p><h2 id="h5d746a97ca">動作環境</h2><p>以下の環境で動作を確認しました。</p><pre><code>WordPress 5.7.2
All in One SEO 4.1.1.1
Facebook Graph API v10.0</code></pre><p><br></p><h2 id="hf0465effb3">連携について</h2><h3 id="h94c2df26e9">どうすれば連携扱いとなるのか</h3><p>最終的にブログ記事の<code>&lt;head&gt;</code> に下記のようなタグを挿入することができれば、<br>連携できたことになります。<br><br>Facebook 管理者 ID</p><pre><code>&lt;meta property="fb:admins" content="" /&gt;</code></pre><p><br>Facebook App ID</p><pre><code>&lt;meta property="fb:app_id" content="" /&gt;</code></pre><p><br><code>content=""</code> には固有のIDが入ります。<br>このIDの取得には<a style="background-color:#ffffff" href="https://developers.facebook.com/" target="_blank" rel="noopener noreferrer">Facebookデベロッパーツール</a>への登録が必要となります。<br>取得したIDを<a style="background-color:#ffffff" href="https://ja.wordpress.org/plugins/all-in-one-seo-pack/" target="_blank" rel="noopener noreferrer">All in One SEO</a>を使用してmetaタグに変換し、ブログ記事に動的な挿入を行います。<br></p><h3 id="hde256594dd">必ずしも2つ必要なわけではない</h3><p>ブログ記事をシェアする際にOGPタグを有効にしたいだけであれば、<br>「Facebook 管理者 ID」のみを埋め込むだけでも問題はありません。<br></p><h3 id="ha26d79706a">連携しないとどうなるのか</h3><p>ブログ記事をシェアする際にOGPタグが正常に読み込まれません。<br>URLを挿入しても、以下のようにドメインとページ名の表示しか行われません。<br><br><img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/2b3c005c95de4e69a53c1ff7175c3fa2/facebook-notwork-ogp.png" alt=""><br><br>連携ができている場合は以下のような表示となります。<br>アイキャッチ画像、記事名、本文から抜粋したテキストが正常に表示されています。<br><br><img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/f0f2a91f4a7f47acaf0f32b01d3e2d06/facebook-work-ogp.png" alt=""><br></p><h2 id="hb021f1d9d0">Facebookデベロッパーツールでアプリを作成する</h2><h3 id="ha6a2ae4059">Facebookデベロッパーツールに登録する</h3><p>Facebook個人用アカウントから登録を行います。<br><a style="background-color:#ffffff" href="https://developers.facebook.com/" target="_blank" rel="noopener noreferrer">Facebookデベロッパーツール</a><br><br>具体的な登録方法については下記の記事が参考になります。<br>特に難しいことはなく、画面の指示に従っていけば問題ありません。<br><a href="https://www.sakurasaku-labo.jp/blogs/facebook-developer" target="_blank" rel="noopener noreferrer">Facebookデベロッパーツール（Facebook for developers）の登録手順と使い方</a><br></p><h3 id="h82f682a3ab">新しいアプリを作成する</h3><p>登録が完了すれば、アプリ一覧画面へアクセスが可能となります。<br>画面右上の「アプリを作成」をクリックしてください。<br><img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/b37202c7cd5641b89235ee7429f699ab/fbd-applist.png" alt=""><br><br>クリックするとこのようなモーダルウインドウが表示されるため、<br>「ビジネス」を選択して「次へ」をクリックしてください。<br><br><img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/12ebc01024df4a96ab74562d377eceaa/fbd-regist-1.png" alt=""><br><br>アプリ表示名を入力します。ここでは「WordPress用」にしました。<br>2つ下にあるアプリの目的を選択し、「アプリを作成」をクリックしてください。<br><br><img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/553e8b1affb2492db0b587333ac874a0/fbd-regist-2.png" alt=""><br><br>以下のようなページに移動します。左上に「アプリID」をメモしてください。<br><br><img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/37912ed6142b42ebba16ffed4030c0c2/fbd-dashboard.png" alt=""><br><br>ヘッダーの「ツール」をクリックし、「グラフAPIエクスプローラ」をクリックしてください。<br><br><img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/17dca404773b48f093591b27147a40e9/fbd-dashboard-explorer-lead.png" alt=""><br><br>以下のようなページに移動します。右の「Generate Access Token」をクリックしてください。<br>パスワード入力のウインドウがポップアップで表示されるため、入力して認証を行ってください。<br><br><img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/3eaff18213ba46388ff18143530dcf56/fbd-dashboard-explorer.png" alt=""><br><br>認証完了後、アクセストークンに文字列が入力されるため、<br>右上の「送信」をクリックしてください。<br>画面中央に「id」が表示されるためメモしてください。<br>これが<strong>管理者ID</strong>となります。<br><br><img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/3bc3ed23e90c4206a785afe2f3d5eabf/fbd-dashboard-explorer-get-req.png" alt=""><br><br>これで<a style="background-color:#ffffff" href="https://developers.facebook.com/" target="_blank" rel="noopener noreferrer">Facebookデベロッパーツール</a>での操作は終了です。<br>次はWordPressの操作に移ります。<br></p><h2 id="h30e5259d77">プラグインをインストールする</h2><p>WordPress管理画面から行ってください。<br>サイドバーの「プラグイン」&gt; 画面右上の「新規追加」&gt; 画面右上の検索ボックスから<br>「All in one」などのキーワードで検索を行い、インストールを行います。<br><br><img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/052b0ab4106e465b9f1fd7b35f5c2ca3/install-aioseo.png" alt=""><br><br>初回インストールの場合、セットアップウィザードが始まります。<br>環境に応じて設定を行ってください。私はデフォルトのままにしておきました。<br><br><img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/0d7a5bdc9ff64ba18dc83abc93e3ac03/setup-aioseo.png" alt=""><br><br>セットアップが終了後、サイドバーの「 All in One SEO」&gt;「ソーシャルネットワーク」をクリックし、<br>画面上部の「Facebook」をクリックします。以下のようなページに移動します。<br><br><img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/832fcd42ce774fe6b6fc8b1b7e0fe3b3/wp-aioseo-facebook-lead.png" alt=""><br><br>スクロールすると「高度な設定」があり、<br>「Facebook 管理者 ID」と「Facebook App ID」にメモしたIDを入力してください。<br><br><img src="https://images.microcms-assets.io/assets/04d035d8b8b6483ab5e5d941853db4b9/5f24c0d676cf44b88ca1505a3a6fbf2b/wp-aioseo-facebook.png" alt=""><br><br>完了後はブログ記事のソースを確認しましょう。<br>以下のタグが追加されていれば設定は完了です。</p><pre><code>&lt;meta property="fb:admins" content="" /&gt;
&lt;meta property="fb:app_id" content="" /&gt;</code></pre><p><br>以上となります。お疲れさまでした。</p>

最新の投稿

カテゴリ