数字が一つずつ上がっていく以外には内容が同じコードのまとめ方。

学校の課題で、javascriptを使ってlocalstrorageに多数のメールアドレスやパスワードをまとめて保存できるものをつくっています。

質問：数字が一つずつ増えていく以外には、コードの内容が同じ場合、どのような方法でまとめることができますか？（”//ボタンを押すとkeyとvalueが各テキストエリアに表示されるように”のところなどです。）
データを保存したり、クリックして呼び出すところまではできたのですが、単純なコードを繰り返している部分があり、もう少しうまくまとめたいと考えています。特にデータ量が増えた時などを考えたコードの書き方を学びたいです。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>myMemoPad</title>
<script src="js/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="css/pass.css">

<script>
$(function(){
   
//ボタン名を各keynameに  
var keyname_0 = localStorage.key(0);
document.querySelector("#btn0").innerHTML = keyname_0;
 
var keyname_1 = localStorage.key(1);
document.querySelector("#btn1").innerHTML = keyname_1;
    
var keyname_2 = localStorage.key(2);
document.querySelector("#btn2").innerHTML = keyname_2;
    
    
//ボタンを押すとkeyとvalueが各テキストエリアに表示されるように
$("#btn0").on("click", function(){
    var keyname_0 = localStorage.key(0);
    document.querySelector("#key_area").innerHTML = keyname_0;
    var Data0 = localStorage.getItem(localStorage.key(0));
    var pmData0 = JSON.parse(Data0);
    vala = pmData0.pas;
    document.querySelector("#password_area").innerHTML = vala;
    valb = pmData0.mai;
    document.querySelector("#mail_area").innerHTML = valb;
    });
    
$("#btn1").on("click", function(){
    var keyname_1 = localStorage.key(1);
    document.querySelector("#key_area").innerHTML = keyname_1;
    var Data1 = localStorage.getItem(localStorage.key(1));
    var pmData1 = JSON.parse(Data1);
    vala = pmData1.pas;
    document.querySelector("#password_area").innerHTML = vala;
    valb = pmData1.mai;
    document.querySelector("#mail_area").innerHTML = valb;
    });
    
    
$("#btn2").on("click", function(){
    var keyname_2 = localStorage.key(2);
    document.querySelector("#key_area").innerHTML = keyname_2;
    var Data2 = localStorage.getItem(localStorage.key(2));
    var pmData2 = JSON.parse(Data2);
    vala = pmData2.pas;
    document.querySelector("#password_area").innerHTML = vala;
    valb = pmData2.mai;
    document.querySelector("#mail_area").innerHTML = valb;
    });    
    

//テキストボックスでkeyとvalueを入れる
$("#save").on("click", function(){
    var keyname = $("#key_area").val();
    var data = {pas:$("#password_area").val(),mai:valuem = $("#mail_area").val()}
    if (keyname.length == 0){
        alert("サイト名を入力してください");
    }else{
        alert("保存しました");
        localStorage.setItem(keyname, JSON.stringify(data));
        $('#select').append($('<option>').html(keyname).val(value));
    }
});
});
</script>

</head>
<body>
  <header>
    <h1>Hard password recorder</h1>
  </header>
   <main>
      <p>サイト名</p>
      <textarea id="key_area" value="new"></textarea>
      <p>パスワード</p>
      <textarea id="password_area"></textarea>
        <p>メール</p>
          <textarea id="mail_area"></textarea>

              <div id="save">Save</div>
              <div id="clear">Clear</div>

     
      <p id="btn0"></p>
      <p id="btn1"></p>
      <p id="btn2"></p>
  </main>

  <footer><small></small></footer>

</body>

</html>

###試したこと
forやthisを使うことが鍵になりそうだと言うことはわかったのですが、今回の場合どのように関数をつくれば良いのか理解できませんでした。

どうぞよろしくお願いいたします。

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

回答5件

大変いい質問です。先生に聞いて下さい。先生は生徒に次に何を教えるべきかわかります。

投稿2017/05/12 21:54

Zuishin

総合スコア28660

Zuishin

2017/05/12 22:00

あるいは同じ課題をやっている友達に聞いて下さい。一人では気づかないことを補い合ってともに成長できます。ローカル変数、引数の二つが重要です。

GoheiKusumi

2017/05/13 05:49

早急なご回答ありがとうございます。周りのメンバーにも聞いてみたいと思います！ローカル変数、引数について早速調べてみます！ありがとうございました。

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

「数字が一つずつ上がっていく」というよりlocalStorageの中身からボタンを作ってそれをクリックさせるほうが良い気がします。

JavaScript
1const $_s = $( '#select' ), $_k = $( '#key_area' ), $_p = $( '#password_area' ), $_m = $( '#mail_area' );
2const func = key => {
3	let d = JSON.parse( localStorage.getItem( key ) );
4	$_s.append( $( '<option>' ).html( key ).val( d.mai ) );
5	$( '#clear' ).after( $( '<button></button>' ).text( key ).addClass( 'from-storage' ).on( 'click', _=> {
6		$_k.val( key );
7		$_p.val( d.pas );
8		$_m.val( d.mai );
9	} ) );
10};
11Object.keys( localStorage ).forEach( func );
12$( '#clear' ).on( 'click', _=> {
13	$_s.html( '' );
14	$_k.val( '' );
15	$_p.val( '' );
16	$_m.val( '' );
17	$( '.from-storage' ).remove();
18	localStorage.clear();
19} );
20$( '#save' ).on( 'click', _=> {
21	let key = $_k.val();
22	let data = { pas : $_p.val(), mai : $_m.val() };
23	if ( !key ){
24		alert( 'サイト名を入力してください' );
25	}else{
26		localStorage.setItem( key, JSON.stringify( data ) );
27		func( key );
28		alert( '保存しました' );
29	}
30} );

HTML
1<main>
2	<select name="select" id="select"></select>
3	<label for="key_area">サイト名</label>
4	<textarea id="key_area" value="new"></textarea>
5	<label for="password_area">パスワード</label>
6	<textarea id="password_area"></textarea>
7	<label for="mail_area">メール</label>
8	<textarea id="mail_area"></textarea>
9
10	<button id="save">Save</button>
11	<button id="clear">Clear</button>
12</main>
13```**動くサンプル：**[https://jsfiddle.net/pzob8mvc/](https://jsfiddle.net/pzob8mvc/)
14
15---
16
17【JavaScript: localStorage のすべてのキーを列挙する - Sarabande.jp】
18[http://blog.sarabande.jp/post/73643047325](http://blog.sarabande.jp/post/73643047325)

投稿2017/05/13 17:01

kei344

総合スコア69407

ベストアンサー

javascript
1$("#btn0").on("click", function(){
2    var keyname_0 = localStorage.key(0);
3    document.querySelector("#key_area").innerHTML = keyname_0;
4    var Data0 = localStorage.getItem(localStorage.key(0));
5    var pmData0 = JSON.parse(Data0);
6    vala = pmData0.pas;
7    document.querySelector("#password_area").innerHTML = vala;
8    valb = pmData0.mai;
9    document.querySelector("#mail_area").innerHTML = valb;
10    });
11
12//１、２と続く
13

のところを

javascript
1$("#btn0").on("click",hoge(0));
2$("#btn1").on("click",hoge(1));
3$("#btn2").on("click",hoge(2));
4
5function hoge(i){
6 return function(){
7   var keyname = localStorage.key(i);
8  //処理続く
9 }
10}
11

のような形にすればいいと思います。

なお、ちょこちょこkeyname_0みたいな感じの変数が出てきますが、スコープを考えればそれらはkeynameでいいです。そうした方がコードの再利用性が上がります。

投稿2017/05/13 03:06

編集2017/05/13 03:41

oskbt

総合スコア1895

kei344

2017/05/13 03:16

関数hogeが function を返さないといけない書き方ではありませんか？もしくは下記のような書き方にするか。 $("#btn0").on("click", function(){hoge(0);});

oskbt

2017/05/13 03:37

そうですね。言いたかったことはちょっとだけ違う同じような処理は、関数と引数を使ってまとめられるってことでしたが、正確な書き方ではなかったです。

GoheiKusumi

2017/05/13 05:45

oskbt様ご回答ありがとうございました！一番知りたかった箇所について、具体的にご回答をくださり大変勉強になりました。早速実践してみます。ありがとうございました！

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

1,2,3など同じ数字が出てきて、それが同じ処理の場合、forでその数字をvar iにしてi++などをすれば連続で出来ます。"あ"+i があ１、あ２、あ３などのように。

投稿2017/05/12 23:08

toutou

総合スコア2050

GoheiKusumi

2017/05/13 05:47

早急なご回答をありがとうございました！早速forとi++を使ってみます！ありがとうございました！

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

html
1      <p id="btn0"></p>
2      <p id="btn1"></p>
3      <p id="btn2"></p>

まず、ここをid属性ではなくclass属性に変更しないと、それぞれのボタンに対して個別でクリックイベントを設定するハメになってしまいます。

html
1      <p class="btn"></p>
2      <p class="btn"></p>
3      <p class="btn"></p>

このように変更すれば、$(".btn")で同じクラス名を持つボタンを全て取得できるので、それらの要素に対して、ループ処理でクリックイベントを紐づけることができるようになります。

あとはループの中で、他の方が回答されているように対応されればよろしいかと思います。

投稿2017/05/13 03:23

退会済みユーザー

総合スコア0

GoheiKusumi

2017/05/13 05:52

ご回答くださりありがとうございます！そもそもidで分けているところが長いコードの原因だったのですね。参考になりました！ありがとうございます。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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

数字が一つずつ上がっていく以外には内容が同じコードのまとめ方。

関連した質問