Node.textContent
と HTMLElement.innerText
の間の違いに混乱しないでください。名前は似ているようですが、重要な違いがあります。
組み込みキャンパスOJT開発記録#001
どうも、Shoreです。
組み込みキャンパスOJTというものに、受かってしまいました。なんてこった。
しかも、たぶんプログラミングができる人間だと思われてます。なんてこった。
導入
こちら、ハードウェアコースとソフトウェアコースに分かれて学習し、それを基に何かを開発するってやつです。私はソフトウェアコースで、春はWeb関係をやる感じ。
詳しくは次のページを見るとよさそう。
始まって1カ月ほどたちまして、実際に何を作るかを考え始める時期になり、昨日5/12に『よし、作ろう!』という案がある程度固まりました。その名も******!!
暫定メンバー(たぶん変わる)はなんと豪華、いなにわうどん氏とちゅるり氏!! どちらもWeb経験豊富だし拡張機能開発の経験あり!ガハハ勝ったな!
いなにわ「学習することが重要だし開発はShoreさんがやってね」
ちゅるり「俺はタスク管理やるわ」
いなにわ「じゃあUIやろうかな」
わたし 「……困ったらヘルプはお願いします」
というわけでコーディングは私がメインでやることに。不味いですね。
というのも、Webは授業で触ったくらいだし拡張機能もちょっと触って違うこと (Unity) を始めたので経験値が0。そしてC#以外まともに書いていない。
というわけで、急いで学習を開始します。幸い時間は潤沢(*要出典)なので行けるはず。まあ去年もこんな感じだったけど何とかなってたしいけるでしょう、うん。
このブログは何か
自分の学習進度を共有してヤベーやつらに間違っている学習をしてたら指摘してもらうために書いてます。
あとはこのごろかなり怠けてたので矯正するために晒しています。
5/13
とりあえず信用できるサイトを探してそれを参考にしながら練習をすることに。
Getting Started Guidesを触ろう
公式のチュートリアルを発見したのでそれをパクリ、コードを7割がた理解することに。
Run scripts on every page
コピペでとりあえず動くものはできたのでコードを理解するフェーズへ。
content.js の1行目から見慣れないものが出てきた……やってることはarticleを選択してるんだろうけど全部取ってるのか最初なのかわからない。
documentクラスの操作知っておかないと不味そうだからざ~っくりと調べておくことに。
まあなんかいろいろやれることは分かった。こまめに発見した都度参照することにしよう(これを全部覚えるのは無理)。
で、そのあとはarticleにいろいろしてるっぽいのでElementクラスのドキュメントもタブに開いておくことに。
うん?ElementにtextContentが書かれていないな?
と思ったら基底クラスに定義されていました。
Node: textContent プロパティ - Web API | MDN
ついでに注意事項として次のようなことが書かれている。
innerText との違い
innerHTML との違い
Element.innerHTML
は、その名が示すとおり HTML を返します。時に、innerHTML
を使用して要素内のテキストを受け取ったり書き込んだりすることがありますが、textContent
は値が HTML として解析されないので性能が良くなります。さらに、
textContent
を使用することで XSS 攻撃を防ぐことができます。
一瞬人間が読める、ということを考えるならinnerTextのほうが良いのでは?と思ったけどtextContentは基本不変っぽいからそっちのほうがよいってことかな。
他にもXSSというものについても書いてあり興味があったのでざっくりと読んだ。
Cross-site scripting (クロスサイトスクリプティング) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN
他は理解した気になれたのでOK
そしていなにわさんが作っていたコードを見てみると、なんとな~く何をしてるか理解できた、気がする。ヨシ!
Inject scripts into the active tab
Chrome Extensions Tutorial: Focus Mode - Chrome Developers
アーハイハイナルホドネー
JavaScriptのほうはなにやってるかは分かってる、と思うのでOK!
CSSが、何を言っているかま~ったくわからない!
ということでBard君に説明してもらいました。
非常にわかりやすい説明が、出てきた。けど前提知識がないのでちゃんとドキュメントを確認。
CSS セレクター - CSS: カスケーディングスタイルシート | MDN
ざっく~りとみてなんとな~~く理解。
拡張機能についての勉強もだけどCSSについてもちゃんとしないといけないなぁ……と感じた次第です。
Manage tabs
Manage tabs - Chrome Developers
Bard君を多用してメソッドの意味とかを随時調べながら実際に作った。やってることが割とUnityっぽい?から割とすらすら飲み込めた。
まあ分かった気に慣れたのでいいでしょう。うむ。
これ結構面白いことができそうだからもう少し触ってみることに。
お遊び開始
Manabaに対応させる
まあ単純に対応個所書き換えるだけですし簡単。
ドメイン名ごとにグループ分け
まあこれもドメインをキーにした辞書型使えば一瞬……
できない。なぜ?TypeError: Failed to construct 'URL': Invalid URLが出続けるぞ?
⌚数十分経過
permissionsの問題だったぜ……
というわけで完成
まあ初日の進捗としては……いいでしょう。
終わり
まあ今日はこんくらいで……
なんとな~くわかった?気がしないでもない?って感じなので自力で開発できそうかな?
これからも頑張ります。(明日はパーザー作るかもしれない)