タイトルにあるようなサイト構築をここ1ヶ月ぐらいやっていました。
いろんなサイトを参考にしながらまあまあできてきたんで、ブックマーク代わりに記事作成。
参考にしたサイト
FullCalendar系
- 公式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を構築する系
- Reactを使用してWordPressテーマを開発する方法
- ドンピシャこれ。
- WordPress 初めてのブロック開発
- ブロックエディターのほうだけど構築は参考になる
- 【テーマ自作】WordPress オリジナルテーマの作り方と基本
- Reactではなく、普通にPHPでWordPressのテーマを作る解説
React開発系
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ライブラリーを導入しプロジェクトを多言語対応する手順
カレンダーUI系
- 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() メソッド
- 月のしたのほうの日付をクリックしたとき、とんださきのリストビューがフッターしか見えず、一番上に戻したいなと思ったときに
0 件のコメント:
コメントを投稿