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

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

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

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

2回答

1455閲覧

画面上のテキストをクリックしたら編集可能になる機能を実装したい(Laravel)

YO14

総合スコア45

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/11/02 15:11

開発環境

Laravel 5.6
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を使う、という情報が意外とネットに落ちておらず、上記が不明でなかなか作業に取りかかれないため、質問させていただきました。

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

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

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

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

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

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

guest

回答2

0

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

投稿2019/11/02 16:04

編集2019/11/02 16:06
H40831

総合スコア973

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

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

YO14

2019/11/03 10:32

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

2019/11/03 11:29

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

2019/11/03 14:53

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

0

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

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

投稿2019/11/02 22:35

m.ts10806

総合スコア80765

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

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

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を元に画面レイアウトが構築されるのでバックグラウンドは関係ありません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問