エンジニアスタンプラリー～フロントエンド編＃2

企画主旨

Frontend Developer Roadmapをひたすら巡回する企画
詳しくはこちら

今回の実施内容

JavaScript基礎
前回と同様、基本的にMDN Web docs（初学者バイブル）を参考にする。

Basic of JavaScript

Syntax and Basic Constructs

MDN-MozillaのJavaScript basicsを参考。
次ステップがDOM操作なので、DOMに触っていはいけません。あくまで文法と構成。
HTMLのonclickから無理やり呼び出す。

main.js

function sorry() {
    var result = "Sorry, Backend Stamp Rally is under construction";
    alert(result);
}

Learn DOM Manipulation

前項同様、MDN-MozillaのGetting started with HTMLを参考に実装。
雑、汚、古。しかし、これもルール。

main.js

function addSkill() {
    var skillBox = document.getElementById('skill-box');
    var skillName = skillBox.value;

    if (skillName == "") {
        return
    }

    skillBox.value = "";

    // article要素を生成
    var article = document.createElement('article');
    article.className = 'skill';

    // h3要素を生成
    var h3 = document.createElement('h3');
    h3.textContent = skillName;

    // p要素を生成
    var p = document.createElement('p');

    article.appendChild(h3);
    article.appendChild(p);

    // 生成したdiv要素を追加する
    document.getElementById('contents').appendChild(article);
}

Learn Fetch API / Ajax (XHR)

Fetching data from the serverを参考に実装。
CORSの制約が面倒だったので、ローカル資材からFetch。(API ??)

main.js

function fetchApi() {
    var url = "assets/tenki.json";
    fetch(url).then(function(response) {
        response.text().then(function(text) {
            var json = JSON.parse(text);
            var json_forecasts = json["forecasts"][0];
            var weatherItem = document.getElementById('weather-news');
            weatherItem.textContent = json_forecasts["date"]+"："+json_forecasts["telop"];
        });
    });
}

ES6+ and modular JavaScript

ES6の内容が重すぎて、チュートリアルな記事が見つからない。
従って、筆者の偏見で以下の機能を重点的に追加。

• let, const
• アロー関数
• import, export

main.js

import { fetchApi } from "./fetch.js";
import { addSkill } from "./skill.js";

document.getElementById("backend").addEventListener("click", (event) => {
    event.preventDefault();
    alert("Sorry, Backend Stamp Rally is under construction");
}, false);

document.getElementById("add").addEventListener("click", (event) => {
    event.preventDefault();
    addSkill();
}, false);

fetchApi();

Understand the concepts Hoisting, Event Bubbling, Scope, Prototype, Shadow DOM, strict, how browsers work, DNS, HTTP

急に詰め込みだしてやっつけ感が垣間見える。
一通り用語をググった。以上。
※後続課題で反映させる予定

成果物

裏では色々変えているのに、見た目はほぼ変わらないのがこの企画の醍醐味。
https://tonchan1216.github.io/WDR-frontend/v2/
https://github.com/tonchan1216/WDR-frontend/tree/v2.0