WordPressのカスタマイズでcdnでの実装がうまくいかないため、npm moduleを使用したいと考えていますが可能なのでしょうか。
Larvelで使用していたコードを引用したいのですが、WPではコンパイルを行わないのでnpm moduleをimportする記述方式は使用できないでしょうか。
具体的にはFullcalenderを使用したいです。
下記の記事のようにファイル内でimportしてmoduleを利用したいです。
何で何を行っているか整理した質問にしてください。出てきた単語、
CDN、npm、Laravel、WordPressはそれぞれ別領域の別役割、別機構のため、
現状の質問本文では、何をどうしたいのか全く分かりません。
具体的にはFullcalenderを使用したいです。
下記の記事のようにファイル内でimportしてmoduleを利用したいです。
https://qiita.com/mball/items/f2fa679834ec74ec1e5f
本文にも追加しました。
なるほど、
であれば、まず、ReactとWordPressの仕組みを理解するところからかと。
Reactは、フロントエンドライブラリと呼ばれる機構のため、
基本的にサーバー上で動作するものではありません。
(サーバー上で、Node、TypeScriptを動かすようにするのならばその限りではない)
大方、Reactで作成したものを、コンパイル・ビルドしたファイル群を、サーバーにアップロードし、WordPress上で使用する形になります。
もし、TypeScript等で書いた構文ファイルをそのままアップロードして使いたいならば、
前述した通り、サーバー上で、Node、TypeScriptを動かす環境を、サーバー上で構築する必要があります。
さらに具体的にはWordPress管理画面のとあるページにそのカレンダーを差し込みたいのですが、
ローカルで開発を行い、ローカルでコンパイルしたあとサーバにアップという手順で構わないのですが、これであれば可能でしょうか。
wpのカスタマイズはテーマのfunctions.phpに行うのが基本となりますが、その場合npm initはテーマ内で行うのか、それともWPのインストールディレクトリ直下が良いのでしょうか。
> wpのカスタマイズはテーマのfunctions.phpに行うのが基本となりますが、その場合npm initはテーマ内で行うのか、それともWPのインストールディレクトリ直下が良いのでしょうか。
この時点で、勘違いされています。
Reactはフロントエンド、WordPressはバックエンド(サーバー上)で動作するものですので、
npmとWordPressは混在できる機構ではありません。
(npmをサーバー上で動作するよう環境を整えたならば、連携は可能かもしれない)
とかく、コンパイルしたファイル群を、サーバー上に上げて初めて、
使用できるものです(基本は)
そして、コンパイルしたファイルでは、npmは使われていません。
前述しておりますが、npmはローカル上でコンパイルする環境が整っているたという前提であれば組み込むことも可能かと考えましたが難しいのでしょうか。
wp-envのようにnpmでwordpress環境を構築するようなパッケージもでてきており、もしかするとこれで構築した環境であればnpmでのモジュールインポートが可能になりますでしょうか。
https://ts-fort.com/column/web-wp-env/
あくまで、Webページを表示する際に、NodeJSによってWebページを表示できる環境が整っているかどうかです。
(npmは、Node Package Manajorのことなので、結局NodeJSです)
Reactは、NodeJSによって、TypeScriptを動作させ、仮想環境によって、
順次コンパイルを行い、JS、HTML、CSSとして動くよう設計されています。
Webブラウザは、基本的には、HTML、CSS、JSしか解釈・動作させることはできませんので、
TypeScriptは解釈できません。
最終的には、ブラウザにHTML、CSS、JSとして認識させるしかありません。
よって、サーバー上で、NodeJSがWebページ(HTML、CSS、JS)を吐き出せる環境と、
Reactを動作する環境さえ整えれば、
Reactをそのまま使うことは可能かと思われます。
ただ、それって、知識も技術も必要で、ハードルが高いように感じます。
参考記事が示しているのは、あくまで”環境構築”の部分のため、
”NodeJSがサーバー上で動作する環境”がある前提の上で、
"NodeJSによってWordPressの統合環境をさっくり構築する"に留まっているように思います。
Reactをサーバー上で動作させるには、
「NodeJSがWebページをブラウザに返す」
「Reactのコンパイルを行えるようにする」
の二点が必要です。
また、WordPressにそれを組み込むのは、返って、ハードルが高くなるかと思います。
なぜなら、WordPressは、NodeJSではなく、"PHP"で動くものだからです。
NodeJSとPHPは全く別言語のプログラミング言語のため、
双方の連携は、そのままでは行えません。
ご丁寧にありがとうございます。
参考記事があくまで環境構築までの記事であることは承知しています。
WordPressがPHPで動くものであってもphpからjsファイルを読み込むことは可能であり、
そのjsファイルがコンパイルされたものであれば実装可能のように感じますが、間違った解釈でしょうか。
> そのjsファイルがコンパイルされたものであれば実装可能のように感じますが、間違った解釈でしょうか。
はい、それであってます。
コンパイルされたファイルをアップロードし、
そのJSファイルなどをWordPress上で使用する、のが一番手っ取り早いかと。
とかく、WordPress上から、
NodeJSをインポートする、というのはかなりハードルが高くなります。
そこを、サーバー上で動的にReactを動かしつつ、となれば、
NodeJSからは、API的にJSファイルなどを出力してもらい、
WordPress側は、APIを通してJSファイルなどを取得する、といった手法の方がまだ現実的です。
ありがとうございます。
あとは色々模索してみたいと思います。
もしよければ回答の箇所に適当にご回答いただければBAとさせていただきます。
いえ、自己解決できそうであれば、自己解決の投稿の方がよろしいかと。
コメントで書いている間に、回答になりそうな文章もあったかと思いますが、
流れ的にタイミングも逸してしまいましたし 汗
