JavaScript

1/2ページ

webpack5でJSとSassをコンパイル(CSSを別ファイルに出力)

webpack5を使ってJavaScriptとSassをコンパイルする方法を記録しておきます。 この記事では、以下の項目をコンパイル条件としています。 JavaScriptとCSSを別々のファイルで出力する。 出力先のCSSに自動でベンダープレフィックスを追加する。 production(本番環境用に)出力する場合のみコードを圧縮(軽量化)する。 development(開発環境用に)出力する場合 […]

WordPressでページ毎に別のJavaScriptを読み込む方法

以前、ショートコードを使って自作のPHPやJavaScriptを動かす方法を紹介しましたが、今回は、ページ毎に別々のJavaScriptを読み込む方法をご紹介します。 ファイルのアップロード まず、スクリプトファイルを用意します。 例えば、トップページ用のスクリプトを、 myscript_front.js その他のページ用が、 myscript_other.js すべてのページで共通して読み込みた […]

JavaScriptでselect要素のoption(項目)をセレクトする

JavaScriptでselect要素の、ある項目を選択状態にしたかった時に、ちょっとハマったのでメモ。 似たような処理で、JavaScriptでselect要素のデフォルトの項目を設定する方法がありますが、それと混同してしまったので、整理してみました。 はじめに 例えば、以下のようなセレクトボックスがあったとします。 [crayon-6176c09add20c145667344/] JavaSc […]

Laravel Mixを使ってjavascriptをコンパイルする

Laravelでjavascriptを使う場合、public / jsフォルダ内に置いて、Bladeファイルで読み込めば動きますが、今回は、Laravel Mixを使って複数のjavascriptファイルをまとめてコンパイルしたものを読み込んでみたいと思います。 前提 以下がインストールされている。 ・Laravel Mix ・node.js ・npm jsファイルの書き方 jsファイル単体でもコ […]

JavaScript、PHP、JSONの配列・連想配列の表記の仕方の違い

サイト作成時、JavaScript、PHP この2つの言語を常に連携してコードを書いていく事が多いですが、関数や変数の書き方が微妙に違ったり、どっちがどっちかよくわからなくなります。今回はJSONも含めた3者の配列の表記の仕方の違いをまとめてみようと思います。 配列 JavaScript [crayon-6176c09add446311832047/] シングルクォーテーション、ダブルクォーテーシ […]

PHPとJavaScriptの間で変数の値をやり取りする方法

PHPはサーバサイドプログラム、JavaScriptはクライアントサイドプログラムという構造上、PHPからJavaScriptへの渡し方は簡単ですが、JavaScriptからPHPへ渡す場合は、少し工夫が必要です。 PHP→JavaScript PHPの変数をJavaScriptに渡す方法は簡単で、一旦、JSON形式に変換することで可能です。 [crayon-6176c09add4cd231689 […]

【Javascript】Ajaxを使ってサーバ(PHP)にデータを渡す方法

Ajax「Asynchronous JavaScript + XML」を使ってJavaScriptからサーバ側(PHP)にデータを渡す事ができます。 サーバ側でデータを受け取って処理した後、JavaScript側に処理結果を返す事もできます。Ajaxは基本的に非同期で実行されます。 非同期について JavaScriptはデータを送った後、サーバ側(PHP)から処理結果が帰ってくるのを待たずに、次の […]

【JavaScript】クリックイベントが親要素に伝播しないようにする方法

例えば、メニューボタンを押すとメニューが開き、もう一度押すと閉じるというようなトグルボタンを設置する時、メニューを開いた状態で画面のどこかをクリックすると、メニューが閉じるという仕様になっている事が多い。 そこで自分も、そういう仕様を実装しようと、bodyなどにクリック判定をつけて、画面のどこかをクリックした時メニューを閉じるように実装した。 しかしこれでは、メニューボタンを押したとき、親要素のb […]

PHPでconsole.log(JavaScript)する1番簡単な方法

JavaScriptのconsole.logは、デバッグにとても便利ですよね。PHPを使ってる時も、たまに使いたくなっちゃいます。 そこで、例としてPHPの変数$paramを、JavaScriptのconsole.logを使って、コンソールに出力する方法をメモしておきます。 [crayon-6176c09add5b8739403901/] 解説 PHPの変数をJSON形式に変換してから、echoで […]