JavaScriptとか勉強中 - SE（たぶん）の雑感記

タイトル通り、勉強しています。

以前書いた記事の通り、筆者のレベル感は、

入門サイト等である程度やった後、PWAのチュートリアルのコードが理解できない

といった感じです。

hiroronn.hatenablog.jp

勉強の動機とか

JavaScriptの基礎は、各種構文や四則演算を覚えること、だと思います。

とはいえ、フロントエンドでJavaScriptを扱うなら、DOMの操作等の知識はある程度必要です。

執筆時点で、フロントエンドのJSライブラリとして

React
Angular
Vue

というものが有名です。
今後も変わっていくことが予想されるので、JavaScriptそのものの基礎知識はあって困らない、と考えています。

課題

上で挙げたような各ライブラリであれば、それらの公式ページに行けば、チュートリアルがあります。

しかし、当然ながらJavaScriptってこういうものなんだよみたいなチュートリアルではありません。

しばらくは、下記サイトでやっていました。

developer.mozilla.org

が、英語訳にかかる時間がきついため、諦めました。
タグのリファレンスは重宝しています。

勉強に使っているサイト

JavaScript初級者から中級者になろう — uhyohyo.net

JavaScriptの勉強に使えるサイトが無いか、いろいろググっているときに見つけました。
大変、重宝しております。作成者様、ありがとうございます。

オブジェクトの話やDOMの話、イベント等が細かく書いてあります。
個人的には、そこの話が欲しかったんだよ！という感じでした。

PWAのチュートリアルやっているときに分からなかった、getElementByIdやaddEventListener等の意味や仕組みが、だいたい分かるようになりました。

執筆時点で７章までは終了しています。

おおむね自力で、

七章第五回サンプル：見出しのリスト — JavaScript初級者から中級者になろう — uhyohyo.net

の問題が解けたので、それなりに理解は進んでいる、と感じています。
解答とは違っていて、こんな感じになりました。
一応、自分なりに考えて解いています。

index.html

<!doctype html>
<html>
  <head>
    <title>change-heading-to-list</title>
    <link rel="stylesheet" type="text/css" href="styles/design.css"></link>
  </head>
  <body>

    <h1>見出し1</h1>

    <h2>見出し1-1</h1>

    <h2>見出し1-2</h2>

    <h3>見出し1-2-1</h3>

    <h1>見出し2</h1>

    <h2>見出し2-1</h2>

    <h2>見出し2-2</h2>

    <script src="scripts/app.js" async></script>
  </body>
</html>

JavaScript(app.js)

//function definitions.
const createLi = function(text) {
    const li = document.createElement("li");
    li.textContent = text;
    return li;
}

//execution blocks.

const walker = document.createTreeWalker(
    document.body,
    NodeFilter.SHOW_ELEMENT,
    function(node) {
        if(/^H([1-6])$/.test(node.tagName)) {
            return NodeFilter.FILTER_ACCEPT;
        } else {
            return NodeFilter.FILTER_SKIP;
        }
    }
);

const doc = document.createDocumentFragment();

let node;
let ol = document.createElement("ol");
let level = 1;

doc.appendChild(ol);

while (node = walker.nextNode()) {
    // get level
    const result = node.tagName.match(/^H([1-6])$/);
    const itsnumber = parseInt(result[1]);
    const li = createLi(node.textContent);

    // change level
    if (level < itsnumber) {
        const newol = document.createElement("ol");
        ol.appendChild(newol);
        ol = newol;
    } else {
        while (level > itsnumber) {
            ol = ol.parentNode;
            level -= 1;
        }
    }

    ol.appendChild(li);

    //現在レベル設定
    level = itsnumber;
}

document.body.appendChild(doc);

正規表現部分だけは、答え見ました。

おわりに

今回は短いです。

勉強そのものは進んでいますよ、というお知らせみたいなものです。

これから勉強始めるよ、という方がいらしたら、一つの勉強のやり方と考えていただけたら幸いです。

正直、本を買ってやったほうが早いような気がしますし、Reactとかを習得したほうが早いような気はします。
古いやり方を知ることも、知識の肥やしにはなるので、今後も続けます。

ではまた。