ReactとFullCalendarでWordPressのフロントをSPA化してカレンダーサイトを作る

• 公式github
• 公式ドキュメント
• FullCalendarを利用して簡単にカレンダーを作成する
• classではなく、const&exportで作る
• 【React】FullCalendarのカレンダーにイベントを表示するためのTips
• 月曜はじまりにする
• 何曜はじまりにでもできそう
• datesSet
• 月移動・日移動をしたときのイベントを取得する
• pluginから理解するFullCalendar with React
• 全体をひととおりさらっている記事
• FullCalendarをそこそこカスタマイズしてみる
• こちらも全体を把握したいときに
• React FullCalendar スニペット
• こちらも全体感
• FullCalendarの日本語化やオプションいろいろ
• オプションの確認したいときに
• V5 Release Notes and Upgrade Guide
• eventContentをカスタムしたいとき
• eventContentの位置づけがまだわかってない(時間とか色は含まれない?)
• FullCalendar React+TypeScript Example Projectを関数コンポーネントで書いてみる 01
• 下にも書いているが、
• FullCalendar | React サンプルプログラム
• サンプル

• Reactを使用してWordPressテーマを開発する方法
• ドンピシャこれ。
• WordPress 初めてのブロック開発
• ブロックエディターのほうだけど構築は参考になる
• 【テーマ自作】WordPress オリジナルテーマの作り方と基本
• Reactではなく、普通にPHPでWordPressのテーマを作る解説

React開発系

• Minified React error #62
• CSSはそのままかけない
• useState
• 状態を保存する場所と、更新するための関数を書いておくもの
• ここを更新すれば、該当場所を使っているところが一気に更新される
• このサイトのように、ページの内容を表示・非表示で切り替えたりするときにも使える
• useRef
• カレンダーオブジェクトを参照するためのもの
• FullCalendar描画の際にrefで設定した変数を呼んでおかないと参照が入らない(当たり前
• useEffect
• useEffectを使うとレンダリングが終わってから中身が実行される
• 末尾に配列で変数をつけると、指定した変数(状態)が変更されたときだけ実行される。便利
• 末尾の配列を空で渡すと、初回だけ実行される。便利
• onClickで引数使いたい
• 基本は使わないのがいいんだろうな
• Reactでscriptタグを読み込んでも表示されない
• scriptでsvgとか書く外部ライブラリを読み込みたいときに
• このライブラリを使うか、useEffectで直接展開するか、上位のhtmlやPHPに書いてしまうか
• 今回はWordPressだったので、上位のindex.phpに書いて対応
• 【React】selected属性を使わずにvalue属性を使う
• うーーーーーーんなるほどー？
• React18の新機能 Suspense機能を使ってローディング画面とエラー画面を表示してみよう
• 正直あんまり理解できていない
• クラスコンポーネントと関数コンポーネント
• 関数コンポーネントのほうがシンプルで使いやすい
• 素人なので、クラスコンポーネントのメリットがあまり理解できていないだけかも
• react-i18next
• 多言語対応したい部分を定義したキーにしておくことで、設定ファイルからそれぞれの言語の単語に置き換えられる。もちろん即時
• とはいえ、ヘッダやフッタの場合、単語いっこいっこ律儀にやるよりも、useStateと組み合わせてがばっと置き換えたほうがテンプレート管理がしやすい気もする
• react-i18nextを使って、React環境に1から多言語翻訳の仕組みを構築してみる
• Next.js × react-i18next で始める Web アプリの多言語対応
• 【React】i18nライブラリーを導入しプロジェクトを多言語対応する手順

• React notification components | Untitled UI
• よさそうなUIだが有料のようで断念
• Calendar component — Vuetify
• Vueで作るならこれかな・・Reactで進めたのであまり調べていない

WordPress開発系

• 【WordPress】WordPress から DB を操作する
• prepare、insert、updateなどでプレースホルダを使って安全に操作する
• WordPress REST API カスタムエンドポイントの作成
• 基本は記事とか固定ページのエンドポイントしかないので、このやり方でカレンダー用のデータを返却するエンドポイントを新たに作成
• WordPressでオリジナルのRest APIのエンドポイントを作る
• 上記同様、カスタムエンドポイントについての記事
• add_submenu_page
• WordPress管理画面にメニューを出すための設定。プラグインで使いがち
• メンテナンスページをカスタマイズするプラグイン
• 公開前サイトが味気ないのでなにか変えたいとき
• HTTP Auth
• いわゆるBasic認証をかけるプラグイン
• まだ公開したくないけど、特定の人にだけ見せたいときとか
• WordPress上でもコントロール可能だが、ユーザ追加が必要だったりするので不便
• ワードプレスでSQLインジェクションを防ぐPHPプログラミング
• 知らない人は一読を

その他

• .gitignoreで特定の拡張子のみ追跡対象にしたい
• 対象外を指定するのではなく、対象をしたいときに
• Element: scrollTo() メソッド
• 月のしたのほうの日付をクリックしたとき、とんださきのリストビューがフッターしか見えず、一番上に戻したいなと思ったときに