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

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

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

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

jQuery

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

2回答

1502閲覧

chosen.jsライブラリを使ったセレクトボックスの絞り込みを複数使う方法。

soso0programmer

総合スコア35

JavaScript

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

jQuery

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2020/10/09 07:17

解決した内容は、二つchosenライブラリを使ったセレクトボックスの絞り込みを可能にすることです。
現在、chosen.jsのライブラリを使ったセレクトボックスを一つは実装したのですが、
同じ内容を複数使うと両方とも機能しなくなるという原因が解決できない状態です。
2つ目の方のセレクトボックスのidとnameが違うので片方は起動すると思ったのですが、両方とも起動しませんでした。
わかる人がいましたらご教示お願いします。

html

1<!DOCTYPE html> 2<html lang="ja" class="nanikore" xmlns:th="http://www.thymeleaf.org" 3 xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> 4 5<head> 6 <meta charset="UTF-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>Document</title> 9 10 <!--Bootstrap CSS --> 11 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> 12 13 <!--Font Awesome5--> 14 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"> 15 16 <link rel="stylesheet" href="../css/stylesheet.css"> 17 18 <link rel="stylesheet" href="../css/chosen-css.css"> 19 20</head> 21 22<body class="nanikore"> 23 24 <div class="container h-100"> 25 26 <div class="row align-items-center h-100"> 27 <div class="col-6 mx-auto"> 28 <div class="jumbotron text-center" style="background-color: #5ca580;"> 29 <div class="text-center"> 30 31 <h2 class="mb-5"><i class="fas fa-users"></i>担当者を選択してください</h2> 32 <form action="" class="form-inline justify-content-center"> 33 34 <div class="form-inline"> 35 36 <div class="search-box form-group mb-2 ml-2"> 37 <select class="chosen-select form-control" id="visitor_id"> 38 <option value="" style="font-weight: 100;">部署選択</option> 39 <option value="itsol">ITソリューション部</option> 40 <option value="jigyou">事業管理部</option> 41 <option value="eigyou">営業グループ</option> 42 </select> 43 </div> 44 45 <div class="form-group mb-2 ml-2 mr-5"> 46 <select class="chosen-select form-control list" name="visitor_id"> 47 <option value="">氏名選択</option> 48 <option class="list_item" data-visitor_id="itsol">山田(やまだ)</option> 49 <option class="list_item" data-visitor_id="itsol">田中(たなか)</option> 50 <option class="list_item" data-visitor_id="jigyou">佐藤(さとう)</option> 51 <option class="list_item" data-visitor_id="jigyou">鈴木(すずき)</option> 52 <option class="list_item" data-visitor_id="eigyou">中田(なかた)</option> 53 </select> 54 </div> 55 </div> 56 57 <div class="form-inline"> 58 59 <div class="search-box form-group mb-2 ml-2"> 60 <select class="chosen-select form-control" id="exiter_id"> 61 <option value="" style="font-weight: 100;">部署選択</option> 62 <option value="itsol">ITソリューション部</option> 63 <option value="jigyou">事業管理部</option> 64 <option value="eigyou">営業グループ</option> 65 </select> 66 </div> 67 68 <div class="form-group mb-2 ml-2 mr-5"> 69 <select class="chosen-select form-control list" name="exiter_id"> 70 <option value="">氏名選択</option> 71 <option class="list_item" data-exiter_id="itsol">山田(やまだ)</option> 72 <option class="list_item" data-exiter_id="itsol">田中(たなか)</option> 73 <option class="list_item" data-exiter_id="jigyou">佐藤(さとう)</option> 74 <option class="list_item" data-exiter_id="jigyou">鈴木(すずき)</option> 75 <option class="list_item" data-exiter_id="eigyou">中田(なかた)</option> 76 </select> 77 </div> 78 </div> 79 80 81 82 <div class="ml-1 mt-5"> 83 <button type="button" class="btn btn-primary" data-toggle="modal" 84 data-target="#tabModal">入力完了 85 </button> 86 87 <!-- Modal --> 88 <div class="modal fade" id="tabModal" tabindex="-1" role="dialog" 89 aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> 90 <div class="modal-dialog modal-dialog-centered" role="document"> 91 <div class="modal-content"> 92 <div class="modal-header"> 93 <h5 class="modal-title" id="exampleModalCenterTitle">担当者確認画面</h5> 94 <button type="button" class="close" data-dismiss="modal" 95 aria-label="Close"> 96 <span aria-hidden="true">&times;</span> 97 </button> 98 </div> 99 <div class="modal-body"> 100 <p>こちらの担当者であっていますか?</p> 101 メールアドレス: 102 <p id="mail-mail"></p> 103 担当者名: 104 <p id="name-name"></p> 105 </div> 106 <div class="modal-footer"> 107 <a href="" type="button" class="btn btn-secondary" 108 data-dismiss="modal">キャンセル</a> 109 <button type="submit" class="btn btn-primary">OK</button> 110 </div> 111 </div> 112 </div> 113 114 </div> 115 116 </div> 117 118 119 120 </form> 121 122 </div> 123 124 </div> 125 </div> 126 </div> 127 128 129 </div> 130 131 <!-- Optional JavaScript --> 132 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 133 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 134 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 135 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> 136 <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script> 137 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script> 138 139 140 141 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 142 <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script> 143 <link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" rel="stylesheet"> 144 145 <script src="../js/stylesheet.js"> 146 </script> 147 148 149</body> 150 151</html>

js

1//chosen 2$('.chosen-select').chosen({ 3 search_contains: true 4}); 5 6$(function () { 7 var searchBox = '.search-box'; // 絞り込む項目を選択するエリア 8 var listItem = '.list_item'; // 絞り込み対象のアイテム 9 var hideClass = 'is-hide'; // 絞り込み対象外の場合に付与されるclass名 10 $(function () { 11 // 絞り込み項目を変更した時 12 $(document).on('change', '.search-box select', function () { 13 search_filter(); 14 $('.chosen-select').trigger("chosen:updated"); // 追加 15 }); 16 }); 17 //リストの絞り込みを行う 18 function search_filter() { 19 // 非表示状態を解除 20 // $(listItem).removeClass(hideClass); 21 $(listItem).attr('disabled', false); 22 for (var i = 0; i < $('.search-box select').length; i++) { 23 var name = $('.search-box select').eq(i).attr('id'); 24 // 選択されている項目を取得 25 var searchData = get_selected_input_items(name); 26 // 選択されている項目がない、またはALLを選択している場合は飛ばす 27 if (searchData.length === 0 || searchData[0] === '') { 28 continue; 29 } 30 // リスト内の各アイテムをチェック 31 for (var j = 0; j < $(listItem).length; j++) { 32 // アイテムに設定している項目を取得 33 var itemData = $(listItem).eq(j).data(name); 34 // 絞り込み対象かどうかを調べる 35 if (searchData.indexOf(itemData) === -1) { 36 //$(listItem).eq(j).addClass(hideClass); 37 $(listItem).eq(j).attr('disabled', true); 38 } 39 } 40 } 41 } 42 //選択されているoptionのvalue属性の値 43 function get_selected_input_items(name) { 44 var searchData = []; 45 // $('[name=' + name + ']:checked').each(function() { 46 $('select[name=' + name + '] option:selected').each(function () { 47 searchData.push($('#visitor_id option:selected').val()); 48 }); 49 return searchData; 50 } 51});

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

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

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

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

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

guest

回答2

0

ベストアンサー

こちらでテストしたときの状態そのままです。
(この後stylesheet.jsに内容を移して再度確認しています)

HTML

1<!DOCTYPE html> 2<html lang="ja" class="nanikore" xmlns:th="http://www.thymeleaf.org" 3 xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> 4 5<head> 6 <meta charset="UTF-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>Document</title> 9 10 <!--Bootstrap CSS --> 11 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> 12 13 <!--Font Awesome5--> 14 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"> 15 16 <link rel="stylesheet" href="../css/stylesheet.css"> 17 18 <link rel="stylesheet" href="../css/chosen-css.css"> 19 20</head> 21 22<body class="nanikore"> 23 24 <div class="container h-100"> 25 26 <div class="row align-items-center h-100"> 27 <div class="col-6 mx-auto"> 28 <div class="jumbotron text-center" style="background-color: #5ca580;"> 29 <div class="text-center"> 30 31 <h2 class="mb-5"><i class="fas fa-users"></i>担当者を選択してください</h2> 32 <form action="" class="form-inline justify-content-center"> 33 34 <div class="form-inline"> 35 36 <div class="search-box form-group mb-2 ml-2"> 37 <select class="chosen-select form-control" id="visitor_id"> 38 <option value="" style="font-weight: 100;">部署選択</option> 39 <option value="itsol">ITソリューション部</option> 40 <option value="jigyou">事業管理部</option> 41 <option value="eigyou">営業グループ</option> 42 </select> 43 </div> 44 45 <div class="form-group mb-2 ml-2 mr-5"> 46 <select class="chosen-select form-control list" name="visitor_id"> 47 <option value="">氏名選択</option> 48 <option class="list_item" data-visitor_id="itsol">山田(やまだ)</option> 49 <option class="list_item" data-visitor_id="itsol">田中(たなか)</option> 50 <option class="list_item" data-visitor_id="jigyou">佐藤(さとう)</option> 51 <option class="list_item" data-visitor_id="jigyou">鈴木(すずき)</option> 52 <option class="list_item" data-visitor_id="eigyou">中田(なかた)</option> 53 </select> 54 </div> 55 </div> 56 57 <div class="form-inline"> 58 59 <div class="search-box form-group mb-2 ml-2"> 60 <select class="chosen-select form-control" id="exiter_id"> 61 <option value="" style="font-weight: 100;">部署選択</option> 62 <option value="itsol">ITソリューション部</option> 63 <option value="jigyou">事業管理部</option> 64 <option value="eigyou">営業グループ</option> 65 </select> 66 </div> 67 68 <div class="form-group mb-2 ml-2 mr-5"> 69 <select class="chosen-select form-control list" name="exiter_id"> 70 <option value="">氏名選択</option> 71 <option class="list_item" data-exiter_id="itsol">山田(やまだ)</option> 72 <option class="list_item" data-exiter_id="itsol">田中(たなか)</option> 73 <option class="list_item" data-exiter_id="jigyou">佐藤(さとう)</option> 74 <option class="list_item" data-exiter_id="jigyou">鈴木(すずき)</option> 75 <option class="list_item" data-exiter_id="eigyou">中田(なかた)</option> 76 </select> 77 </div> 78 </div> 79 80 81 82 <div class="ml-1 mt-5"> 83 <button type="button" class="btn btn-primary" data-toggle="modal" 84 data-target="#tabModal">入力完了 85 </button> 86 87 <!-- Modal --> 88 <div class="modal fade" id="tabModal" tabindex="-1" role="dialog" 89 aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> 90 <div class="modal-dialog modal-dialog-centered" role="document"> 91 <div class="modal-content"> 92 <div class="modal-header"> 93 <h5 class="modal-title" id="exampleModalCenterTitle">担当者確認画面</h5> 94 <button type="button" class="close" data-dismiss="modal" 95 aria-label="Close"> 96 <span aria-hidden="true">&times;</span> 97 </button> 98 </div> 99 <div class="modal-body"> 100 <p>こちらの担当者であっていますか?</p> 101 メールアドレス: 102 <p id="mail-mail"></p> 103 担当者名: 104 <p id="name-name"></p> 105 </div> 106 <div class="modal-footer"> 107 <a href="" type="button" class="btn btn-secondary" 108 data-dismiss="modal">キャンセル</a> 109 <button type="submit" class="btn btn-primary">OK</button> 110 </div> 111 </div> 112 </div> 113 114 </div> 115 116 </div> 117 118 119 120 </form> 121 122 </div> 123 124 </div> 125 </div> 126 </div> 127 128 129 </div> 130 131 <!-- Optional JavaScript --> 132 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 133 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 134 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 135 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> 136 <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script> 137 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script> 138 139 140 141 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 142 <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script> 143 <link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" rel="stylesheet"> 144 145 <script> 146//chosen 147$('.chosen-select').chosen({ 148 search_contains: true 149}); 150 151$(function () { 152 var searchBox = '.search-box'; // 絞り込む項目を選択するエリア 153 var listItem = '.list_item'; // 絞り込み対象のアイテム 154 var hideClass = 'is-hide'; // 絞り込み対象外の場合に付与されるclass名 155 $(function () { 156 // 絞り込み項目を変更した時 157 $(document).on('change', '.search-box select', function () { 158 search_filter(this); 159 $('.chosen-select').trigger("chosen:updated"); // 追加 160 }); 161 }); 162 //リストの絞り込みを行う 163 function search_filter(e) { 164 // 非表示状態を解除 165 // $(listItem).removeClass(hideClass); 166 $(e,listItem).attr('disabled', false); 167 for (var i = 0; i < $(e,'.search-box select').length; i++) { 168 var name = $(e,'.search-box select').eq(i).attr('id'); 169 // 選択されている項目を取得 170 var searchData = get_selected_input_items(e,name); 171 // 選択されている項目がない、またはALLを選択している場合は飛ばす 172 if (searchData.length === 0 || searchData[0] === '') { 173 continue; 174 } 175 // リスト内の各アイテムをチェック 176 for (var j = 0; j < $('select[name="'+ e.id +'"] ' + listItem).length; j++) { 177 // アイテムに設定している項目を取得 178 var itemData = $('select[name="'+ e.id +'"] ' + listItem).eq(j).data(name); 179 // 絞り込み対象かどうかを調べる 180 if (searchData.indexOf(itemData) === -1) { 181 //$(listItem).eq(j).addClass(hideClass); 182 $('select[name="'+ e.id +'"] ' + listItem).eq(j).attr('disabled', true); 183 }else{ 184 $('select[name="'+ e.id +'"] ' + listItem).eq(j).attr('disabled', false); 185 } 186 } 187 } 188 } 189 //選択されているoptionのvalue属性の値 190 function get_selected_input_items(e,name) { 191 var searchData = []; 192 // $('[name=' + name + ']:checked').each(function() { 193 $(e,'select[name=' + name + '] option:selected').each(function () { 194 searchData.push($(e,'#visitor_id option:selected').val()); 195 }); 196 return searchData; 197 } 198}); 199 </script> 200 201</body> 202 203</html> 204 205 206

投稿2020/10/12 02:51

kuma_kuma_

総合スコア2506

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

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

0

質問者様
nameとIdの使い方分けたほうが良いですよ
今回なら
Id="visitor_id1"
Id="employee_id1"
Id="visitor_id2"
Id="employee_id2"
とか間違いの元となりますよ。
(今回はあえて修正していません)

結局クラス指定しかしないので「どちらの社員に対してフィルタを行えばよいか」が不明の状態でした
よってsearch_filterに引数を追加してどちらの処理か判るようにしてあります。
基本の処理自体はほぼ変更ありません。ただ「どちら」の指定を追加しただけです。

javascript

1//chosen 2$('.chosen-select').chosen({ 3 search_contains: true 4}); 5 6$(function () { 7 var searchBox = '.search-box'; // 絞り込む項目を選択するエリア 8 var listItem = '.list_item'; // 絞り込み対象のアイテム 9 var hideClass = 'is-hide'; // 絞り込み対象外の場合に付与されるclass名 10 $(function () { 11 // 絞り込み項目を変更した時 12 $(document).on('change', '.search-box select', function () { 13 search_filter(this); 14 $('.chosen-select').trigger("chosen:updated"); // 追加 15 }); 16 }); 17 //リストの絞り込みを行う 18 function search_filter(e) { 19 // 非表示状態を解除 20 // $(listItem).removeClass(hideClass); 21 $(e,listItem).attr('disabled', false); 22 for (var i = 0; i < $(e,'.search-box select').length; i++) { 23 var name = $(e,'.search-box select').eq(i).attr('id'); 24 // 選択されている項目を取得 25 var searchData = get_selected_input_items(e,name); 26 // 選択されている項目がない、またはALLを選択している場合は飛ばす 27 if (searchData.length === 0 || searchData[0] === '') { 28 continue; 29 } 30 // リスト内の各アイテムをチェック 31 for (var j = 0; j < $('select[name="'+ e.id +'"] ' + listItem).length; j++) { 32 // アイテムに設定している項目を取得 33 var itemData = $('select[name="'+ e.id +'"] ' + listItem).eq(j).data(name); 34 // 絞り込み対象かどうかを調べる 35 if (searchData.indexOf(itemData) === -1) { 36 //$(listItem).eq(j).addClass(hideClass); 37 $('select[name="'+ e.id +'"] ' + listItem).eq(j).attr('disabled', true); 38 }else{ 39 $('select[name="'+ e.id +'"] ' + listItem).eq(j).attr('disabled', false); 40 } 41 } 42 } 43 } 44 //選択されているoptionのvalue属性の値 45 function get_selected_input_items(e,name) { 46 var searchData = []; 47 // $('[name=' + name + ']:checked').each(function() { 48 $(e,'select[name=' + name + '] option:selected').each(function () { 49 searchData.push($(e,'#visitor_id option:selected').val()); 50 }); 51 return searchData; 52 } 53});

投稿2020/10/09 07:58

kuma_kuma_

総合スコア2506

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

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

soso0programmer

2020/10/09 08:41

回答ありがとうございます。 部署選択のselectタグのidと氏名選択のnameとdata型の部分(data-visitor_id="itsol")がすべて一致していないと絞り込まれないのですが、2つ目も同じように別のid,name,data型の部分で絞りこみたい場合にどのようにすれば二つとも絞り込みができるでしょうか。 上記の方法だと以下の部分でidが違うために絞れ込めません。 //選択されているoptionのvalue属性の値 function get_selected_input_items(e,name) { var searchData = []; // $('[name=' + name + ']:checked').each(function() { $(e,'select[name=' + name + '] option:selected').each(function () { searchData.push($(e,'#visitor_id option:selected').val()); }); return searchData; }
kuma_kuma_

2020/10/09 08:56 編集

2つの部署選択はそれに付随するnameの配下のselectのoptionにしか影響が出ないようにしてあるのですが ? 例えば今回答した内容ですと 上部署「ITソリュージョン部」 上社員(ITソリュージョン部だけ選択できる) 下部署「営業グループ」 下社員(営業グループだけ選択できる) これが質問者様のご希望された処理ではないのですか?
soso0programmer

2020/10/09 09:26

返信ありがとうございます。 希望している処理は、おっしゃる通りでございます。 確認なのですが、(今回はあえて修正していません)というのは、JSを回答者様の内容に変更しただけでは(html部分も変更する必要がある)動かないということでしょうか。 理解が悪く申し訳ありません。
kuma_kuma_

2020/10/09 09:44 編集

> html部分も変更する必要がある いいえ。質問者様が提示されたjavascriptの範囲で修正をおこなっただけです。 その為回答もjavascriptの範囲のみ記載としています。 他の(htmlやCSS等)変更はいりません。 なのでHTMLに関しては指摘はしても > (今回はあえて修正していません) としているのですが...
soso0programmer

2020/10/12 00:56

返信が遅れて申し訳ありません。 htmlを変更せずに、JSの部分だけ変更するとどちらも絞り込みができない状態になってしまいます。 これは、chosen-selectクラスが複数あると機能しないということなのでしょうか?
kuma_kuma_

2020/10/12 02:39

まず再度今回質問者様が質問公開されているHTMLをコピー <script src="../js/stylesheet.js"></script> '(stylesheet.jsという名称は適切ではないようい思いますが...) この内容がjavascriptのコード部分として認識しそこに今回の回答の内容を埋め込み再テストをおこまいました。 動作確認しましたが正常に作動する事を確認しました。
soso0programmer

2020/10/12 03:06

回答ありがとうございます。 動作確認までしていただいてありがとうございます。 回答者様の貼り付けていただいたコードで動作確認がとれました。 長い間回答してくださってありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問