前回作ったtableのマス目を、javascriptで構築してみたいと思います。
[更新] index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>NumberPlace</title>
<link type='text/css' rel='stylesheet' href='style.css' />
<script type='module' src='main.js'></script>
</head>
<body>
<h1>NumberPlace</h1>
<div id='NumberPlace'></div>
</body>
</html>
[新規] main.js
import { View } from './js/view.js'
export const Main = {
stage_id : 'NumberPlace',
}
function init(){
Main.view = new View()
}
switch(document.readyState){
case 'complete':
case 'interactive':
init()
break
default:
window.addEventListener('DOMContetLoaded' , init)
break
}
[新規] js/view.js
import { Main } from '../main.js'
export class View{
constructor(){
if(!this.target){return}
this.set_stage()
}
get target(){
return document.getElementById(Main.stage_id)
}
set_stage(){
const table = document.createElement('table')
this.target.appendChild(table)
this.set_row(table)
}
set_row(parent){
for(let i=0; i<9; i++){
const row = document.createElement('tr')
parent.appendChild(row)
this.set_cell(row)
}
}
set_cell(parent){
for(let i=0; i<9; i++){
const cell = document.createElement('td')
parent.appendChild(cell)
}
}
}
解説とポイント
今回も表示すると、前回と同じ見た目になります。
でも、htmlファイルの中身が非常にスッキリとした事に気がつきましたか？
tableの中身は9 x 9の単純な構造なので、９回ループするfor文を2重に書けばいいだけでした。
そして、今後機能追加をしていくと、javascriptファイルが膨れ上がる為、htmlで読み込むjavascriptファイルを、main.jsとしてindex.htmlのすぐ横に置いて、
機能を追加するたびに増えていくjavascriptファイルは、jsフォルダに入れ込むことにした。
今回は、table表示の処理をするview.jsを作ったという事なのである。
javascriptは、class構造が便利
もともと非同期関数を書くのが良いとされていましたが、javascriptでも、classが使えることになってから、他のプログラム言語と同じ様な間隔で書けることからソッチのほうが便利ということで、
今回はclass構造にしています。
ただし、デメリットがいくつかあって、超古いインターネットブラウザ（特にIE）では動かないという点と、
キャッシュがコントロールできなくなるので、都度スーパーリロードをしなければいけないという点。
古いブラウザに関しては、マイノリティは除外するという方針で、問題ないように思えますが、
キャッシュ問題は、現時点でいい方法がないので、プログラム更新の時にトラブルが起きる可能性もあるか〜と思ってしまった。
main.jsの説明
Mainというグローバル変数を作って、それをexportできるようにしている。
今後追加されていっくファイルなどから、このMain変数からいろいろな情報を取得できるようにしている。
そして、switch文で、判定している、document.readyStateは、ページの読み込みの状態で判別している。
interactiveは、DOM構造のHTMLが読み込まれた状態
completeは、画像ファイルなど、ページの全てのコンテンツ読み込みが完了している状態。
（ただし、動的に読み込まれるものは含まれない）
それ以外は、loadingという値で、ページが読み込み途中の状態という事。
interactiveと、completeの状態は、そのまま普通に処理を実行しても問題ないが、
loadingの場合は、ページの読み込み後に処理をするために、addEventListenerでloadかDOMContetLoadedの処理を待って、スタートをすればいいという風に書かれている。
このやり方、インターネットブラウザツールだと、ホームページでもなんでも使える方法なので、是非覚えておきましょう。
view.jsの説明
class Viewでは、tableに9 x 9のマス目を作る2重ループ処理を、関数に分けて書いてあります。
それぞれ、trタグとtdタグを作っている程度の処理なので、読み解くのもカンタンだと思います。
classのgetterやsetterなどの使い方が分からない人は、事前にリファレンスサイトなどを見て学習しておくと、このソースの意味がわかりやすくなると思います。
getterの説明
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/get
setterの説明
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/set
0 件のコメント:
コメントを投稿