質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Q&A

1回答

432閲覧

WordPressのテーマ内でnpm moduleを使用する事は可能か。

Anon_

総合スコア334

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

0グッド

1クリップ

投稿2022/10/03 06:05

編集2022/10/03 07:46

WordPressのカスタマイズでcdnでの実装がうまくいかないため、npm moduleを使用したいと考えていますが可能なのでしょうか。
Larvelで使用していたコードを引用したいのですが、WPではコンパイルを行わないのでnpm moduleをimportする記述方式は使用できないでしょうか。

具体的にはFullcalenderを使用したいです。
下記の記事のようにファイル内でimportしてmoduleを利用したいです。

https://qiita.com/mball/items/f2fa679834ec74ec1e5f

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyabi_takatsuk

2022/10/03 07:21

何で何を行っているか整理した質問にしてください。出てきた単語、 CDN、npm、Laravel、WordPressはそれぞれ別領域の別役割、別機構のため、 現状の質問本文では、何をどうしたいのか全く分かりません。
Anon_

2022/10/03 07:46

本文にも追加しました。
miyabi_takatsuk

2022/10/03 07:55 編集

なるほど、 であれば、まず、ReactとWordPressの仕組みを理解するところからかと。 Reactは、フロントエンドライブラリと呼ばれる機構のため、 基本的にサーバー上で動作するものではありません。 (サーバー上で、Node、TypeScriptを動かすようにするのならばその限りではない) 大方、Reactで作成したものを、コンパイル・ビルドしたファイル群を、サーバーにアップロードし、WordPress上で使用する形になります。 もし、TypeScript等で書いた構文ファイルをそのままアップロードして使いたいならば、 前述した通り、サーバー上で、Node、TypeScriptを動かす環境を、サーバー上で構築する必要があります。
Anon_

2022/10/03 08:14

さらに具体的にはWordPress管理画面のとあるページにそのカレンダーを差し込みたいのですが、 ローカルで開発を行い、ローカルでコンパイルしたあとサーバにアップという手順で構わないのですが、これであれば可能でしょうか。 wpのカスタマイズはテーマのfunctions.phpに行うのが基本となりますが、その場合npm initはテーマ内で行うのか、それともWPのインストールディレクトリ直下が良いのでしょうか。
miyabi_takatsuk

2022/10/03 09:49

> wpのカスタマイズはテーマのfunctions.phpに行うのが基本となりますが、その場合npm initはテーマ内で行うのか、それともWPのインストールディレクトリ直下が良いのでしょうか。 この時点で、勘違いされています。 Reactはフロントエンド、WordPressはバックエンド(サーバー上)で動作するものですので、 npmとWordPressは混在できる機構ではありません。 (npmをサーバー上で動作するよう環境を整えたならば、連携は可能かもしれない) とかく、コンパイルしたファイル群を、サーバー上に上げて初めて、 使用できるものです(基本は) そして、コンパイルしたファイルでは、npmは使われていません。
Anon_

2022/10/04 02:28

前述しておりますが、npmはローカル上でコンパイルする環境が整っているたという前提であれば組み込むことも可能かと考えましたが難しいのでしょうか。 wp-envのようにnpmでwordpress環境を構築するようなパッケージもでてきており、もしかするとこれで構築した環境であればnpmでのモジュールインポートが可能になりますでしょうか。 https://ts-fort.com/column/web-wp-env/
miyabi_takatsuk

2022/10/04 02:49

あくまで、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は全く別言語のプログラミング言語のため、 双方の連携は、そのままでは行えません。
Anon_

2022/10/04 04:34

ご丁寧にありがとうございます。 参考記事があくまで環境構築までの記事であることは承知しています。 WordPressがPHPで動くものであってもphpからjsファイルを読み込むことは可能であり、 そのjsファイルがコンパイルされたものであれば実装可能のように感じますが、間違った解釈でしょうか。
miyabi_takatsuk

2022/10/04 07:30

> そのjsファイルがコンパイルされたものであれば実装可能のように感じますが、間違った解釈でしょうか。 はい、それであってます。 コンパイルされたファイルをアップロードし、 そのJSファイルなどをWordPress上で使用する、のが一番手っ取り早いかと。 とかく、WordPress上から、 NodeJSをインポートする、というのはかなりハードルが高くなります。 そこを、サーバー上で動的にReactを動かしつつ、となれば、 NodeJSからは、API的にJSファイルなどを出力してもらい、 WordPress側は、APIを通してJSファイルなどを取得する、といった手法の方がまだ現実的です。
Anon_

2022/10/04 08:00

ありがとうございます。 あとは色々模索してみたいと思います。
Anon_

2022/10/04 08:01

もしよければ回答の箇所に適当にご回答いただければBAとさせていただきます。
miyabi_takatsuk

2022/10/04 08:03

いえ、自己解決できそうであれば、自己解決の投稿の方がよろしいかと。 コメントで書いている間に、回答になりそうな文章もあったかと思いますが、 流れ的にタイミングも逸してしまいましたし 汗
guest

回答1

0

test testtest testtest testtest testtest test

投稿2022/10/03 06:54

hangmy1209

総合スコア9

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問