開発環境

Laravel　５．６
Mac

実現したいこと

Laravelで作成した掲示板にて、投稿に対するコメントができるのですが、
既存のコメントの編集をする際、画面上のコメントの文字をクリックしたらそこが入力フォームに変化するような機能を実装したいです。

分からないこと

・ネットで調べると、jQueryを利用して実装できる機能であるという情報がありました。まずこれは正しい情報でしょうか。
（参考URL：https://gihyo.jp/design/serial/01/jquery-site-production/0017）

・layout.blade.phpにjQueryを読み込む記述をする場合、記述場所は<head>タグ内で合っていますでしょうか。
また記述内容はどう書けばよいでしょうか。

・LaravelでjQueryを利用できるようにするためには、LaravelMixというものを利用したら便利だ、という情報があったので、作業ディレクトリにインストールしましたが、
きちんとインストールできており、jQueryが読み込めることを確認する方法はどのようなものがあるのでしょうか。

jQueyの知識が曖昧なのと、LaravelでjQueryを使う、という情報が意外とネットに落ちておらず、上記が不明でなかなか作業に取りかかれないため、質問させていただきました。

宜しくお願いいたします。

行動規範の内容に同意します

回答2件

HTMLタグのほうにcontenteditableという属性を付加すれば編集可能にはなるので、それで十分であればそれでよいと思います。
JSでvalueというプロパティにアクセスすれば内容を取得することもできます。
より深堀りした機能をつけたいのであれば、必要に応じてより手がかかる手法をとる必要はあるのかもしれません。

投稿2019/11/02 16:04

編集2019/11/02 16:06

H40831

総合スコア975

YO14

2019/11/03 10:32

ご回答ありがとうございます。 contentediableは知りませんでした。ただ、画面上で変更した内容をDBに送信して保存する処理をしたいのですが、変更した時点（送信する前）は画面上にどう保存されているのでしょうか。

H40831

2019/11/03 11:29

予想のvalue属性にアクセスすれば取得できると申し上げたはずですが、それより詳しい方法は、実際のコードをもとにしないと教えられないです。。。

YO14

2019/11/03 14:53

ご回答ありがとうございます。 valueというプロパティにアクセスすれば内容を取得できる、とのアドバイスを正しく理解しておりませんでした。失礼いたしました。

行動規範の内容に同意します

LaravelでjQueryを使う、という情報が

あくまでJavaScriptのライブラリで、jsファイルを読み込ませるやりかたさえ分かれば良いです。
Laravelがどうとか関係がないのでわざわざ解説する必要がないのではと。
CDN使えば「jsファイルをどこに置くか」も考えなくて良いですし。

投稿2019/11/02 22:35

m.ts10806

総合スコア80875

YO14

2019/11/03 10:24

ご回答ありがとうございます。 https://readouble.com/laravel/5.6/ja/frontend.html こちらに従って、プロジェクトに npm install npm run dev は実行した状態で、 bladeファイルに <script> alert("hello");</script> と記述して該当のページをブラウザで開いたところ、helloが表示されました。ただ、bladeファイルには、「jsファイルを読み込みます」という記述は特にしていません。 Laravelは自動でjsファイルの中身(/public/js/app.js)を読み込んでくれる、ということなのでしょうか。

m.ts10806

2019/11/03 12:36 編集

><script> alert("hello");</script> これ単にscriptタグで直に書いただけですし・・・。jQueryの記述ですらないです。要はインラインCSSのような書き方です。 PHP関係ないところで詰まってますよ。

YO14

2019/11/03 14:52

すみません、上記の行動に至った経緯を書いておりませんでした。 jQueryがjsのライブラリということで、そもそもjsがちゃんと動くかを確認したく、 bladeファイルに<script> alert("hello");</script>を記述してみた、という次第です。が、これだと外部のjsファイルを読み込んでいることにならない、ということですね・・・質問を重ねて恐縮ですが、jQueryをCDNで読み込んでいるかを確認する意図で、 layout.blade.phpの<head>タグ内に、 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> と記述したうえで、layout.blade.phpを継承したindex.blade.phpに、適当な<button class="test>を用意して、 <script> $(function(){ $(".test").click(function(){ $(this).css("background-color","green") }); }); </script> と記述したところ、ブラウザでボタンを押したら緑色に変化しました。こちらは、jQueryをCDNで読み込んで利用する方法としては合っていますでしょうか。それとも<script>を使っているため、誤りでしょうか。

YO14

2019/11/03 15:18 編集

もしくは、オリジナルのjQuery関数を定義したhoge.jsというファイルを作成し、 layout.blade.phpの<head>内に、 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="[directory-name]/hoge.js/></script> と書けば、index.blade.phpにはjsの記述は一切不要、という感じでしょうか。またこの場合、jsファイルはresources/assets/js配下に作成すればよいでしょうか。（参考：https://qiita.com/u-dai/items/83766b69a0e18488b005）

m.ts10806

2019/11/03 20:16

＞、jQueryをCDNで読み込んで利用する方法としては合っていますでしょうか。それとも<script>を使っているため、誤りでしょうか。動作したのであれば誤りと言うのはないです。速度を重視するのであれば外部JSファイルではなく直接記述です。できれば公式のドキュメントを参考にしていただきたく。 https://readouble.com/laravel/5.6/ja/mix.html ※Qiitaの記事が間違いという指摘ではなく主動の問題。PHPもPHPマニュアル主動にすべきですしね。

YO14

2019/11/03 23:23

ありがとうございます。公式ドキュメントのそちらのページ、何度か目を通したのですが、何をやろうとしているのかよく分かりませんでした。複数のjsファイルをひとつにまとめて、「このファイルひとつを読み込めば事足りるよ」という状態を作り出す、といった感じでしょうか。　mix.js('resources/assets/js/app.js', 'public/js'); が、app.jsの内容をpublic/js配下に設置する？というコマンドなのかなと思いました。ただ、今はどちらかというと、・LaravelでシンプルにJavaScriptを利用する方法が知りたい。そのためにはjsファイルはどのディレクトリに配置するべきで、それを読み込む記述はどこにどう書くべきなのか・LaravelでシンプルにjQueryを利用する方法が知りたい。そのためには（同上）といった状態でして、その点は公式ドキュメントでは見つけられませんでした。（どこかに記載ありますでしょうか・・・？）

m.ts10806

2019/11/04 02:57

コンパイル関係なくするならpublic配下に任意に置けば良いです。あとはLaravelもphpも関係なく静的htmlで扱うときと同じです。結局は出力されたhtmlを元に画面レイアウトが構築されるのでバックグラウンドは関係ありません。

行動規範の内容に同意します

あなたの回答