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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Q&A

解決済

2回答

5867閲覧

Uncaught ReferenceError: user is not defined

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

0グッド

0クリップ

投稿2019/08/04 00:13

よくあるエラーなことは承知の上で自分で調べても解決ができなかったので投稿させていただきました。
これはuserを定義してくれという直接的なエラー解釈でよろしいのでしょうか、、、
ただどの部分の(user)ことを言われているのかすらあやふやでしてこんな状態での質問投稿申し訳ないですが、どなたかご教授おねいがします。

$(function() { var search_list = $('#user-search-result'); function appendUserSearchList(user) { var html = `<div class="chat-group-user clearfix"> <p class="chat-group-user__name">${user.name}</p> <a class="user-search-add chat-group-user__btn chat-group-user__btn--add" data-user-id=${user.id} data-user-name=${user.name}>追加</a> </div>` search_list.append(html); } var member_list = $('#chat-group-users'); function appendUserMemberList(user_name, user_id) { var html = `<div class='chat-group-user clearfix js-chat-member' id='${user.id}'> <input name='group[user_ids][]' type='hidden' value='${user.id}'> <p class='chat-group-user__name'>${user.name}</p> <a class='user-search-remove chat-group-user__btn chat-group-user__btn--remove js-remove-btn'>削除</a> </div>` member_list.append(html); } $('#user-search-field').on('keyup', function() { var input = $(this).val(); $.ajax({ type: 'GET', url: '/users', data: {keyword: input}, dataType: 'json' }) .done(function(users) { $('#user-search-result').empty(); if (users.length !== 0) { users.forEach(function(user) { appendUserSearchList(user); }); } }) .fail(function() { alert('ユーザー検索に失敗しました'); }); }); $('#user-search-result').on('click', '.user-search-add', function() { var user_name = $(this).attr('data-user-name'); var user_id = $(this).attr('data-user-id'); appendUserMemberList(user_name, user_id); $(this).parent().remove(); }); $('#chat-group-users').on('click', '.user-search-remove', function() { $(this).parent().remove(); }); });

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

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

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

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

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

guest

回答2

0

これはuserを定義してくれという直接的なエラー解釈でよろしいのでしょうか、、、

はい。
正確には「未定義の変数が(参照)利用された」という意味になります。

「定義してくれ」だけとは限りません。
定義された変数を利用すべきだったが実はスペルミスで正しく利用できてないとか、
そういうこともありえます。

「どこかわからない」のでしたら、その場所を特定するためにデバッグしましょう。
console.log()を対象の変数が出ている個所に仕掛けます。

  • [Chromeのデベロッパーツールで

JavaScriptをデバッグする方法(2019年版)](https://ics.media/entry/190517/)

投稿2019/08/04 00:21

m.ts10806

総合スコア80765

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

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

退会済みユーザー

退会済みユーザー

2019/08/04 00:33

お早いご返答ありがとうございます! なるほど、、、必ずしも「定義しろ!」と言ってるわけではないのですね。 まだ勉強し始めたばかりでこのようなサイトを教えてもらえて嬉しいです!! ありがとうございます。
m.ts10806

2019/08/04 00:37

デバッグはどの言語でも必要な技術です。 デバッグを適切にできるようになると自己解決できるようになりますし、 完全解決できなくても質問する際に有用な情報を提供できるので解決が早くなります
guest

0

ベストアンサー

こんにちは

以下の部分が怪しいです。

javascript

1function appendUserMemberList(user_name, user_id) { 2 var html = `<div class='chat-group-user clearfix js-chat-member' id='${user.id}'> 3 <input name='group[user_ids][]' type='hidden' value='${user.id}'> 4 <p class='chat-group-user__name'>${user.name}</p>

上記の、 user.iduser.name を関数の引数である、 user_iduser_name に変えて、以下のように修正してみるといかがでしょうか?

javascript

1function appendUserMemberList(user_name, user_id) { 2 var html = `<div class='chat-group-user clearfix js-chat-member' id='${user_id}'> 3 <input name='group[user_ids][]' type='hidden' value='${user_id}'> 4 <p class='chat-group-user__name'>${user_name}</p>

参考になれば幸いです。

追記

以下は、「こんな風にも書けます」というリファクタ案です。

appendUserMemberList に渡す、user_nameuser_id を取ってくるところが、以下

修正前:

javascript

1 var user_name = $(this).attr('data-user-name'); 2 var user_id = $(this).attr('data-user-id');

のようになっていますが、この後、data-user-* の属性が増えて、 たとえばdata-user-age が追加されたときに、一行追加して

var user_name = $(this).attr('data-user-name'); var user_id = $(this).attr('data-user-id'); var user_age = $(this).attr('data-user-age');

とすると、似たような行が増えてしまいます。また、 data-user-age 属性の値には "20" のような数字が入っているとすると、取り出したときに、文字列(String)ではなく、数(Number)で取れたほうが望ましい場合があります。

以上を考慮すると、上記の3行を以下のように書くことができます。

修正後:

javascript

1var user = ['name', 'id', 'age'].reduce( (obj, key) => ( 2 { ...obj, [key]: $(this).data(`user-${key}`) } 3), {})

上記のようにすると user には、以下のようなオブジェクトが入ってきます。

javascript

1{ 2 name: '田中', 3 id: 'USER-A001', 4 age: 20 5}

上記のように、 age プロパティには、文字列の "20" ではなく、数値の 20 が入ってきます。
仮にこの後、さらに、data-user-occupation が増えても、以下で対応できます。

javascript

1var user = ['name', 'id', 'age', 'occupation'].reduce( (obj, key) => ( 2 { ...obj, [key]: $(this).data(`user-${key}`) } 3), {})

次に appendUserMemberList の引数の受け取り方を、分割代入 を使って以下のようにします。

修正後:

function appendUserMemberList({ name, id }) {

こうしておいて、関数本体では nameid を使って以下のようにします。

修正後:

var html = `<div class='chat-group-user clearfix js-chat-member' id='${id}'> <input name='group[user_ids][]' type='hidden' value='${id}'> <p class='chat-group-user__name'>${name}</p>

上記のようにしておいて、この関数を使うときは、先の user オブジェクトをそのまま渡します。

appendUserMemberList(user);

投稿2019/08/04 00:26

編集2019/08/04 01:07
jun68ykt

総合スコア9058

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

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

退会済みユーザー

退会済みユーザー

2019/08/04 00:34

お早いご返答ありがとうございます。 修正したら無事に解決できました!!! 本当に助かりました!ありがとうございました!
jun68ykt

2019/08/04 01:08

どういたしまして。解決したようでよかったです???? ちょっとしたリファクタ案を追記しましたので、ご参考まで。
退会済みユーザー

退会済みユーザー

2019/08/04 01:19

わざわざリファクタ案まで書いていただきありがとうございます。 ただ今の自分には難しくて読み返した時に理解できなくなっちゃいそうなので今のままにしておきます汗 書いてくださった「reduce」など調べて使い方、意味など理解できた際に追記していただいたコードを参考に近いうちには書き直してみようと思います!! ありがとうございました!
jun68ykt

2019/08/04 01:47

はい。そんな感じでOKですよ!????
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問