組み込みキャンパスOJT開発記録#001

どうも、Shoreです。

組み込みキャンパスOJTというものに、受かってしまいました。なんてこった。

しかも、たぶんプログラミングができる人間だと思われてます。なんてこった。

導入

こちら、ハードウェアコースとソフトウェアコースに分かれて学習し、それを基に何かを開発するってやつです。私はソフトウェアコースで、春はWeb関係をやる感じ。

詳しくは次のページを見るとよさそう。

szk18.hatenadiary.jp

始まって1カ月ほどたちまして、実際に何を作るかを考え始める時期になり、昨日5/12に『よし、作ろう！』という案がある程度固まりました。その名も＊＊＊＊＊＊!!

暫定メンバー(たぶん変わる)はなんと豪華、いなにわうどん氏とちゅるり氏!! どちらもWeb経験豊富だし拡張機能開発の経験あり！ガハハ勝ったな！

いなにわ「学習することが重要だし開発はShoreさんがやってね」

ちゅるり「俺はタスク管理やるわ」

いなにわ「じゃあUIやろうかな」

わたし　「……困ったらヘルプはお願いします」

というわけでコーディングは私がメインでやることに。不味いですね。

というのも、Webは授業で触ったくらいだし拡張機能もちょっと触って違うこと (Unity) を始めたので経験値が0。そしてC#以外まともに書いていない。

というわけで、急いで学習を開始します。幸い時間は潤沢(*要出典)なので行けるはず。まあ去年もこんな感じだったけど何とかなってたしいけるでしょう、うん。

このブログは何か

自分の学習進度を共有してヤベーやつらに間違っている学習をしてたら指摘してもらうために書いてます。

あとはこのごろかなり怠けてたので矯正するために晒しています。

5/13

とりあえず信用できるサイトを探してそれを参考にしながら練習をすることに。

Getting Started Guidesを触ろう

公式のチュートリアルを発見したのでそれをパクリ、コードを7割がた理解することに。

Run scripts on every page

developer.chrome.com

コピペでとりあえず動くものはできたのでコードを理解するフェーズへ。

content.js の1行目から見慣れないものが出てきた……やってることはarticleを選択してるんだろうけど全部取ってるのか最初なのかわからない。

documentクラスの操作知っておかないと不味そうだからざ～っくりと調べておくことに。

Document - Web API | MDN

まあなんかいろいろやれることは分かった。こまめに発見した都度参照することにしよう(これを全部覚えるのは無理)。

で、そのあとはarticleにいろいろしてるっぽいのでElementクラスのドキュメントもタブに開いておくことに。

Element - Web API | MDN

うん？ElementにtextContentが書かれていないな？

と思ったら基底クラスに定義されていました。

Node: textContent プロパティ - Web API | MDN

ついでに注意事項として次のようなことが書かれている。

innerText との違い

Node.textContent と HTMLElement.innerText の間の違いに混乱しないでください。名前は似ているようですが、重要な違いがあります。

textContent は、<script> と <style> 要素を含む、すべての要素の中身を取得します。一方、innerText は「人間が読める」要素のみを示します。

textContent はノード内のすべての要素を返します。一方、innerText はスタイルを反映し、「非表示」の要素のテキストは返しません。

もっと言えば、innerText は CSS のスタイルを考慮するので、innerText の値を読み取ると最新の計算されたスタイルを保証するために再フローを起動します。（再フローは計算が重いので、可能であれば避けるべきです。）

innerHTML との違い

Element.innerHTML は、その名が示すとおり HTML を返します。時に、innerHTML を使用して要素内のテキストを受け取ったり書き込んだりすることがありますが、textContent は値が HTML として解析されないので性能が良くなります。

さらに、textContent を使用することで XSS 攻撃を防ぐことができます。