【JavaScript 練習講座】プログラミング設計
[JavaScript 練習講座]プログラミング設計
最終講座である。こんかい、簡単なショッピングリストを作成する。
ショッピングリストを作成しながら、プログラムの組み立て方を体験してほしい。
まず、作成するプログラムの動作を確認する。
ショッピングリスト
Webブラウザでファイルを開くと、テキストボックスと二つのリンクが表示する。
ボール
追加
全削除
ショッピングリスト
- ボール
テキストボックスに文字を入力して「追加」リンクをクリックすると、 ショッピングリストの下に、テキストボックスの入力値が表示する。
茶碗
追加
全削除
ショッピングリスト
- ボール
- 茶碗
別の文字をテキストボックスに入力して「追加」リンクをクリックすると、 リストの最後に文字が追加される。
茶碗
追加
全削除
ショッピングリスト
- 茶碗
文字列をクリックすると、その文字列が削除される。たとえば、 「ボール」の文字列をクリックすると、「ボール」の文字がリストから削除される。
ショッピングリスト
「全削除」リンクをクリックすると、全ての文字列が削除される。
作成する機能は、次の3つである。
- リストへ追加する処理
- 全削除処理
- 文字列削除処理
これら3つの機能を順番に作成する。まずは、HTMLファイルを作成する。
HTMLファイルを作成
001<html><head>
002<script>
003
004</script>
005</head>
006<body>
007 <input type = "text" id = "item" /><br>
008 <a href="javascript:addList()">追加</a>
009 <a href="javascript:removeList()">全削除</a><br><br>
010 ショッピングリスト
011 <ul id = "items" ></ul>
012</body>
013</html>
002<script>
003
004</script>
005</head>
006<body>
007 <input type = "text" id = "item" /><br>
008 <a href="javascript:addList()">追加</a>
009 <a href="javascript:removeList()">全削除</a><br><br>
010 ショッピングリスト
011 <ul id = "items" ></ul>
012</body>
013</html>
画面を完成させた。JavaScriptの処理はまだ記述していない。
まず、7行目でテキストボックスを作成する。
inputタグのtype属性に「text」と記述する。
また、inputタグにidを設定した。
これは、ユーザーが入力した値をJavaScriptで利用するからである。
idの値は「item」とした。
8行目で、追加リンクを作成する。aタグのhref属性に
「javascript:addList()」
このように記述する。追加リンクをクリックすると、addList()関数が実行する。
ただし、まだaddList()関数は記述していない。
9行目で、全削除リンクを作成する。aタグのhref属性に
「javascript:removeList()」
と記述する。全削除リンクをクリックすると、removeList()関数が実行する。
ただし、まだremoveList()関数は記述していない。
11行目でulタグを作成する。このulタグに文字列をリスト形式で追加する。
ulタグのid属性に「items」を設定して、JavaScriptから利用できるようにする。
以上が、HTMLファイルの記述である。
画面を作成する関数を記述する
今回作成しているショッピングリストの中心的関数を記述する。 こんかい紹介するプログラムは 非常に重要である。
001<html><head>
002<script>
003//ショッピングリスト
004var items = [ ] ;
005
006//画面を作成する関数
007function view () {
008
009 //[ul]タグを取得
010 const ul = document.getElementById ( "items" ) ;
011
012 //[ul]タグの子要素を全て削除
013 while ( ul.firstChild ) {
014 ul.removeChild ( ul.firstChild ) ;
015 }
016 //[ul]に要素を追加する
017 for ( var i = 0 ; i < items.length ; i ++ ) {
018
019 //[li]タグを作成
020 var li = document.createElement ( "li" ) ;
021
022 //[li]タグに文字を記述
023 li.textContent = items [ i ] ;
024
025 //[li]タグを[ul]に追加
026 ul.appendChild ( li ) ;
027 }
028}
029</script>
030</head>
031<body>
032 <input type = "text" id = "item" /><br>
033 <a href="javascript:addList()">追加</a>
034 <a href="javascript:removeList()">全削除</a><br><br>
035 ショッピングリスト
036 <ul id = "items" ></ul>
037</body>
038</html>
002<script>
003//ショッピングリスト
004var items = [ ] ;
005
006//画面を作成する関数
007function view () {
008
009 //[ul]タグを取得
010 const ul = document.getElementById ( "items" ) ;
011
012 //[ul]タグの子要素を全て削除
013 while ( ul.firstChild ) {
014 ul.removeChild ( ul.firstChild ) ;
015 }
016 //[ul]に要素を追加する
017 for ( var i = 0 ; i < items.length ; i ++ ) {
018
019 //[li]タグを作成
020 var li = document.createElement ( "li" ) ;
021
022 //[li]タグに文字を記述
023 li.textContent = items [ i ] ;
024
025 //[li]タグを[ul]に追加
026 ul.appendChild ( li ) ;
027 }
028}
029</script>
030</head>
031<body>
032 <input type = "text" id = "item" /><br>
033 <a href="javascript:addList()">追加</a>
034 <a href="javascript:removeList()">全削除</a><br><br>
035 ショッピングリスト
036 <ul id = "items" ></ul>
037</body>
038</html>
非常に深いプログラムである。 こんかい、view()関数を作成した。 この関数は、「画面を作成する関数」である。 このview()関数を実行すると、Web画面を適切に表示してくれる（そのようにプログラミングする）。 4行目を解説する。4行目で、items配列を宣言する。 これは、ショッピングリストに表示される文字列を保持する配列である。 ユーザーは「りんご」や「ボール」など、ショッピングリストに表示する文字列を、 テキストボックスに記入する。ユーザーが記入した文字列を、このitems配列に保存していく。 そして、view()関数で、items配列に入った文字列を、画面上に適切に表示する処理をする。 非常に重要な考え方である。では、view()関数を詳細に見る。 まず、ユーザーが「ボール」「りんご」の2文字をショッピングリストに追加していると仮定する。 その場合、items配列に「ボール」「りんご」の文字列が入る。 この状態で、view()関数を実行する。
004var items = [ "ボール" , "りんご" ] ;
items配列には「ボール」「りんご」の文字列が入っている。
009 //[ul]タグを取得
010 const ul = document.getElementById ( "items" ) ;
011
012 //[ul]タグの子要素を全て削除
013 while ( ul.firstChild ) {
014 ul.removeChild ( ul.firstChild ) ;
015 }
010 const ul = document.getElementById ( "items" ) ;
011
012 //[ul]タグの子要素を全て削除
013 while ( ul.firstChild ) {
014 ul.removeChild ( ul.firstChild ) ;
015 }
view()関数を抜粋した。 まず、10行目でidがitemsのタグを取得して変数ulへ代入する。 変数ulには、ショッピングリストを表示するためのulタグが代入される。 13行目から15行目のwhile文で、 ulタグの子要素を全て削除する。 これは、「現在画面に表示している文字列を全て削除する処理」である。 view()関数は、Web画面を作成する関数である。 Web画面を作成する前に、「とりあえず、今の画面は全部消しましょう」という処理である。 今の画面を全部白紙に戻して、そこから新しい画面を作る、という考え方である。 では、Web画面を作る。
016 //[ul]に要素を追加する
017 for ( var i = 0 ; i < items.length ; i ++ ) {
018
019 //[li]タグを作成
020 var li = document.createElement ( "li" ) ;
021
022 //[li]タグに文字を記述
023 li.textContent = items [ i ] ;
024
025 //[li]タグを[ul]に追加
026 ul.appendChild ( li ) ;
027 }
017 for ( var i = 0 ; i < items.length ; i ++ ) {
018
019 //[li]タグを作成
020 var li = document.createElement ( "li" ) ;
021
022 //[li]タグに文字を記述
023 li.textContent = items [ i ] ;
024
025 //[li]タグを[ul]に追加
026 ul.appendChild ( li ) ;
027 }
view()関数を抜粋した。
このプログラムで、Web画面を作成する。
17行目からview()関数の最後まで（27行目まで）、for文が実行する。
for文の実行回数は、items配列の要素数である。
こんかい、items配列には「ボール」と
「りんご」が入っていると仮定している。
つまり、for文は2回繰り返される。
解説する。
20行目でliタグを作成して変数liへ代入する。
これは、文字列を表示するためのliタグである。
23行目で、liタグにitems配列の「i」番目の文字列を設定する。
004var items = [ "ボール" , "りんご" ] ;
016 //[ul]に要素を追加する
017 for ( var i = 0 ; i < 2 ; i ++ ) {
018
019 //[li]タグを作成
020 var li = document.createElement ( "li" ) ;
021
022 //[li]タグに文字を記述
023 li.textContent = "ボール" ;
024
025 //[li]タグを[ul]に追加
026 ul.appendChild ( li ) ;
027 }
017 for ( var i = 0 ; i < 2 ; i ++ ) {
018
019 //[li]タグを作成
020 var li = document.createElement ( "li" ) ;
021
022 //[li]タグに文字を記述
023 li.textContent = "ボール" ;
024
025 //[li]タグを[ul]に追加
026 ul.appendChild ( li ) ;
027 }
まず、items配列に入っている「ボール」がliタグのtextContentプロパティに入る。 26行目で、liタグをulタグへ追加する。
ショッピングリスト
- ボール
このように、文字列「ボール」が表示する。 では、もう一度for文を見る。
004var items = [ "ボール" , "りんご" ] ;
016 //[ul]に要素を追加する
017 for ( var i = 0 ; i < 2 ; i ++ ) {
018
019 //[li]タグを作成
020 var li = document.createElement ( "li" ) ;
021
022 //[li]タグに文字を記述
023 li.textContent = "りんご" ;
024
025 //[li]タグを[ul]に追加
026 ul.appendChild ( li ) ;
027 }
017 for ( var i = 0 ; i < 2 ; i ++ ) {
018
019 //[li]タグを作成
020 var li = document.createElement ( "li" ) ;
021
022 //[li]タグに文字を記述
023 li.textContent = "りんご" ;
024
025 //[li]タグを[ul]に追加
026 ul.appendChild ( li ) ;
027 }
2回目のfor文実行である。20行目でliタグを作成して、23行目で文字列「りんご」を設定する。 26行目で「りんご」を設定したliタグを、ulタグへ追加する。
ショッピングリスト
- ボール
- りんご
このように、「ボール」と「りんご」が表示する。 では、重要な事を記述する。
items配列にユーザーが入力した値を設定した後、 view()関数を実行すると、適切にWeb画面が作成される。
view()関数は、items配列の文字列を適切に画面に表示する関数である。 逆に言うと、items配列にユーザー入力値を適切に設定して、 view()関数を実行すれば、プログラムは正常に動く。
- items配列を適切に作る
- view()を実行する
アプリケーションの本質はこれだけである。
- リストへ追加する処理
- 全削除処理
- 文字列削除処理
まず、ショッピングリストに文字を表示しよう
リストへ追加する処理
addList()を作成した。ここで重要な事は、 view()関数は完成されているので、見なくて良い、という事である。
001<html><head>
002<script>
003//ショッピングリスト
004var items = [ ] ;
005
006//画面を作成する関数
007function view () {
008
009 //[ul]タグを取得
010 const ul = document.getElementById ( "items" ) ;
011
012 //[ul]タグの子要素を全て削除
013 while ( ul.firstChild ) {
014 ul.removeChild ( ul.firstChild ) ;
015 }
016 //[ul]に要素を追加する
017 for ( var i = 0 ; i < items.length ; i ++ ) {
018
019 //[li]タグを作成
020 var li = document.createElement ( "li" ) ;
021
022 //[li]タグに文字を記述
023 li.textContent = items [ i ] ;
024
025 //[li]タグを[ul]に追加
026 ul.appendChild ( li ) ;
027 }
028}
029//アイテムを追加
030function addList () {
031
032 //タグを取得
033 const input = document.getElementById ( "item" ) ;
034
035 //itemsに追加
036 items.push ( input.value ) ;
037
038 //画面を更新
039 view ( ) ;
040}
041</script>
042</head>
043<body>
044 <input type = "text" id = "item" /><br>
045 <a href="javascript:addList()">追加</a>
046 <a href="javascript:removeList()">全削除</a><br><br>
047 ショッピングリスト
048 <ul id = "items" ></ul>
049</body>
050</html>
002<script>
003//ショッピングリスト
004var items = [ ] ;
005
006//画面を作成する関数
007function view () {
008
009 //[ul]タグを取得
010 const ul = document.getElementById ( "items" ) ;
011
012 //[ul]タグの子要素を全て削除
013 while ( ul.firstChild ) {
014 ul.removeChild ( ul.firstChild ) ;
015 }
016 //[ul]に要素を追加する
017 for ( var i = 0 ; i < items.length ; i ++ ) {
018
019 //[li]タグを作成
020 var li = document.createElement ( "li" ) ;
021
022 //[li]タグに文字を記述
023 li.textContent = items [ i ] ;
024
025 //[li]タグを[ul]に追加
026 ul.appendChild ( li ) ;
027 }
028}
029//アイテムを追加
030function addList () {
031
032 //タグを取得
033 const input = document.getElementById ( "item" ) ;
034
035 //itemsに追加
036 items.push ( input.value ) ;
037
038 //画面を更新
039 view ( ) ;
040}
041</script>
042</head>
043<body>
044 <input type = "text" id = "item" /><br>
045 <a href="javascript:addList()">追加</a>
046 <a href="javascript:removeList()">全削除</a><br><br>
047 ショッピングリスト
048 <ul id = "items" ></ul>
049</body>
050</html>
こんかい、addList()関数を追加した。 ユーザーがテキストボックスに文字を入力して「追加」リンクをクリックすると、 addList()関数が実行する。
032 //タグを取得
033 const input = document.getElementById ( "item" ) ;
034
035 //itemsに追加
036 items.push ( input.value ) ;
037
038 //画面を更新
039 view ( ) ;
033 const input = document.getElementById ( "item" ) ;
034
035 //itemsに追加
036 items.push ( input.value ) ;
037
038 //画面を更新
039 view ( ) ;
addList()関数は、3行だけである。解説する。33行目で、 idがitemのタグを取得して変数inputへ代入する。 idがitemのタグは、テキストボックスである。テキストボックスが変数inputへ代入される。 36行目でitems配列にユーザーが入力した値を追加する。
配列に要素を追加 配列.push ( [値] ) ;
配列のpush()関数を利用して、配列の末尾に値を追加する。 こんかい、ユーザーが入力した文字がinputのvalueプロパティに入っている。 その入力値を、items配列へ追加する。
032 //タグを取得
033 テキストボックス = document.getElementById ( "item" ) ;
034
035 //itemsに追加
036 items.push ( ユーザー入力値 ) ;
037
038 //画面を更新
039 view ( ) ;
033 テキストボックス = document.getElementById ( "item" ) ;
034
035 //itemsに追加
036 items.push ( ユーザー入力値 ) ;
037
038 //画面を更新
039 view ( ) ;
以上の処理にて、items配列には適切な値が代入された。 この後、items配列の文字列をもとに、Web画面を適切に作成したい。 Web画面を適切に作成する場合、view()関数を実行すればよかった。 39行目でview()関数を実行する。 以上の処理で、items配列に入った文字列がWeb画面に表示する。
文字列を全て削除する
こんかい、removeList()関数を追加した。他のプログラムに変更は無い。
001<html><head>
002<script>
003//ショッピングリスト
004var items = [ ] ;
005
006//画面を作成する関数
007function view () {
008
009 //[ul]タグを取得
010 const ul = document.getElementById ( "items" ) ;
011
012 //[ul]タグの子要素を全て削除
013 while ( ul.firstChild ) {
014 ul.removeChild ( ul.firstChild ) ;
015 }
016 //[ul]に要素を追加する
017 for ( var i = 0 ; i < items.length ; i ++ ) {
018
019 //[li]タグを作成
020 var li = document.createElement ( "li" ) ;
021
022 //[li]タグに文字を記述
023 li.textContent = items [ i ] ;
024
025 //[li]タグを[ul]に追加
026 ul.appendChild ( li ) ;
027 }
028}
029//アイテムを追加
030function addList () {
031
032 //タグを取得
033 const input = document.getElementById ( "item" ) ;
034
035 //itemsに追加
036 items.push ( input.value ) ;
037
038 //画面を更新
039 view ( ) ;
040}
041//文字列を全て削除する
042function removeList () {
043
044 //ショッピングリストを空にする
045 items = [ ] ;
046
047 //画面を作成
048 view () ;
049}
050</script>
051</head>
052<body>
053 <input type = "text" id = "item" /><br>
054 <a href="javascript:addList()">追加</a>
055 <a href="javascript:removeList()">全削除</a><br><br>
056 ショッピングリスト
057 <ul id = "items" ></ul>
058</body>
059</html>
002<script>
003//ショッピングリスト
004var items = [ ] ;
005
006//画面を作成する関数
007function view () {
008
009 //[ul]タグを取得
010 const ul = document.getElementById ( "items" ) ;
011
012 //[ul]タグの子要素を全て削除
013 while ( ul.firstChild ) {
014 ul.removeChild ( ul.firstChild ) ;
015 }
016 //[ul]に要素を追加する
017 for ( var i = 0 ; i < items.length ; i ++ ) {
018
019 //[li]タグを作成
020 var li = document.createElement ( "li" ) ;
021
022 //[li]タグに文字を記述
023 li.textContent = items [ i ] ;
024
025 //[li]タグを[ul]に追加
026 ul.appendChild ( li ) ;
027 }
028}
029//アイテムを追加
030function addList () {
031
032 //タグを取得
033 const input = document.getElementById ( "item" ) ;
034
035 //itemsに追加
036 items.push ( input.value ) ;
037
038 //画面を更新
039 view ( ) ;
040}
041//文字列を全て削除する
042function removeList () {
043
044 //ショッピングリストを空にする
045 items = [ ] ;
046
047 //画面を作成
048 view () ;
049}
050</script>
051</head>
052<body>
053 <input type = "text" id = "item" /><br>
054 <a href="javascript:addList()">追加</a>
055 <a href="javascript:removeList()">全削除</a><br><br>
056 ショッピングリスト
057 <ul id = "items" ></ul>
058</body>
059</html>
「全削除」リンクをクリックするとremoveList()関数が実行する。 では、removeList()関数を解説する。 removeList()関数は、2行だけである。 42行目で定義されている。 45行目でitems配列を空にする。 つまり、変数itemsに要素が入っていない配列を代入する。 これで、「ショッピングリストは空」になる。 では、この空のショッピングリストでWeb画面を作成しよう。 48行目でview()関数を実行してWeb画面を作成する。
特定の文字列を削除する（準備）
今作成しているアプリケーションは、ショッピングリストの文字列をクリックすると、 その文字列を削除する仕様であった。 その機能を少しだけ記述する。
001<html><head>
002<script>
003//ショッピングリスト
004var items = [ ] ;
005
006//画面を作成する関数
007function view () {
008
009 //[ul]タグを取得
010 const ul = document.getElementById ( "items" ) ;
011
012 //[ul]タグの子要素を全て削除
013 while ( ul.firstChild ) {
014 ul.removeChild ( ul.firstChild ) ;
015 }
016 //[ul]に要素を追加する
017 for ( var i = 0 ; i < items.length ; i ++ ) {
018
019 //[a]タグを作成
020 var link = document.createElement ( "a" ) ;
021
022 //[a]タグのhref属性を設定
023 link.href = "javascript:alert( " + i + " )" ;
024
025 //[a]タグに文字を記述
026 link.textContent = items [ i ] ;
027
028 //[li]タグを作成
029 var li = document.createElement ( "li" ) ;
030
031 //[a]タグを[li]に追加
032 li.appendChild ( link ) ;
033
034 //[li]タグを[ul]に追加
035 ul.appendChild ( li ) ;
036 }
037}
038//アイテムを追加
039function addList () {
040
041 //タグを取得
042 const input = document.getElementById ( "item" ) ;
043
044 //itemsに追加
045 items.push ( input.value ) ;
046
047 //画面を更新
048 view ( ) ;
049}
050//文字列を全て削除する
051function removeList () {
052
053 //ショッピングリストを空にする
054 items = [ ] ;
055
056 //画面を作成
057 view () ;
058}
059</script>
060</head>
061<body>
062 <input type = "text" id = "item" /><br>
063 <a href="javascript:addList()">追加</a>
064 <a href="javascript:removeList()">全削除</a><br><br>
065 ショッピングリスト
066 <ul id = "items" ></ul>
067</body>
068</html>
002<script>
003//ショッピングリスト
004var items = [ ] ;
005
006//画面を作成する関数
007function view () {
008
009 //[ul]タグを取得
010 const ul = document.getElementById ( "items" ) ;
011
012 //[ul]タグの子要素を全て削除
013 while ( ul.firstChild ) {
014 ul.removeChild ( ul.firstChild ) ;
015 }
016 //[ul]に要素を追加する
017 for ( var i = 0 ; i < items.length ; i ++ ) {
018
019 //[a]タグを作成
020 var link = document.createElement ( "a" ) ;
021
022 //[a]タグのhref属性を設定
023 link.href = "javascript:alert( " + i + " )" ;
024
025 //[a]タグに文字を記述
026 link.textContent = items [ i ] ;
027
028 //[li]タグを作成
029 var li = document.createElement ( "li" ) ;
030
031 //[a]タグを[li]に追加
032 li.appendChild ( link ) ;
033
034 //[li]タグを[ul]に追加
035 ul.appendChild ( li ) ;
036 }
037}
038//アイテムを追加
039function addList () {
040
041 //タグを取得
042 const input = document.getElementById ( "item" ) ;
043
044 //itemsに追加
045 items.push ( input.value ) ;
046
047 //画面を更新
048 view ( ) ;
049}
050//文字列を全て削除する
051function removeList () {
052
053 //ショッピングリストを空にする
054 items = [ ] ;
055
056 //画面を作成
057 view () ;
058}
059</script>
060</head>
061<body>
062 <input type = "text" id = "item" /><br>
063 <a href="javascript:addList()">追加</a>
064 <a href="javascript:removeList()">全削除</a><br><br>
065 ショッピングリスト
066 <ul id = "items" ></ul>
067</body>
068</html>
view()関数のプログラムを変更して、 「文字列をクリックすると、JavaScriptが動く」という処理を記述した。 文字列を作成しているプログラムは、view()関数なので、 処理内容を変更する必要がある。 では、順番に解説する。
003//ショッピングリスト
004var items = ["ボール" , "りんご"] ;
004var items = ["ボール" , "りんご"] ;
items配列には「ボール」と「りんご」が入っていると仮定する。
010 const ul = document.getElementById ( "items" ) ;
011
012 //[ul]タグの子要素を全て削除
013 while ( ul.firstChild ) {
014 ul.removeChild ( ul.firstChild ) ;
015 }
011
012 //[ul]タグの子要素を全て削除
013 while ( ul.firstChild ) {
014 ul.removeChild ( ul.firstChild ) ;
015 }
変更していない。ulタグを取得してulタグの子要素を全て削除するプログラムである。 次のプログラムを変更している。
016 //[ul]に要素を追加する
017 for ( var i = 0 ; i < items.length ; i ++ ) {
018
019 //[a]タグを作成
020 var link = document.createElement ( "a" ) ;
021
022 //[a]タグのhref属性を設定
023 link.href = "javascript:alert( " + i + " )" ;
024
025 //[a]タグに文字を記述
026 link.textContent = items [ i ] ;
027
028 //[li]タグを作成
029 var li = document.createElement ( "li" ) ;
030
031 //[a]タグを[li]に追加
032 li.appendChild ( link ) ;
033
034 //[li]タグを[ul]に追加
035 ul.appendChild ( li ) ;
036 }
017 for ( var i = 0 ; i < items.length ; i ++ ) {
018
019 //[a]タグを作成
020 var link = document.createElement ( "a" ) ;
021
022 //[a]タグのhref属性を設定
023 link.href = "javascript:alert( " + i + " )" ;
024
025 //[a]タグに文字を記述
026 link.textContent = items [ i ] ;
027
028 //[li]タグを作成
029 var li = document.createElement ( "li" ) ;
030
031 //[a]タグを[li]に追加
032 li.appendChild ( link ) ;
033
034 //[li]タグを[ul]に追加
035 ul.appendChild ( li ) ;
036 }
liタグにaタグを追加する処理を記述した。 処理手順は次の通りである。
- aタグを作成
- aタグにリンクを設定（href属性の設定）
- liタグを作成
- aタグをliタグへ追加
- liタグをulタグへ追加
では、プログラムを分割して解説する。
016 //[ul]に要素を追加する
017 for ( var i = 0 ; i < items.length ; i ++ ) {
018
019 //[a]タグを作成
020 var link = document.createElement ( "a" ) ;
021
022 //[a]タグのhref属性を設定
023 link.href = "javascript:alert( " + i + " )" ;
024
025 //[a]タグに文字を記述
026 link.textContent = items [ i ] ;
017 for ( var i = 0 ; i < items.length ; i ++ ) {
018
019 //[a]タグを作成
020 var link = document.createElement ( "a" ) ;
021
022 //[a]タグのhref属性を設定
023 link.href = "javascript:alert( " + i + " )" ;
024
025 //[a]タグに文字を記述
026 link.textContent = items [ i ] ;
まず、for文である。itemsの要素の数だけ文字列を表示する必要があるため、 for文でitemsの要素の数だけ繰り返し処理を実行する。 20行目で、aタグを作成して、変数linkへ代入する。 23行目でaタグのhref属性に文字列を設定する。 aタグにリンクを設定する場合は、href属性を利用する。 href属性には、
このように記述する。変数iの値が「0」の場合、
このようなプログラムになる。つまり、リンクをクリックすると、「0」と表示する。
26行目で、itemsのi番目の文字列をaタグに設定する。
iの値が「0」の場合、「ボール」が表示する。
以上の処理で、次のようなタグが変数linkに入る
<a href = "javascript:alert( 0 )">ボール</a>
クリックすると、「0」と表示するリンクである。このaタグをliタグに追加して、 そのliタグをulタグへ追加したい。
016 //[ul]に要素を追加する
017 for ( var i = 0 ; i < items.length ; i ++ ) {
018
019 //[a]タグを作成
020 var link = document.createElement ( "a" ) ;
021
022 //[a]タグのhref属性を設定
023 link.href = "javascript:alert( " + i + " )" ;
024
025 //[a]タグに文字を記述
026 link.textContent = items [ i ] ;
027
028 //[li]タグを作成
029 var li = document.createElement ( "li" ) ;
030
031 //[a]タグを[li]に追加
032 li.appendChild ( link ) ;
033
034 //[li]タグを[ul]に追加
035 ul.appendChild ( li ) ;
036 }
017 for ( var i = 0 ; i < items.length ; i ++ ) {
018
019 //[a]タグを作成
020 var link = document.createElement ( "a" ) ;
021
022 //[a]タグのhref属性を設定
023 link.href = "javascript:alert( " + i + " )" ;
024
025 //[a]タグに文字を記述
026 link.textContent = items [ i ] ;
027
028 //[li]タグを作成
029 var li = document.createElement ( "li" ) ;
030
031 //[a]タグを[li]に追加
032 li.appendChild ( link ) ;
033
034 //[li]タグを[ul]に追加
035 ul.appendChild ( li ) ;
036 }
29行目でliタグを作成して変数liへ代入する。32行目でaタグをliタグへ追加する。 35行目で、そのliタグをulタグへ追加する。 for文実行一回目が終了すると、ulタグは次のようになる。
061<body>
062 <input type = "text" id = "item" /><br>
063 <a href="javascript:addList()">追加</a>
064 <a href="javascript:removeList()">全削除</a><br><br>
065 ショッピングリスト
066 <ul id = "items" >
067 <li><a href = "javascript:alert( 0 )" >ボール</a></li>
069 </ul>
070</body>
062 <input type = "text" id = "item" /><br>
063 <a href="javascript:addList()">追加</a>
064 <a href="javascript:removeList()">全削除</a><br><br>
065 ショッピングリスト
066 <ul id = "items" >
067 <li><a href = "javascript:alert( 0 )" >ボール</a></li>
069 </ul>
070</body>
クリックすると、「0」と表示するリンクがulタグへ追加された。 では、view()関数のfor文をもう一度見る。
003//ショッピングリスト
004var items = ["ボール" , "りんご"] ;
004var items = ["ボール" , "りんご"] ;
items配列には「ボール」と「りんご」が入っていると仮定している。
016 //[ul]に要素を追加する
017 for ( var i = 0 ; i < items.length ; i ++ ) {
018
019 //[a]タグを作成
020 var link = document.createElement ( "a" ) ;
021
022 //[a]タグのhref属性を設定
023 link.href = "javascript:alert( " + i + " )" ;
024
025 //[a]タグに文字を記述
026 link.textContent = items [ i ] ;
027
028 //[li]タグを作成
029 var li = document.createElement ( "li" ) ;
030
031 //[a]タグを[li]に追加
032 li.appendChild ( link ) ;
033
034 //[li]タグを[ul]に追加
035 ul.appendChild ( li ) ;
036 }
017 for ( var i = 0 ; i < items.length ; i ++ ) {
018
019 //[a]タグを作成
020 var link = document.createElement ( "a" ) ;
021
022 //[a]タグのhref属性を設定
023 link.href = "javascript:alert( " + i + " )" ;
024
025 //[a]タグに文字を記述
026 link.textContent = items [ i ] ;
027
028 //[li]タグを作成
029 var li = document.createElement ( "li" ) ;
030
031 //[a]タグを[li]に追加
032 li.appendChild ( link ) ;
033
034 //[li]タグを[ul]に追加
035 ul.appendChild ( li ) ;
036 }
20行目で新しくaタグを作成し、23行目でhref属性を設定する。 for文2回目の実行なので、変数iの値は「1」である。
このようなプログラムになる。つまり、リンクをクリックすると、「1」と表示する。 26行目でaタグにitems配列のインデックス「1」の文字列を追加する。 items配列のインデックス「1」の文字列は、「りんご」である。 26行目が実行すると、
<a href = "javascript:alert( 1 )">りんご</a>
変数linkにこのようなオブジェクトが作成される。
29行目でliタグを作成し、32行目でliタグにlinkを追加する。
35行目で、そのliタグをulタグへ追加する。
以上の処理で、for文が終了し、新しいWeb画面が表示する。
061<body>
062 <input type = "text" id = "item" /><br>
063 <a href="javascript:addList()">追加</a>
064 <a href="javascript:removeList()">全削除</a><br><br>
065 ショッピングリスト
066 <ul id = "items" >
067 <li><a href = "javascript:alert( 0 )" >ボール</a></li>
068 <li><a href = "javascript:alert( 1 )" >りんご</a></li>
069 </ul>
070</body>
062 <input type = "text" id = "item" /><br>
063 <a href="javascript:addList()">追加</a>
064 <a href="javascript:removeList()">全削除</a><br><br>
065 ショッピングリスト
066 <ul id = "items" >
067 <li><a href = "javascript:alert( 0 )" >ボール</a></li>
068 <li><a href = "javascript:alert( 1 )" >りんご</a></li>
069 </ul>
070</body>
「ボール」と「りんご」が表示する。 それぞれのリンクをクリックすると、それぞれ「0」と「1」が表示する。 この「0」と「1」は、items配列のインデックスを意味している。 さて、今は文字列をクリックしたら文字列が削除されるプログラムを記述していた。 クリックした文字列はインデックスで特定できる。 インデックスを利用して、items配列から文字を削除すればよい。 その後、view()関数を実行する。 この流れで行く。では、完成品を見る。
完成品
完成品である。view()関数の文字列を表示する場所で、 リンクのhref属性を変更した。view()関数の変更箇所は、この1行である。 また、特定の子要素をitems配列から削除する関数、removeItem()関数を追加した。
001<html><head>
002<script>
003//ショッピングリスト
004var items = [ ] ;
005
006//画面を作成する関数
007function view () {
008
009 //[ul]タグを取得
010 const ul = document.getElementById ( "items" ) ;
011
012 //[ul]タグの子要素を全て削除
013 while ( ul.firstChild ) {
014 ul.removeChild ( ul.firstChild ) ;
015 }
016 //[ul]に要素を追加する
017 for ( var i = 0 ; i < items.length ; i ++ ) {
018
019 //[a]タグを作成
020 var link = document.createElement ( "a" ) ;
021
022 //[a]タグのhref属性を設定
023 link.href = "javascript:removeItem( " + i + " )" ;
024
025 //[a]タグに文字を記述
026 link.textContent = items [ i ] ;
027
028 //[li]タグを作成
029 var li = document.createElement ( "li" ) ;
030
031 //[a]タグを[li]に追加
032 li.appendChild ( link ) ;
033
034 //[li]タグを[ul]に追加
035 ul.appendChild ( li ) ;
036 }
037}
038//アイテムを追加
039function addList () {
040
041 //タグを取得
042 const input = document.getElementById ( "item" ) ;
043
044 //itemsに追加
045 items.push ( input.value ) ;
046
047 //画面を更新
048 view ( ) ;
049}
050//文字列を全て削除する
051function removeList () {
052
053 //ショッピングリストを空にする
054 items = [ ] ;
055
056 //画面を作成
057 view () ;
058}
059function removeItem ( index ) {
060
061 //[index]を指定して
062 //ショッピングリストから削除
063 items.splice ( index , 1 ) ;
064
065 //画面を作成
066 view () ;
067}
068</script>
069</head>
070<body>
071 <input type = "text" id = "item" /><br>
072 <a href="javascript:addList()">追加</a>
073 <a href="javascript:removeList()">全削除</a><br><br>
074 ショッピングリスト
075 <ul id = "items" ></ul>
076</body>
077</html>
002<script>
003//ショッピングリスト
004var items = [ ] ;
005
006//画面を作成する関数
007function view () {
008
009 //[ul]タグを取得
010 const ul = document.getElementById ( "items" ) ;
011
012 //[ul]タグの子要素を全て削除
013 while ( ul.firstChild ) {
014 ul.removeChild ( ul.firstChild ) ;
015 }
016 //[ul]に要素を追加する
017 for ( var i = 0 ; i < items.length ; i ++ ) {
018
019 //[a]タグを作成
020 var link = document.createElement ( "a" ) ;
021
022 //[a]タグのhref属性を設定
023 link.href = "javascript:removeItem( " + i + " )" ;
024
025 //[a]タグに文字を記述
026 link.textContent = items [ i ] ;
027
028 //[li]タグを作成
029 var li = document.createElement ( "li" ) ;
030
031 //[a]タグを[li]に追加
032 li.appendChild ( link ) ;
033
034 //[li]タグを[ul]に追加
035 ul.appendChild ( li ) ;
036 }
037}
038//アイテムを追加
039function addList () {
040
041 //タグを取得
042 const input = document.getElementById ( "item" ) ;
043
044 //itemsに追加
045 items.push ( input.value ) ;
046
047 //画面を更新
048 view ( ) ;
049}
050//文字列を全て削除する
051function removeList () {
052
053 //ショッピングリストを空にする
054 items = [ ] ;
055
056 //画面を作成
057 view () ;
058}
059function removeItem ( index ) {
060
061 //[index]を指定して
062 //ショッピングリストから削除
063 items.splice ( index , 1 ) ;
064
065 //画面を作成
066 view () ;
067}
068</script>
069</head>
070<body>
071 <input type = "text" id = "item" /><br>
072 <a href="javascript:addList()">追加</a>
073 <a href="javascript:removeList()">全削除</a><br><br>
074 ショッピングリスト
075 <ul id = "items" ></ul>
076</body>
077</html>
では、変更箇所から確認する。 view()関数の23行目を変更した。 前回のサンプルでは、クリックした時にインデックスがダイアログに表示した。 今回は、文字列をクリックした時にremoveItem()関数が実行するように記述した。 removeItem()関数を実行する際、引数にインデックスを渡す。 これで、どの文字列がクリックされたのか分かる。 では、removeItem()関数を見る。
059function removeItem ( index ) {
060
061 //[index]を指定して
062 //ショッピングリストから削除
063 items.splice ( index , 1 ) ;
064
065 //画面を作成
066 view () ;
067}
060
061 //[index]を指定して
062 //ショッピングリストから削除
063 items.splice ( index , 1 ) ;
064
065 //画面を作成
066 view () ;
067}
2行だけである。63行目でitems配列からインデックスを指定して、 値を削除する。インデックスは引数indexを利用する。
配列のsplice()関数 配列.splice ( 削除開始場所 , 削除する要素数 ) ;
splice()関数は配列の関数である。非常に便利な関数であるが、
こんかいは「削除機能」のみに注目する。
splice()関数は、第一引数に削除する場所を指定する。
こんかいは、引数indexの要素を削除するので、
配列のsplice()関数 配列.splice ( index , 削除する要素数 ) ;
このように記述する。また、削除する値は一つなので、
配列のsplice()関数 配列.splice ( index , 1 ) ;
このように記述する。
059function removeItem ( index ) {
060
061 //[index]を指定して
062 //ショッピングリストから削除
063 items.splice ( index , 1 ) ;
064
065 //画面を作成
066 view () ;
067}
060
061 //[index]を指定して
062 //ショッピングリストから削除
063 items.splice ( index , 1 ) ;
064
065 //画面を作成
066 view () ;
067}
63行目で、items配列から適切に文字列を削除できた。 最後に、view()関数を実行する。 これで、新しいitems配列をもとに、正しくWeb画面を表示する。 以上で講座を終了する。
プログラミング設計
最後にプログラミング設計を語る。
こんかいのプログラムはどうだっただろうか？
恐らく皆様が製造するプログラムとは異なると思う。
プログラミングを習い始めた多くの方は
「仕様を満たせば良い」という考え方でプログラミングすると思う。
もちろん、始めの頃はそれで良い。
それが良い。しかし、徐々に「良いプログラム」を記述する必要があるし、
必要に迫られるだろう。今ここで、良いプログラムについて考察するのは悪くない。
良いプログラムは「柔軟性と拡張性」を備えている。
そして、プログラマーは常に柔軟性と拡張性を満たすプログラムを書く。
こんかいご覧頂いたプログラムは、とても柔軟で拡張性があると思う。
皆様もこのプログラムに様々な機能を追加する事ができるだろう。
なぜこのようなプログラミングができるのか？
それを語る。
こんかいのプログラムでもっとも重要な関数は view() 関数である。
この関数を作れるかどうかが、プログラマーの資質を左右するだろう。
では、view()関数を製造するために、どのような考え方が必要だろうか？
プログラミング設計基礎 データと表示機能を分ける
最低限の基礎の基礎である。
| データ | items 配列 | アプリケーションで利用するデータ。今回はユーザー入力値 |
| 表示機能 | view()関数 | Web画面を作る関数 |
データはitems配列で保持していた。データとはアプリケーションで利用する値である。
今回は、ショッピングリストの文字列である。
この文字列がデータであり、そのデータをitems配列で管理した。
データを一元管理すると、堅牢なプログラムになる。
Web画面を作成する関数はview()である。
表示機能を持つ関数と言える。さて、表示機能を持つ関数も、
一つにしぼる必要がある。複数の関数が表示機能を持つと、
「結局どの関数を実行すればいいのだろう？」と混乱する。
今回、view()関数を定義したことにより、
「新しくWeb画面を更新する場合は、view()関数を実行すればよい」という単純化に成功している。
単純化する事により、新たな機能を追加しやすくなった。
では、本講座をここで閉じる。最後までお付き合い頂き、誠にありがとうございました。
