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の位置づけがまだわかってない(時間とか色は含まれない?)

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

React開発系

• Minified React error #62
• CSSはそのままかけない
• useState
• 状態を保存する場所と、更新するための関数を書いておくもの
• ここを更新すれば、該当場所を使っているところが一気に更新される
• useRef
• カレンダーオブジェクトを参照するためのもの
• FullCalendar描画の際にrefで設定した変数を呼んでおかないと参照が入らない(当たり前
• useEffect
• useEffectを使うとレンダリングが終わってから中身が実行される
• 末尾に配列で変数をつけると、指定した変数(状態)が変更されたときだけ実行される。便利

• 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() メソッド
• 月のしたのほうの日付をクリックしたとき、とんださきのリストビューがフッターしか見えず、一番上に戻したいなと思ったときに