JavaScriptは動的に型を付けるスクリプト言語で、制約が緩い言語です。個人的にはプログラミングを始めるのなら、おすすめの言語です。
しかし、最近では静的型付けが注目されており、JavaScriptにもそれが求められています。
MicroSoftが開発したTypeScriptが今とても注目されています。TypeScriptは型をあらかじめ宣言し、エラーを回避することが可能です。近頃はTypeScriptが求人の条件であったり、求められている会社は増えています。
今回は、前回に引き続き、TypeScriptの型入門編として、DOMに関する型について初学者向けにわかりやすく解説していきます。また、前回同様にJavaScriptの基礎文法がわかる方向けに解説していきます。
TypeScript DOM 型入門
DOMの基本的な型
では、解説をしていきます。
まず、下記のようなHTMLファイルを用意してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width = device-width ,initial-scale = 1" />
<meta name="robots" content="noindex,nofollow" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>
JavaScript入門講座
</title>
<script>
</script>
</head>
<body>
<h1>DOM入門</h1>
<div id="js-div-1">
<div id="js-dom-1">
<p id="js-p-1">
JR東日本 JR西日本 JR東海
</p>
<p id="js-p-2">
北海道
</p>
</div>
</div>
<div id="js-div-2">
<div id="js-submit-1">
<label for="lab-ques1">
あなたが行ってみたい観光地は?
</label>
<input type="text" id="js-input-1" name="lab-ques1" placeholder="定山渓温泉" />
<button type="submit" id="js-btn-1">クリック</button>
</div>
<div id="js-submit-2" style="margin: 10px 0px 10px 0px; padding:10px 0px 10px 0px;">
背景が変わります。
<div style="margin: 10px 0px 10px 0px;">
<button type="submit" id="js-btn-2">クリック</button>
</div>
</div>
</div>
<div id="js-div-4">
<div>
<p>天気情報</p>
</div>
<div>
<p>
<button id="js-btn-4">フェッチ</button>
</p>
</div>
<div id="js-div-8">
</div>
</div>
<script src="dom.js"></script>
</body>
</html>
const js_div_selector:HTMLDivElement | null = document.querySelector("div");
console.log(js_div_selector);
const js_div_selector_all:NodeListOf<HTMLDivElement> = document.querySelectorAll("div");
console.log(js_div_selector_all);
const js_p_1:HTMLElement | null = document.getElementById("js-p-1");
console.log(js_p_1);
const js_label:NodeListOf<HTMLLabelElement> = document.querySelectorAll("label");
const js_btn_1:HTMLElement | null= document.getElementById("js-btn-1");
const btn2:HTMLElement | null = document.getElementById("js-btn-2");
const colorAry:string[] = ["#FFD489","#FFB64D","#FFE543","#C3FF43","#82FF43","#43FFAA","#5FFAFF","#5FBDFF","#5F6DFF"];
const bg:HTMLElement | null = document.getElementById("js-submit-2");
const randomColor = ():string =>{
let i:number = Math.floor(Math.random()*(colorAry.length+1));
return colorAry[i];
}
const changeBgCol = ():void => {
bg.style.backgroundColor = randomColor();
}
btn2.addEventListener("click",changeBgCol);
TypeScriptはJavaScriptを100%カバーしていますので、もちろんDOMの型も用意されています。
- HTMLElement
- NodeListOf
- HTMLLabelElement
- HTMLDivElement
- HTMLParagraphElement
また、VScodeを使っている方で、TSファイルを編集している時、マウスカーソルを変数や関数にホバーさせると、型を推論してくれます。それを参考にして型を宣言するということも一つの手です。
この他にも様々な型があります。それだけ、多くの型があるということになります。
async 非同期通信 型
const url:string = "https://weather.tsukumijima.net/api/forecast/city/";
const js_div_3:HTMLElement | null = document.getElementById("js-div-8");
const js_btn_4:HTMLElement | null = document.getElementById("js-btn-4");
interface Location{
area: string;
prefecture: string;
district: string;
city: string;
}
interface Weather{
weather: string;
wind: string;
wave: string;
}
const displayJsonData = async (resJson:any):Promise<void> => {
const param1:HTMLParagraphElement = document.createElement("p");
const param2:HTMLParagraphElement = document.createElement("p");
const param3:HTMLParagraphElement = document.createElement("p");
const loc:Location = resJson.location;
const weather:Weather = resJson.forecasts[0].detail;
param1.textContent = `場所 : ${loc.area+" " + loc.city+" "+loc.district}`;
js_div_3.appendChild(param1);
param2.textContent = `天気 : ${weather.weather}`;
js_div_3.appendChild(param2);
param3.textContent = `風 : ${weather.wind}`;
js_div_3.appendChild(param3);
console.log(loc);
console.log(weather);
}
const displayBody = async ():Promise<void> => {
try{
const cityId:string = "017010";
const res:any = await fetch(`${url}${cityId}`);
const resJson:any = await res.json();
console.log(resJson);
await displayJsonData(resJson);
}catch(err:unknown){
console.error(err);
}
}
js_btn_4.addEventListener("click",displayBody);
非同期通信をするときも型があります。async awaitを使用する場合は、Promiseを使用します。そのジェネリクスとして、返り値の型もしくはvoidを指定します。
APIからデータを通信する場合、型を指定できるのなら、型を指定します。ただ、どのような型なのかは引っ張ってくるAPIによってそれぞれ異なります。今回の場合は取得したデータのうち、WeatherとLocationを定義しています。
取得したデータの型は様々なため、自分でオブジェクトとして定義するのがいいでしょう。定義するには実際にconsole.logなどで、出力してみて確認しながら定義します。
ただ、データ量が膨大であり、複雑であればあるほど、工数が増えます。どうしてもという場合はすべての型を許容する anyを使うという手もあります。
まとめ
では今回のまとめに入ります。
今回はここまでとなります。お疲れさまでした。