t_hazawaの日記

株式投資とWebエンジニアリングのブログです。株式投資の目次は→です。 https://t-hazawa.hatenablog.com/entry/2021/02/12/220933

FlMML on HTML5 に Pull Request を出しました (iOSで再生ボタンを押すまで他アプリのバックグラウンド再生を止めなくする)

経緯・概要

FlMML on HTML5 とは

FlMML とは

FlMML on HTML5 とは

どのような 問題点について Pull Request を出したか

  • 先にissueで連絡を取り、1週間後にprを出しました。
  • github.com
  • iOS14.5で挙動に変更が入り、(flmml-on-html5 でも使用されている)AudioContext が生成されたタイミングで、他アプリのバックグラウンド再生が停止するようになりました。
    • その結果、flmml-on-html5 を組み込んだWebサイトを表示させただけで、他アプリのバックグラウンド再生が止まってしまっていました。
    • (flmml-on-html5 の再生ボタンを押した段階で、他アプリのバックグラウンド再生が止まって欲しい)

結果

どのような Pull Request を出したか

  • github.com
  • 「再生ボタンが押された段階で AudioContext を作る」という内容のPRです。
  • 結局、セレクタ周りは渡し方が難しかった(変更が大きくなりそうだった)ので、メンテナの方がちょうど2.0への大きな変更をされている所ということもあり、マージ後、メンテナの方に大きく手直し頂きました。

JavaScript中級者になろう 5章・6章を読んだ

前: JavaScript中級者になろう 3章・4章を読んだ - t_hazawaの日記

経緯

  • 私物AWSでRDSをLambdaで止めることに成功した
  • 息抜きかねて 5章 短ければ六章も
    • 短そうなので6章まで

概要

  • 知らないことが多くなってきた

第五章 CSSの操作

五章第一回 計算済みスタイル — JavaScript初級者から中級者になろう — uhyohyo.net

五章第一回 計算済みスタイル

  • 計算済みスタイル
  • var style = document.defaultView.getComputedStyle(p, null);

  •  console.log(style.backgroundColor);
    
  • document.defaultViewは、見ての通り、documentが持つdefaultviewプロパティです。これは、現在のドキュメントに対応するwindowオブジェクトというものを取得します

  • なぞだったwindowオブジェクト
  • getComputedStyleによって取得したスタイルは、HTMLElementのstyleとは違い、書き換えできません。

  • 擬似要素はcssの用語で、例えば::first-letterのようなものです。

  • 似た形でも、:hoverや:visitedなどは擬似クラスと呼ばれ、擬似要素ではないのでこの方法は使えません。擬似クラスはコロンが1つ、擬似要素はコロンが2つという違いがありますので気をつけましょう。ただし、歴史的経緯により、擬似要素でもコロン1つで書かれることがあります(:first-letterなど)

  • 実は、もうひとつdomにもともと存在している変数としてwindowがあります

  • 上でdocument.defaultViewと書いていたのはwindowと書いても構いません。

  • windowは実はグローバルオブジェクトです。グローバルオブジェクトというのは特殊なオブジェクトで、グローバル変数は実はグローバルオブジェクトのプロパティである

  • var str = "foo"; console.log(window.str); // "foo"

  • 実はwindow.getComputedStyleは単にgetComputedStyleのようにグローバル変数として扱っても利用できます

  • 結局のところ、document.defaultView.getComputedStyleは単にgetComputedStyleと書くことができます。ただ、windowをグローバル変数として扱うのは分かりにくいしバグの元なので、なるべくやらないようにしましょう。

五章第二回 CSSの構造

五章第二回 CSSの構造 — JavaScript初級者から中級者になろう — uhyohyo.net

  • CSSStyleSheetは、CSSそのもの

  • link要素を使って外部のCSSを読み込んだ場合も、そのlink要素についてCSSStyleSheetがつくられます。

  • document.styleSheets
  • <style> 要素ごとにできそう
  •   var style = document.getElementById('mysheet');
    console.log(style.sheet); 
    
  • sheet.disabled = true;

  • スタイルシートをまるごと無効にできる
  • ownerNode で、どのstyle要素やlink要素かをとれるらしい
  • ここのCSSルールは セレクタごとに CSSRule というオブジェクトになる
  • CSSStyleSheet.cssRules[0].cssText
  • cssTextは読み取り専用です

  • {} は CSSStyleRule
  • .selectorText は変更可能
  • .style は CSSStyleDeclaration 変更可能
  • また今回は省略しましたが、実は第三引数を指定することが可能です。 の前まで 2021/10/18 1:13 30m
  • .getPropertyValue()
  • .removeProperty()
  • {} 以外でのスタイルシートの指定
  • @charset "utf-8"; とか
  • @import "style.css";

五章第三回 CSSの操作

五章第三回 CSSの操作 — JavaScript初級者から中級者になろう — uhyohyo.net

  • cssでは、このように重複する指定があった場合、後ろにあるほうが優先されます。 (セレクタとかで同順位だったら)

第六章 XMLXHTML

六章第一回 XMLXHTMLとは

六章第一回 XML・XHTMLとは — JavaScript初級者から中級者になろう — uhyohyo.net

  • svgという画像フォーマットがありますが、その中身はxmlファイルです

  • DOMでは、HTMLだけでなくXMLも扱えます

  • いままでの関数はみな XMLでも使える 
  • xmlDocument.documentElement;
  • ルート要素を得る
  • もともとhtmlはxmlとは似ていても少し違うものでしたが、そこで、htmlをxml文書の一種として書けるようにしたものを作り ました。 それがxhtmlです。(普及せず)

  • html5 に負けた xhtml
  • 要素名や属性名は小文字 (xhtml)
  • xmlが大文字と小文字を区別するからこのようなことになっています。

  • HTMLでは <ul> <li>あああ <li>いいい <li>ううう </ul>
  • も実は可能 (閉じタグなし)
  • <img> も閉じないといけない xhtml
  • <img ... /> でよい
  • XHTMLは廃れましたが、これの影響を受けてHTMLなのに
    のように書かれているサイトがたまに見られます。HTMLではこのような記法をする必要はありませんが、一応許容されています。 - なるほど

  • script要素の中身の全体が<![CDATA[ ? ]]>で囲まれています。これで囲んだ部分はCDATAセクションといって、style要素やscript要素の中身は普通これにします(絶対というわけではありませんが)。

  • CDATAセクションの中では特別な意味を持つ文字も記述できることになっています。つまり、< >などはタグを記述するのに使われる記号だから、普通< >のように書く必要がありますが、CDATAセクションの中ではこれらはそのまま書くことが出来ます。

六章第二回 名前空間

六章第二回 名前空間 — JavaScript初級者から中級者になろう — uhyohyo.net

  • xmlns は xml name space だったのだなぁ
  • 同じabcdでも、aaaに属するそれとbbbに属するそれは異なる要素として扱われます。

  • "http://example.com/aaa"が名前空間です。aaa自体は名前空間接頭辞

  • そのurlが表すインターネット上のページなどが存在しなくても構いません (重複する可能性が低いからURI名前空間として使ってるだけ)

  • この文書全体は何らかの別のフォーマットに従っているはずです。しかし「ユーザーリスト」の部分はそれとは独立した別のフォーマットを利用しているので、これらは区別したくなります。ここで出てくるのが名前空間です。

  • 実際に自分で名前空間を作ることは少ないでしょう。実際には、XHTMLSVGなど既存のフォーマットにはちゃんと名前空間が定義されていますから、それをちゃんと扱えるようになることが名前空間を学ぶ大きな意義です。

  • デフォルト名前空間というものがあります。それはつまり、名前空間接頭辞の無いタグがどの名前空間に属するか

  • xmlnsも無い場合は、「名前空間が無い」という扱いになります。

  • xhtmlは決まった名前空間に属することになっています。その名前空間は、http://www.w3.org/1999/xhtmlです

  • XHTML以外の自分が勝手に作った要素をブラウザは当然知りませんから、そこにそういうタグがあってそういう構造をしていることは認識できても、それがどういう意味なのかは分かってくれません。だから、気を利かせてリストっぽく描画してくれたりはしません。描画をいい感じにするにはやはりCSSを使います。実はCSSでも名前空間を扱うことができますので、気になる人は調べてみましょう。

六章第三回 XMLとDOM

六章第三回 XMLとDOM — JavaScript初級者から中級者になろう — uhyohyo.net

  • tagNameには名前空間接頭辞も含んだタグ名が入っている

  • このように名前空間接頭辞も含んだタグ名は「qualified name」の略で「qname」とよばれます

  • 同じ名前空間でも名前空間接頭辞は人によって違う可能性があり、名前空間接頭辞の情報はあまり役に立ちません

  • .prefix .localName .namespaceURI (書き換え不可)
  • tagnameなども書き換えられない

  • document.createElementNS("http://www.w3.org/1999/xhtml", "xhtml:p"); 引数も2つに増えていて、1つめが名前空間URI、2つめが接頭辞つきのタグ名(QName)です。

  • テキストノードは特に名前空間に属したりはしないので、特に変わりません。

  • 名前空間を含む文書で普通のcreateelementを使用した場合、名前空間に属しません。ただし、xhtml文書の場合は親切にも自動で"http://www.w3.org/1999/xhtml"に設定してくれます

  • document.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "a")

  • 普通のgetElementsByTagNameの場合、指定するのはQNameです。名前空間は関係なく指定されたQNameを持つ要素が列挙されます。

  • ちなみに、getElementsByTagNameNSの第一引数に"*"を指定すると、全ての名前空間から探すことができます。i

  • 属性も名前空間を持ちます。

  • タグ名に接頭辞がつかない場合はデフォルト名前空間に属することになっていましたが、属性の場合はそのような名前空間に属しません。

  • 属性に接頭辞をつけた場合、その属性はグローバル属性というものになります。この属性は、「要素から独立している」のだそうです。一応要素とくっついていますが、要素に属しているというわけではないらしいです

  • xhtmlで書かれた文書に何か独自の情報を追加したいとき、このように別の名前空間の属性を要素の属性としてくっつけておくことができます。

  • getAttributeNS, setAttributeNS
  • getAttributeNSではローカル名だった第二引数が、setAttributeNSではQName(接頭辞も含む名前)になっている

感想

  • 知らないことがたくさんあった

時間まとめ

  • 2021/10/18にはじめた
  • 2021/10/20 におわった
  • 30 + 29+ 30 + 3 + 14(ブログ) = 106分
  • 累計: 582分

次: JavaScript中級者になろう 7章・8章を読んだ - t_hazawaの日記

VALORANT-1

経緯・目的

  • ある程度強くなりたい

概要

  • 2021/10/3 から始めた
  • 最初デスマッチで8位くらいに割となれるようにした
  • スパイクラッシュやってる
    • チーム内3,4位くらいにはなるようになった

方法

  • 気づいたことを毎回書いていけるといいなと思って書いていってる

デスマッチ編

全体編

戦績編

  • 〇バインド町でのファントムは自分と相性いいね 遭遇戦は得意 6位 23-29-10
  • 〇BREEZE浜 ヴァンダル 9い 17-27-8 ヘッドショット結構取れるようになってきた感 
    • BREEZE浜は遠距離だから想定ヘッドライン低い問題起こりにくいね
  • 〇中距離戦が多いアセント町は得意なようだなう(2021/10/11 03:57:09)
  • 〇街中で7位。中距離戦だとファントムで慣れてきたね
    • でも、本線では長距離がおおいようななう(2021/10/10 02:32:56)

武器編

ファントム編

  • 全部ファントムの方が強いのではなう(2021/10/12 01:17:44)
  • ファントムの場合、打ち始めてから左下にマウスを引くと上手く当たりそうなう(2021/10/09 20:25:28)
  • ファントムは上にリコイルするので、最初に胴体の真ん中…いや首らへん??なう(2021/10/07 19:34:42)
    • まあ遠くだと胴体真ん中、近くだと頭かななう(2021/10/07 19:35:00)(まだ不明)

ヴァンダル編

  • 反動が強いヴァンダるよりファントムがいいか
  • ヴァンダるはヘッドショット専用でわいには無理 ファントムの動画みたいなう(2021/10/09 00:38:10)
  • ヴァンダル遠距離戦でもしゃがんだ方がよさそうだなう(2021/10/12 01:07:15)
  • ヴァンダル弾切れしやすいのでこまめにリロードしていこうなう(2021/10/11 22:12:10)
  • 特にヴァンダルの時は目線低いと良くないんだろうなあなう(2021/10/11 03:43:28)
  • ヴァンダルはしっかり頭を狙って1,2段目を当てないといけないのでは
    • ☆射撃場でbot撃ちなう(2021/10/11 03:21:15)
  • やっぱり遠距離戦ではヴァンダルでは?なう(2021/10/11 02:16:14)
  • 自分は遠距離苦手。遠距離戦ではヴァンダルがいいかもね。逆に中距離線ならファントムなう(2021/10/10 01:55:29)

オペレーター編

武器×マップ編

  • ラクチャーターザンロープはやっぱりヴァンダルでは
  • やっぱり、街中アセントファントムはそこそこいいね 8位 20-24-7なう(2021/10/12 02:31:34)
  • アイスボックスは意外と遭遇戦多い(のでファントム)
  • あの砂漠は意外とヴァンダルなのだろうなう(2021/10/11 03:47:41)

立ち回り編

  • マップみて、開けた所がないルート行った方がいいかも
    • なんなら、開けてないところを往復するといいかもなう(2021/10/11 02:48:13)
  • 遠くで遠くに行こうとしてる相手は撃って気づかせた方が時間節約になっていいかもねなう(2021/10/11 02:37:42)
  • マップのどこが行き止まりか(見なくていいか)事前にチェックしたいなう(2021/10/09 22:54:31)
  • 狙撃戦を回避すべきかも??なう(2021/10/09 03:59:21)

移動編

  • 1体2からは逃げる?なう(2021/10/09 03:57:35)
  • 隠れた所からすぐでていくのはよくないね 回り込んで出ようなう(2021/10/09 03:39:35)
  • よほど長距離でなければナイフに買えない方がいい 我慢して銃で走るなうあなう(2021/10/09 01:40:37)
  • 角の乗れるところに乗って出てくることで、ヘッドショットさせない敵強かったなう(2021/10/07 18:24:52)

敵の察知、敵の選び方

  • 目の前で誰か倒されて回復アイテムになったら、少し待つとそこに敵が来ること多いなう(2021/10/12 01:26:53)
  • 時には立ち止まって音を聞いて敵のいる方向を察知するのが大事なうあなう(2021/10/11 03:12:49)
  • 〇音を聞いて警戒できるようになった 意識せず左か右かわかるようになった感 25 23 8位 4連続でこのくらいかな スパイクラッシュやってこ なう(2021/10/10 00:06:07)
  • 音を聞いて敵がどっちからくるか判別したいなう(2021/10/09 21:41:14)
  • 左か右か迷った時には音に頼ろうなう(2021/10/08 22:42:21)
  • 近くに敵がいると音でわかる。近くの敵は自分を倒す力が強いので、近くの敵を優先しよう。
  • 遠くの見えててこっちに気づいてない敵より、近くの音だけ聞こえる敵に対処するのがよい(遠くを選んでも倒す前に近くの敵に倒されるから)

クリアリング編

  • 見る方向、2方向あったら、決め打ちせずにもう一方もチラ見するのがよさそうなう(2021/10/08 00:23:39)
    • その時、視界の端に捉えるのがいいね、完全にそっち見るのではなくなう(2021/10/08 02:20:02) 行こうとしてるのが本命なので
  • 後ろからはあまりこないので後ろ振り返らないのが、前方からきた敵に対処できそうでよさそうなう(2021/10/08 00:24:02)

ピーク編

打ち方編

エイム・プリエイム編

  • 他の相手と交戦してる相手は、じっくり頭を狙うといいと思うなう(2021/10/11 01:51:30)
  • 想定ヘッドラインが低めなので気持ち高めになう(2021/10/11 01:30:03)
  • 頭を狙わないといけないね(ヴァンダる)なう(2021/10/11 01:01:11)
  • 撃ち合い時に相手がしゃがんだらマウス下にやって頭追従できると強いなう(2021/10/11 00:44:05)
  • 敵に交戦中にしゃがんで回避された時に、マウスを下に動かして敵の頭を追従できるといいね 8位 22-28
  • 〇頭を狙うようにして4位 32 23
  • もっと上、胴体でなく頭を狙わないとなあ
    • 先に胴体には当てるが頭に当てられて負けるパターン多いなうあなう(2021/10/09 22:20:21)
  • せってき時にレティクルで相手を狙うのでなく、主に左右移動で狙う。レティクルは微修正なう(2021/10/09 18:17:01)
  • ちゃんと頭が出てきそうなところにレティクルを合わせておこう

近距離打ち合い編

  • で、高さあってたら、左右移動で合わせて倒すなう(2021/10/11 01:30:21)
  • 撃ち合い時の横歩きは、相手が撃っていない方に歩かないといけないなう(2021/10/10 00:52:45)
  • 3位。結構、プリエイムから横歩きで、ちゃんと最後に揃えるで良かったかも あとチラ見とかよかったかも
    • せってき後の横歩き強い 回避になるなう(2021/10/09 19:59:40)
  • 前後左右に機動しながら撃ち合うといいかも(打つ時は止まる) 
    • 特に、後ろ浮きに進みながら敵に打ちながら敵を追い越すとよさそうなう(2021/10/09 03:14:44)
  • 撃ち合い中にしゃがむのよさそうなう(2021/10/08 02:45:53)
    • 狙撃もしゃがんでやるといい 反動が少なくなるのかななう(2021/10/08 02:46:11)
  • 打ち合いでは軽くというか少し横ステップするとよいなう(2021/10/08 02:05:38)
  • ちゃんと頭に合わせないと倒せない 近距離 体じゃ撃ち負けるよなう(2021/10/07 22:38:20)

狙撃編

  • 遠くの時は座って狙撃しないといけないなあなう(2021/10/09 19:00:16)
  • 撃ち合ってる時に狙撃モードに切り替えるのは、こっちが打たない時間ができるので良くないねなう(2021/10/09 02:48:06)
  • 遠距離狙撃ではしゃがもうかなう(2021/10/08 01:27:36)
  • 遠距離では狙撃モードでないと無理なう(2021/10/08 00:46:11)
  • 遠くで逃げようとしてる敵は頭をレティクルで追いかけるのでなく、相手の頭が行こうとしてるところを先回りして打つのがよさそうなう(2021/10/07 23:47:20)
  • 中距離で撃ち合ってる時に途中で狙撃モードにすると撃ち負けるなう(2021/10/07 22:38:40)
    • でも遠かったら狙撃モード大事なう(2021/10/08 00:33:57)

スパイクラッシュ編

成績編

  • 上位に入らなくても活躍できそう そーヴァやsageとかだと特に
  • チームの真ん中くらいになりたいかもなう(2021/10/10 00:42:33)
  • 夜は他の人が強すぎて5位というか最下位ばかりだなう(2021/10/15 01:58:58)
  • チーム内最下位はほぼなくなったなう(2021/10/14 00:22:27)

立ち回り編

  • まず武器がなにか見ようなう(2021/10/16 01:31:30)
  • 仲間について行って2vs1を作れるといいなう(2021/10/10 22:57:44)
  • ディフェンダーの時につっこむのはよくないな フェニックスのかべとかあったら後ろで待つのがよさそうなう(2021/10/10 22:56:24)
  • 攻撃側でスパイク設置忘れない すばやくやる

武器編

  • 色んな武器をデスマッチで使ってみようかな
  • オペレーターの練習してないので倒せなかったなう(2021/10/13 18:40:06)

戦闘時の立ち回り編

  • 自分に気づかず横に向かっていった敵は後ろから狙うべきだなあなう
  • スパイクラッシュでも頭を狙うべし
  • 思わぬ所から敵が出てくるから常に警戒しようなう(2021/10/12 23:42:24)

マップ編

  • 横歩きで箱に詰まるとよくない フラクチャー スポーンなう(2021/10/16 01:34:05)
  • ラクチャーでパラボナアンテナに真っ直ぐ歩いていくのは良くないのかなあなう(2021/10/15 22:29:41)
  • バインドのワープに後から入ったら待ち伏せされるなあなう(2021/10/15 00:08:08)
  • ラクチャーはキルジョイの方が強そう 守りに強いので 守りで見るところ多いので

キャラ編

ピック編

  • ソーヴァ他の人にピックされたらもくキャラ使えないとダメかもなう(2021/10/15 00:27:17)

マップ×キャラ 編

  • BREEZE浜はドローン活躍しにくいからソーヴァだめかな ブリムっぽい なう(2021/10/16 19:53:27) 敵と1vs1交換多かったのはまあよかったなう(2021/10/16 19:53:57) チーム内3位 3-5-0
  • 〇BREEZE浜でうまいことスモークできてよかった ブリムストーン チーム内4位 1-2-4なう(2021/10/16 16:40:56)設置もできたね
  • 今の自分のソーヴァは全然いい所がなかったなあなう(2021/10/15 01:24:55)
    • あの街中(バインド?)ではソーヴァ微妙? なんか戦力が分断されてたような?

ブリム編

  • 攻めの時のスモークは目の前が一本道なら遠くに貼ればいいのかな なう(2021/10/16 18:48:34)
  • 〇ブリムで上手いことスモークできたヘイブン? 4-2-0でもチーム内4位 スティムもおけた グレネードはなしなう(2021/10/16 01:54:40)
  • 〇ブリンストーン初めてで、0-5-3だけど、スモークよくできた感あるなう(2021/10/15 21:58:42)

ソーヴァ編

  • ソーヴァの打ち合いでult使えてたら良かったなう(2021/10/16 17:39:06)
  • ソーヴァのultも忘れがち 敵アタッカー煙幕で守ってるところにブッパすべしなう(2021/10/16 01:17:32)
  • 武器がオペレーターなのを見てなかったのでリコン打とうと前に出たら打たれたなう(2021/10/15 23:38:40)
  • ジェットのスモークは短すぎるので、中からドローン飛ばしちゃダメだなあ
  • ドローンでzキーのピンで仲間に教えようなう(2021/10/14 02:33:41)
  • リコンやドローンで見つけてultできると強いらしいなう(2021/10/14 02:28:42)
  • ソーヴァのultの連打も忘れがちなう(2021/10/14 02:22:36)
  • 〇アイスボックス ソーヴァ チーム内3位 まあリコンとかドローンはできてたかも 2-6-1 でもkdわるいなう(2021/10/13 22:48:26)
  • リコンボルト撃っててもあまり信頼できないから裏からくるの警戒しようなう(2021/10/13 12:55:45)
  • ゲートの少し先に防御側の敵いがちなのでリコンのために顔出すの危険なう(2021/10/13 00:25:50)
  • リコンボルトを変にバウンスさせると戻ってきてしまうなう(2021/10/12 23:49:30)
  • ソーヴァでディフェンダー、リコンで敵見つけて足止めできるし なかなかよかった 2-4-2 
    • あとjet -94 とは伝えられたけど b とも書けばよかったなう(2021/10/10 23:25:57)

キルジョイ編

  • キルジョイで仲間がスパイク設置したら走っていってult出来て良かったなう
  • やっぱりセントリーは欲張らずに手前気味で置いた方がいいね 敵に打たれなくてなう(2021/10/15 01:34:54)
  • ずっとBに来てたけどタレットとか壊されてAだったらAって伝えてA行けばよかったなう(2021/10/15 00:23:59)
  • アイスボックスの攻めで中央タレット置きで前に出過ぎて打たれる(控えめにすべき)なう(2021/10/14 01:52:17)
  • やはりキルジョイだとそこそこタレットでダメージ与えられるなう(2021/10/14 01:52:33)
  • キルジョイのult使い忘れないなう(2021/10/14 01:32:00)
  • 〇アタッカーでは全然ダメだったけど、防御フラクチャーでキルジョイ警戒しまくれてよかったなう(2021/10/14 00:25:47) ちゃんとタレットとアラームbotおけた グレネードはむずかしい
    • あと、見つけた敵をzキーのピンで教えれてよかったなう(2021/10/14 00:31:58)
  • 攻めのセントリーの置き方は難しいなあ調べたいなう(2021/10/13 22:35:38)
  • △キルジョイ ヘイブン 攻めから1-4-2 でもチーム内2位 セントリーが稼いだ感なう(2021/10/13 22:29:57)
  • Mid turret attacked とかいえるといい なう(2021/10/13 18:43:28)
    • 単に Mid とかがいい2021/10/17 1:30
  • キルジョイのグレネードを仲間の突っ込むところで起爆させて良くなかったなう(2021/10/13 01:00:10)
  • 〇BREEZE浜 キルジョイ 初めてk上回ったかも セントリーよく置けた グレネード上手くかべうこうに投げた 2-1-1 なう(2021/10/13 00:16:30)
    • あと初めてチーム内4位かななう(2021/10/13 00:18:35)
  • 意外に防御側は始まる前に前に来れるんだなあ(セントリー設置しようと駆け出して狙撃された)なう(2021/10/12 23:57:20)
  • 〇いまのキルジョイでは解除とかセントリーピークとか出来て良かった 2-3-1なう(2021/10/10 22:56:52)

レイズ編

  • なんか赤いグレネードって2回爆発するの?なう(2021/10/13 22:45:24)スカイ? あのオレンジの人?

セージ編

  • アタッカーの時にsageのスロウ床を開いた先に置くと味方の邪魔になってよくないなあなう(2021/10/10 21:40:35)

反面教師編

  • ↓こういうのはよくないらしい
    • エントリーしないジェット、レイズ サイトを守りきれない、裏警戒しない、エリアコントロールをしないキルジョイ、サイファー キルができないフェニックス、レイナ 情報を取らない、犬とドローンを回さないスカイ、ソーヴァ まともなモクを焚かない突撃コントローラー面々 これが生息してるもんなぁ…

AWS Lambda で RDSを止めた

前: RDSを自動で止めたいのでAWS Lambdaを学ぶ - t_hazawaの日記

経緯

  • 手間を節約したい
  • この前学んだ
  • 今回実践 (私物AWS)

復習

やること

  • 復習
  • RDSつくり
  • Lambda用意
  • Lambda テスト
  • CloudWatch 設定

RDSつくり

  • つくった
  • 業務の方に合わせて、 Aurora MySQL にした

Lambda 用意

謎だった Lambda Layersについて

  • 最新のsdkや、複数のlambda関数で使用する共有ロジックを「レイヤー」として外出しして配置し、本来の目的のみlambda関数で実装することができるようになりました。

  • 共有ロジックがレイヤーらしい。 2021/10/15 18:45 6m
    • なんかAWSって AppSync (GraphQLでデータをだしいれするやつ) もだけど、命名が微妙な漢字がする

権限をちゃんとやる

cron編

  • スケジュール式の ? がわからないので調べる
  • ルールのスケジュール式 - Amazon CloudWatch Events
  • 注記。。イベントを管理するには、amazon eventbridgeが好ましい方法です。cloudwatch eventsとeventbridgeは同じ基盤となるサービスとapiですが、eventbridgeはより多くの機能を提供します。

  • [*]を日および曜日フィールドの両方に使用することはできません。一方に使用する場合は、もう一方に[?]を使用する必要があります。?(疑問符)ワイルドカードは任意を意味します。

  • スケジュール式: cron(0 * ? * * *) にしたら、ちゃんと00分すぎに停止になった

できたLambda のコード

  • ↑のリンク先のを参考にして、必要なところだけにして整えた
  • (Python 3.6)
import boto3 
import time
import os
from botocore.client import ClientError

client = boto3.client('rds', os.environ['AWS_REGION'])
 
# RDSクラスター一覧 
rds_cluster_ids = [ 
    'database-1'
    ] 
 
def lambda_handler(event, context): 
    rds = boto3.client('rds') 
 
    # リストの要素が0の場合は終了 
    if len(rds_cluster_ids) == 0: 
        print('対象RDSクラスターがありません。') 
    else: 
        for i in rds_cluster_ids: 
            _stop_db_cluster(db_cluster_identifier=i)
            print('RDSクラスターを停止しました。:' + str(i)) 
                 
    return 'RDSインスタンスの停止処理を完了しています。'
    
# クラスターを停止する関数
def _stop_db_cluster(db_cluster_identifier):
    # 3回挑戦
    for i in range(1, 3):
        return client.stop_db_cluster(
            DBClusterIdentifier=db_cluster_identifier
        )
        time.sleep(1)
    raise Exception('Cannot stop rds db cluster: , ' + db_cluster_identifier)

  • 業務の方のRDSでもやってく

時間まとめ

  • 2021/10/14 にはじめた
  • 2021/10/16 18:06 おわり
  • 30 + 34 + 17 + 10(ブログ) = 91分

実施結果

  • 業務の方でもできたら、ここに結果を書く

JavaScript中級者になろう 3章・4章を読んだ

経緯

  • AWS Lambda の勉強をしてたが、息抜きにJS中級者の3,4章を読んだ

3章 イベント

三章第一回 イベントプロパティ

三章第一回 イベントプロパティ — JavaScript初級者から中級者になろう — uhyohyo.net

  • 例えばimg要素につけた場合その画像の読み込み完了を意味します。

  • ノードをそっくりコピーしてしまうはずのcloneNodeでも、イベントプロパティはコピーされないのです。

三章第二回 イベントリスナ

三章第二回 イベントリスナ — JavaScript初級者から中級者になろう — uhyohyo.net

  • addEventListener() がオススメの方法
  • 3爪の引数はフェーズ とりあえず false
  • 複数イベント登録できる

  • removeEventListener() の第2引数では、addと同一のオブジェクトじゃないとダメ
  • 三章はみじかいなぁ

三章第三回 イベントバブリング

三章第三回 イベントバブリング — JavaScript初級者から中級者になろう — uhyohyo.net

  • DOMのイベントシステムの中でも面白いところなので、ぜひマスターしてください。

  • あ、↓から処理される、ってやつね
  • 実際に見てみるとわかるように、bodyの領域というのは画面全体ではありません。body要素にイベントを設定する際に罠となることもありますから、注意してください。

  • 実際にクリックされたのはテキストですが、イベントが発生するのはそこの要素であるということになっています。テキストノードではイベントは発生しません。

三章第四回 イベントキャプチャリング

三章第四回 イベントキャプチャリング — JavaScript初級者から中級者になろう — uhyohyo.net

  • addEventListener の第三引数
    • trueになってる
  • イベントキャプチャリングとは、イベントバブリングの前に、親要素から子要素に向けてイベントが伝わるというものです。

  • そういうものがあるとは知ってた (名前をオボえ手なかった)
  • イベントバブリング(下から)がデフォルトののようだ (イベント属性で設定するとバブリングなので)
    • 実際、デフォルトは false とのこと
  • イベントキャプチャリングのフェイズで処理されるものが先
  • キャプチャリングフェーズ、ターゲットフェーズ、バブリングフェーズ
  • 全部合わせてイベントフロー

三章第五回 イベントオブジェクト

三章第五回 イベントオブジェクト — JavaScript初級者から中級者になろう — uhyohyo.net

  • 実は、イベントが発生したときはイベントオブジェクトを通してイベントの様々な情報を得ることができます。

  • イベントリスナの第一引数にわたされる
  • html要素のイベント属性(例えばonclick)を利用する場合もイベントオブジェクトが利用可能です。この場合は次の例のように、「event」という変数にイベントオブジェクトが自動的に代入されている

  • currentTargetプロパティはそのイベントリスナが登録されている要素

  • ev.targetは、実際にイベントが起きた要素(のhtmlelement)

  • このように、親要素にひとつだけイベントを登録して、そこからtargetなどを利用して処理する方法は、とてもよく使われます。

  • head要素中に記述されたスクリプトでdocument.bodyを参照できない (htmlは上から読みこまれるので、head要素の中身が読まれている時点ではまだbody要素は読みこまれておらず、したがってdocument.bodyは存在しないことになります。

  • ルート要素といい、documentが持つdocumentElementプロパティで取得できます

  • console.log(document.documentElement);
  • document.documentElement.parentNode は document
  • ちなみに、document.parentNodeを表示するとnullなので、documentが正真正銘の木構造の一番上です。

  • ページ全体でイベントを拾いたい場合、documentにイベントを登録することがよく行われます

  • イベントオブジェクトは、プロパティの他にメソッドも持っています

  • preventDefault
    • これはよく使う
  • javascriptのイベントのほうがデフォルトアクションより先に実行されます

  • stopPropagation
    • これも使う
  • 一応紹介しましたが、このメソッドは滅多に必要になることはないでしょう。イベントフローを止めるということはまったく別の場所で登録されたイベントハンドラが実行されなくなるかもしれないということであり、明らかにバグの元です。百害あっても一利くらいしかありません。 - 使わない方がいいらしい

三章第六回 mouseoverとmouseout

三章第六回 mouseoverとmouseout — JavaScript初級者から中級者になろう — uhyohyo.net

  • ある部分にマウスが移動するとなにかが動くというような動作は、今でこそcssを用いて作られることが多いですが、一昔前はjavascriptのこれらのイベントを使って実装されていました。現在でも複雑なことをしたければこれらのイベントにお世話になる機会があるでしょう。

  • マウスイベントを扱う場合はbody要素の領域はその直下の部分のみとなり、黄色い部分(p要素の部分)はbody要素の領域と見なされません。

  • 画面外(ブラウザの外)に行くとどうなるのだろう 2021/10/12 20:33
    • mouseoutだけが発生するような…?
  • mouseover/mouseoutイベントのイベントオブジェクトには、relatedTargetというプロパティが用意されています。

  • mouseoverイベントでは、マウスの移動先がtargetプロパティに入り、移動元がrelatedTargetプロパティに入ります

  • body要素だけでなくhtml要素が出現することがあるのに気づくと思います。実は、ページ上表示されている領域全てがbody要素ではありません。たまに罠になりますから気をつけましょう。

四章第一回 文字列の操作

四章第一回 文字列の操作 — JavaScript初級者から中級者になろう — uhyohyo.net

  • ここで、変数strに代入されている"abcde"は、プリミティブ値(一章第二回)です。プリミティブ値なら、オブジェクトではないのだから、プロパティを持たないはずです。。。それにもかかわらずプリミティブ値のプロパティを参照できているのにはまた特殊な事情があります。なかなか難しいので、今は解説しません(九章第七回に説明があります)。

  • javascriptにおける文字列はutf-16で符号化されています - 統一されててすごい

  • 文字列のlengthプロパティはコードユニットの数を数えます。 "吉野家".length は 4 ヨシが土吉だと これらの問題に対処するにはes2015の新しい機能を使う必要があります。

  • indexOf()
  • 無い時は -1
  • この節結構長い 2021/10/13 16:18 7m
  • str.slice(1,4) 開始位置と終了位置(再び含めなくする位置)
  • substring 全ブ小文字
  • substring と slice は基本同じ 負数を前者は0ニシテ、巧者は後ろから数える
  • 一番うしろは -1 (まえから数えるバア位は0だけど違う)
  • sliceの方がsubstringより人気
  • 第2引数省略すいと最後まで
  • charAt こっちはキャメルケース (使ったことある)
  • コードポイント好き \u28ff
  • \ud842\udfb7 ←コードユニット
  • es2015ではサロゲートペアではなくコードポイントを直接記述できる次のような記法が用意されています。。。"\u{20bb7}"==="??"。 ←コードポイント

四章第二回 正規表現

四章第二回 正規表現 — JavaScript初級者から中級者になろう — uhyohyo.net

  • 「.」の部分に当てはまる文字は、何でもよいのです(例外的に、改行文字だけはこれに当てはまりません)

  • s修飾子がいるんだよね 2021/10/13 16:39 17m
  • aからeは連続したアルファベットだから、次のように省略することができます。(連続というのは、正確には文字コードが連続しているということです。)。。a[a-e]c

  • javascriptでは、正規表現(検索条件)はオブジェクトの形で表現します。それが正規表現オブジェクト(regexpオブジェクト)です new RegExp("ab+c") -> この方法よりも正規表現リテラルを用いるほうが一般的です。それは、 /ab+c/

  • この節もかなりnagaいね 2021/10/13 16:43 20m
  • /bcd/はオブジェクトなので、当然次のように変数に入れて利用することもできます。var cond = /bcd/; var str = "abcde"; console.log(cond.test(str));

  • a(bc)。。のように、ひとまとめにしたい部分を( )で囲みます。また、(?: )で囲むこともできます。この2つの違いは次回紹介しますが、基本的には後者の(?: )を使います。

  • (?: ) でかこっていこう
  • ただし、\u1234のようなコードポイントを指定するエスケープシーケンスは、正規表現でも使うことができます

  • 先頭に^がついてます。実は、この文字はその位置が文字列の先頭であることを示します。(正規表現に複数行フラグがついている場合、行頭を表します。

  • \Sや\Dはたまに使います. - こういう使うひんど情報が書いてあると分かりやすいね

  • 面白いのは次のような使い方です。[\s\S] これは、「複数の文字のうちいずれか」を表す[ ? ]の中に\sと\Sが入った形です。このように、\sなどを[ ? ]に入れることが可能です。この場合、ちゃんと「\sまたは\S」という意味になります。

  • \sは空白で\Sは空白以外だから、2つ合わせると「全ての文字」という意味になります。全ての文字という意味の記号として.を紹介しましたが、[\s\S]は.よりも範囲が広いです。なぜなら、.は改行文字にマッチしませんが、[\s\S]は改行文字にもマッチするからです。(\sが改行文字にマッチするため。)これは逆の意味を持つ2つの記号なら何でもよく、[\d\D]などでも同じことができます。また、.が改行にマッチしないのを補えばいいので(?:.|\s)でもできます。ただ、よく使われるのは[\s\S]のような気がします。

四章第三回 正規表現2

四章第三回 正規表現2 — JavaScript初級者から中級者になろう — uhyohyo.net

  • testの場合とは逆で文字列のメソッドであり、引数に正規表現を指定します。つまり、文字列.match(正規表現)という形です

  • 結局のところ、グループ化に( )と(?: )の2種類があった理由は、前者はキャプチャするグループ、後者はキャプチャしないグループという使い分けのためです。キャプチャが目的でないグループ化には(?: )を使いましょう。

  • console.log("aaa1234bcd567efg8999h".match(/\d+/g))
  • Array(3) [ "1234", "567", "8999" ]
  • console.log("aaa1234bcd567efg8999h".match(/\d+/))
  • Array [ "1234" ]
    • なるほど 2021/10/13 19:53 39m
  • matchでgフラグを使う場合、キャプチャは行われなくなります。

  • 他にm、y、uがあります

  • https://programmer-life.work/javascript/regex-flags

  • m 複数行に渡る一致。先頭および終端を示す文字 (^ や $) が、複数の行で機能します

  • s ドットオール(dotall)。「.」が改行文字(\n)に一致します。

  • y 先頭固定(sticky)。対象文字列中の正規表現のlastIndex プロパティによって示された位置からのみマッチするようになります (それより後の位置からのマッチは試みません)。簡単に言えば調べる位置を指定したい時にyフラグを使います。e

  • u パターンを Unicode コードポイントの羅列として扱います (Binary 文字列も参照)。

  • また、$&とすると、これはマッチした部分の全体になります。つまり、今回の場合はグループ化を使わなくても同じことが次のようにできます。 "aaa数1234字bcd数567字efg数8999字h"となります。

  • ☆ $& 知らなかった
  • もう1つの方法は、replaceの第2引数に置き換え後の文字列ではなく関数を与える方法です。

  • 便利そう JSっぽい

よかったところ

  • $& がマッチしたところそれぞれと知れてよかった

時間まとめ

  • 2021/10/12 よみはじめ
  • 10/13 よみおわり
  • ブログ 15分、読むのに 1時間45分
    • まぁ一章あたり1時間くらい
  • そろそろ、知らないことだらけに鳴っていくんじゃないかなと思う (ここまではなんとなく知ってたことが多い)
  • 累計: 476分

次: JavaScript中級者になろう 5章・6章を読んだ - t_hazawaの日記

RDSを自動で止めたいのでAWS Lambdaを学ぶ

経緯・目的

  • 検証環境のRDSがある (たまにしか使わない)
  • RDSは停止しても7日間で勝手に起動する
  • Lambdaで止めるのがよくあるパターン。止めたい

AWS Lambda を学ぶ

AWS Lambda とは

AWS Lambda(イベント発生時にコードを実行)| AWS を読む

  • lambdaを使用すれば、実質どのようなタイプのアプリケーションやバックエンドサービスでも管理を必要とせずに実行できます。

  • サーバーレスの総本山
  • lambda関数をお気に入りの言語(node.js、python、go、javaなど)で記述 - うーん node か pythonだとは思うが…

  • インフラストラクチャのプロビジョニングや管理は必要ありません。

  • aws lambdaでは、消費したコンピューティング時間に対してのみ料金を支払う - エコ

  • 関数に適切なメモリサイズを選択することにより、コード実行時間を最適化できます i

  • プロビジョニングされた同時実行を有効にすることで、関数を初期化し、2桁のミリ秒以内に応答するようにハイパー対応できる - オーラバトラー

  • amazon s3を使用してaws lambdaをトリガーし、アップロードしたデータを直ちに処理することができます

  • リアルタイムストリーム処理。。aws lambdaとamazon kinesisを使用してリアルタイムのストリーミングデータを処理することで - リアルタイムストリームにも使える lambda ウェブアプリケーション。。デベロッパーは、aws lambdaをawsの他のサービスと組み合わせることで、スケールアップまたはスケールダウンを自動的に行う強力なウェブアプリケーションを構築し、複数のデータセンターにわたって可用性の高い設定で実行できます。 - ウェブアプリケーションにもつかえるらしい 2021/10/09 21:05 18m

  • サーバーレスアーキテクチャでは、bustleでインフラストラクチャを管理する必要は一切ないため、すべてのエンジニアは新しい機能の構築や新規開発に集中できます

チュートリアルしてみた

サーバーレスコードを実行する方法 – アマゾン ウェブ サービス (AWS)

  • 現在、java、node.js、c#、goまたはpythonのlambda関数コードを作成できます

  • やった

料金チェック

料金 - AWS Lambda |AWS

  • AWS が設計した Arm ベースのプロセッサアーキテクチャを使用する Graviton2 で実行される AWS Lambda 関数は、x86 プロセッサで実行される関数と比較して、最大 34% 優れた料金パフォーマンスを実現します。 - 4割パフォーマンスがよいみたい

  • Arm 料金 GB-秒あたり 0.0000133334USD リクエスト 100 万件あたり 0.20USD - ◎まぁ、無いも同然な料金 (一日に何回か起動停止をするだけなら)

AWS Amplify を話にデてきたので学ぶ

AWS Amplify - 静的ウェブホスティング - アマゾン ウェブ サービス

  • 静的配信らしい
  • 静的ウェブアプリケーションをグローバルにデプロイおよびホストするためのフルマネージドサービスを提供し、信頼性の高い Amazonコンテンツ配信ネットワークを介して、世界中に数百の POP (Point Of Presence) で配信

  • Amplify コンソールでアプリケーションのコードリポジトリを接続するだけで、コードコミットを行う度に、フロントエンドとバックエンドへの変更を単一のワークフローにデプロイします。

  • プルリクエストのプレビュー。本稼働に影響を与えずに新機能を扱います。プルリクエストから新しい環境を作成します

  • シングルクリックでamazon route53で管理されるカスタムドメインを設定し、無料のhttps証明書を受け取ります - 安全安心な証明書がもらえそう (Let's Encrypt が最近大変だった)

  • パスワードの保護。ユーザー名とパスワードを設定して、まだリリースされていない機能を内部関係者と共有します。

CloudFront との違いは?

Amplifyを使って完全サーバレスなWebアプリを作る|F Lab|Fixel株式会社

  • AWS Amplify は、Amazon CloudFront のグローバルエッジネットワークを活用して、ウェブアプリをグローバルに配信します

  • Amplify VS CloudFront ではなく、Amplify uses CloudFront だね。 Amplify は CloudFormation みたいなものっぽい
  • awsのインフラ構築をすることが多いですが、今まではコツコツcloudformationのコードを書いていました。amplifyを使うと、コマンドラインでいくつか対話形式で選択・入力するだけで、コードを書くことなく、勝手にやってくれます。

  • ※実際は裏でcloudformationが動いています。 - AWS CloudFromationのラッパーだった

  • amplifyはreact、vue.js、angularに対応していますが、今回はフロント実装にvue.jsを採用しています

  • amplifyに関わらず、cloudfront+s3の構成は反映にかなり時間が掛かる事があるので、accessdeniedが発生する時は、1?2時間ぐらい待つ必要があるかもしれません

GraphQLも話にデてきたので学ぶ

GraphQLはRESTの置き換えではない|こんぴゅ|note

  • GraphQLはRESTの部分の開発がいらなくなるんだよね
  • restではurlがひとつのリソースを表すため、複数のリソースが必要な複雑な画面では複数回のapiリクエストが必要になる。

  • フィールド指定も得意な GraphQL
  • graphqlサーバはスキーマ定義に対応するデータを複数のデータソースから引っ張るわけだが、直接dbを叩いてもいいし、既存のrestful apiを内部的に叩いてもokである。

  • キャッシュ効率。graphqlは単一エンドポイントなので、httpのcache-controllのようなurlベースのキャッシュ機構やcdnでのキャッシュはそのままでは使えない - 不便そう

  • graphqlではリクエストが通れば200で返し、何かエラーが発生した時はエラーオブジェクトに内容が吐かれる

  • まず、"使う"方として、githubapi v4が肌感を掴むのによさそうだ

AppSync も話に出てきたので学ぶ

AWS AppSync(アプリデータをリアルタイムで保存、同期)| AWS

  • こんな名前だけど、 GraphQL 専用サービスみたい (わかりにくい)
  • GraphQLはRESTの部分の開発がいらなくなるんだよね(重要事項)
  • AWS サービス群の中で、モバイルの下にある AWS AppSync
    • モバイル用APIみたいな感じで使われることが多いからかな?
  • オフラインのクライアントを簡単に同期できるようにするクライアント側のデータストア - ちょっと気になる 2021/10/11 18:47 4m

  • マネージド型のgraphqlサブスクリプションにより、aws appsyncでは、数百万のクライアントに対しwebsocketsを介して、データの更新をリアルタイムでプッシュできます - すごそう 2021/10/11 18:48 5m graphql apiを、aws cliやコンソール、amplify cli、もしくはcloudformation経由で、数秒の内に作成することができます。 - 俺は GraphQLをCF経由で数秒の内で作成することが可能なんだよ (ドローデーモン先生)

  • X-Ray 知らない 2021/10/11 18:50 7m
  • まぁ GraphQLのものだとわかった
  • AppSync というのは、モバイルアプリケーションをデータと同期する、という意味だろう
    • まぁ名前を素直に解釈すると、 モバイルアプリケーション(スマホアプリ)を最新版に同期させるものっぽいけど

AWS lambda の学習に戻る

というか、ここまでいうなら、80ポートでアクセスしたら hello world いう web サーバ作ってみたい 2021/10/09 21:07 20m

モジュール 1 - AWS で基本的なウェブアプリケーションを構築する

  • このチュートリアルでやろうとしてるのは、
  • 80を受けるの Amplify で作ったもの (多分cloudfront)
  • lambdaはそこに動的処理を加える じゃん
    • まぁ、餅は持ちやだね
    • (80は CloudFrontで受けるべき)
  • まぁ、Lambda を使うと、動的部分や更新部分を サーバなしでできるよ、ってことで。 2021/10/11 19:07 11m

というかそのものズバリ RDS lambda 落とす とかで調べてみたい

EC2ならあった

Lambda を使用して、Amazon EC2 インスタンスを一定の間隔で停止および起動する

  • amazon cloudwatch events も使うの?
  • aws instance scheduler - ☆そういうのもあるのね

  • 4.スケジュールに合わせこの関数をトリガーするよう、cloudwatch eventsのルールを作成します - 実は CloudWatch Events がcronみたいなものなのか?

  • 3 STEP

  • (1)権限
  • (2)関数つくりとテスト
  • (3)cloudWatch Events ルール

  • [fixed rate of]に、分、時間、もしくは日の単位で時間間隔を入力します。[cron expression]に、lambdaにインスタンスを停止させる時刻を表すスケジュール式を入力します。 - ◎本当に CloudWatch Events でcronだった 2021/10/11 19:31 23m

  • 最後に激ナがcFn テンプレートがついていた(時代は CDK)

これかな (LambdaでRDSを落とす)

https://go-journey.club/archives/11747

  • これをそのままやればできそう 2021/10/11 19:36 27m

せっかくなのでこれも (Lambdaで RDSや EC2を落とす)

Vol.25 AWS DBマイグレーション時のコスト削減アプローチ:AWSで実践!DBマイグレーション時のRDS利用コスト削減|システムズのマイグレーションコラム|SYSTEM'S マイグレーション2.0

  • 移行先の開発環境の利用中においても、従量課金型サービスであれば、使用しない時間帯を設定することで、コスト削減につなげることができるようになります。i - ◎確かに 2021/10/11 19:38 (やりたいかもリストに載せた)

時間まとめ

  • 2021/10/10にはじめた
  • 2021/10/11 21:52におわった
  • 40+44+53 = 137分かかった
    • ↑の内、このブログにまとめるのに20分かかった

この後

こういう風にRDSを落としていきたい

  • ルールは、夜の間に落とす感じにしようか 2021/10/11 21:24
    • 使ってるときに落ちると嫌なので 2021/10/11 21:24

JavaScript中級者になろう 2章を読んだ

前: JavaScript中級者になろうの基礎編と第一章を読んだ - t_hazawaの日記

目的・経緯

  • JavaScript を避け続けてきたので、ちゃんと知りたい

反省

  • 速さを意識して読むようにしたい
    • 変換ミスもキにしないようにしたい

内容

2-1 HTMLの木構造

二章第一回 HTMLの木構造 — JavaScript初級者から中級者になろう — uhyohyo.net

  • console も オブジェクト
  • ブラウザはそれぞれコンソールというものを備えている

  • 親と子の概念を拡張して、「祖先」「子孫」「兄弟」といった言葉も使われます。

2-2 DOMとは

二章第二回 DOMとは — JavaScript初級者から中級者になろう — uhyohyo.net

  • 一番初歩的なのはdom level1という仕様書です。

  • domの仕様にもいくつかレベルがあるんだね
  • とても重要な元からある document オブジェクト
  • domのほとんどがここからはじまる

  • getElementById() で取れる要素とは、特殊なオブジェクト

  • 大体みんなオブジェクト
  • 文書(document)はほぼノードでできている
  • ノードは12種類(数種類しか使わない)
  • 要素を表すノードが HTMLElement 要素の種類により細分化される

二章第三回 基本的な操作とテキストノード

二章第三回 基本的な操作とテキストノード — JavaScript初級者から中級者になろう — uhyohyo.net

  • まとめて壊さずちゃんとひとつずつ外してひとつずつ付けたり、あるいは壊さずに書き換えたりすると、原始的ではない
  • そうそう、何のタグにも囲われてないところが謎だったんだけど、テキストノードというんだね #text "nakami" であらわす
  • 一般にhtml要素は小文字で書かれますが、tagNameが大文字なのは歴史的経緯によるものです。昔は要素名を大文字で書くのが普通でした。

  • p.childNodes は知らなかった
  • 配列ではない NodeList
  • NodeList.item(0) ノードをとれる
  • children.item(1).tagName という書き方もできて便利
  • children[1] という書き方もある NodeList
  • textnode.nodeValue というメソッドがあるテキストノード

二章第四回 木構造の操作:ノードの除去

二章第四回 木構造の操作:ノードの除去 — JavaScript初級者から中級者になろう — uhyohyo.net

  • removeChild これはしってる
  • ノードについてるメソッドとはしらんかった
  • p.removeChild(textnode); 引数が Node ですごい (何番目の要素かでも指定できそう)
  • 木構造から 除去したノードは、また別の場所で使ったりできる

  • しらんかった
  • 参照わたし (変更可能)だから、一度 var children = p.childNodes; すれば children[0] は次々に変わっていくんだね
    • 参照渡しのことは後でしらべた(JSには参照渡しはないらしい)
  • 子ノードぜんぶ除去メソッドないのか…

    var p = document.getElementById('aaaaa');
    var children = p.childNodes;
    
    while( p.hasChildNodes() ){
      p.removeChild( children.item(0) );
    }
    
  • 変更可能だから(?)、意外とカンタン

  • firstChild プロパティ 使うともっとカンタン

二章第五回 木構造の操作:ノードの追加 createElement

二章第五回 木構造の操作:ノードの追加 — JavaScript初級者から中級者になろう — uhyohyo.net

  • document.createElement('p')
  • scriptタグの中身もテキストノード (#text) なんだね
  • 改行があるだけでテキストノードが発生します(ただし、終了タグの前の改行はテキストノードにならないことになっています)。

  • document.body
  • テキストノードを持たせるには、当然作る必要があります。テキストノードは、先に紹介したcreateElementでは作れません。別のメソッドを使います。それは、createTextNodeです。これまた、documentが持つメソッドです。

  • append するまでは、htmlを頂点とする木構造とは別の木構造として存在している

二章第六回 木構造の操作:さまざまな機能

二章第六回 木構造の操作:さまざまな機能 — JavaScript初級者から中級者になろう — uhyohyo.net

  • NodeListの重要な特徴は、木構造の変化が反映されるという点です。つまり、getElementsByTagNameを呼び出してから木構造に追加された要素もNodeListに入るし、逆に木構造から除かれた要素はNodeListからも除かれます。

  • HTMLElementがみな持ってるプロパティ紹介のコーナー
  • getElementsByTagNameの特別な使い方として、タグ名の代わりに"*"を引数とすると、全ての要素を取得できます。

  • まぁ裏技っぽくてあんまよくなさそう
  • classNameプロパティは、その要素のclass属性を表示します。大抵のプロパティは属性名とそれを取得できるプロパティ名が同じですが、これは珍しく違うため注意が必要です。

二章第七回 木構造の操作:さまざまな機能2

二章第七回 木構造の操作:さまざまな機能2 — JavaScript初級者から中級者になろう — uhyohyo.net

  • previous/nextSibling プロパティで兄弟がとれる
  • 改行があると #text ができてしまうから、微妙に使いにくい
  • htmlを最小化(余計な空白や改行を全部取り除く)してから配信することも行われています。この場合、最小化の前後でテキストノードの有無が変わってしまいます

  • このような問題に対処できる便利なプロパティが、previousElementSiblingとnextElementSibling

  • 「ins要素」の画像検索結果。ins要素は文書に後から挿入・追記されたテキストを表します。 del要素は文書から削除されたテキストを表します。

  • var b=a; では参照わたしだから cloneNode()
  • あるノードは木構造中の1箇所にしか入れることができない。同じノードを複数箇所に配置するということはできない

参照渡しとの違い

JavaScriptに参照渡し/値渡しなど存在しない - Qiita

  • 過激にすることで生き残る必要がある、本当に次から次に消滅した技術がたくさんあるフロントエンド界隈
  • 結局あるのかないのか
  • オブジェクトは1つしかなくて、そのオブジェクトを変更したから、bで見ているオブジェクト(同じオブジェクト)のプロパティも変わる、ってことかな。
  • aやbの参照をかえなければ同じものをみたまま、ってこと
  • 最後の問題、解けたけど、やっぱり直感的ではない感じ

二章第八回 テーブルの操作

二章第八回 テーブルの操作 — JavaScript初級者から中級者になろう — uhyohyo.net

  • 謎のtbody がついにわかるぞ
  • tbodyという要素は省略可能であり、まったく書かなくても暗黙のうちに存在すると見なされるのです

  • table の中に tbody を書いてもよかったのね
  • thead と tfoot がある場合もあるらしい
  • tbody が補完されるせいで 木構造の操作によってテーブルの行を一元的に扱うのは難しいです。

  • そのため、テーブル操作用の HTMLTableElement がある
  • HTMLTableElement.rows は HTMLCollection (NodeListのそっくりさん)
  • HTMLTableRowElement もあるよ
  • HTMLTableRowElement.cells
  • table.insertRow(), newtr.insertCell
  • table.insertRow(-1) で最後に追加(便利)
    • table.insertRow() (最後に追加) は2017年時点では新しすぎて危険だったらしい
  • table.deleteRow(0);
  • tr.rowIndex 何番目かをtr自身は知っている
  • td.cellIndex

二章第九回 theadとtfoot

二章第九回 theadとtfoot — JavaScript初級者から中級者になろう — uhyohyo.net

  • 謎の存在 thead, tfoot
  • 確かにtable ってヘッダとフッタがあるね(?)
  • ヘッダはテーブルの最初にある行、フッタは最後にある行です。それぞれ何行でも(tr要素が何個あっても)構いません

  • table要素の子要素として記述できるのは、thead,tbody,tfootの他にもcaptionやcol,colgroupなどがあります

  • まず、thead,tfoot,tbodyのHTMLElementは、HTMLTableSectionElementと呼ばれます。insertRowとdeleteRowを持っています。

  • table.createTHeadとcreateTFoot
  • なんと、ない場合は作るけど、ない場合は取得になるメソッド
    • (イケてない時、過去のJS感ある)
    • PHPにもここまでのものはない
  • table.deleteTHead, TFoot
  • 既に無かった場合も特にエラーになることはなく、何も起きません

  • table.tBodies ← HTMLCollection が入ってる (tbody 要素の一覧)

二章第十回 img要素とその他

二章第十回 img要素とその他 — JavaScript初級者から中級者になろう — uhyohyo.net

  • HTMLImageElement
  • img要素のHTMLElementは、HTMLImageElementといいます。imgタグは、空要素であるため、開始タグしかなく、終了タグがありませんが、扱い方は変わりません。

  • img要素はhtmlで「画像」を表す要素であることはご存知のとおりですが、domにおいては、img要素は単に木構造に挿入して画像を表示するという用途の他に、「画像」を扱うためのオブジェクトとしての役割も持ちます。 例えば、javascriptからcanvas要素に対して画像を描画する場合、描画したい画像を持つimg要素を引数として渡します。

  • そのうち分かるだろう
  • titleや script 要素にある text プロパティ
  • その要素の子ノードのテキストノードの値と同じです。また、書き換えも可能です。

  • getAttribute, setAttribute だとどんな属性でも操作できて便利
  • ちゃんとそれぞれ専用のプロパティを使うようにしたほうが見通しもよくなりおすすめです。

  • そうなのね

二章第十一回 スタイルシートの操作

二章第十一回 スタイルシートの操作 — JavaScript初級者から中級者になろう — uhyohyo.net

  • javascriptでは、cssの変更がサポートされています

  • 個々の要素のスタイルを変えたかったら HTMLElement.style をいじりましょう
  • p.style.border = "10px solid black";
  • styleプロパティには borderプロパティがあるのね
  • ちなみに、"background-color"のような場合、"backgroundColor"のように、ハイフンを無くして、ハイフンの直後の文字を大文字にして書きます。

二章第十二回 フォームの操作

二章第十二回 フォームの操作 — JavaScript初級者から中級者になろう — uhyohyo.net

  • HTMLFormElement
  • document.forms (HTMLCollection)
  • HTMLCollectionには番号で要素を取得するほかに、名前で要素を取得する機能を持ちます

  • document.forms.namedItem("form1");
  • 名前というのは、id属性またはname属性のことです

  • めちゃくちゃな気がしてきた
  • これは確かに型が必要と思われると思った
  • document.forms["form1"]; document.forms.form1; でもOK

  • 実は、HTMLFormElementはelementsというプロパティを持っています

  • 気になるような書き方ができてすごい
  • これは、そのフォームが持つコントロールのHTMLCollectionです。コントロールとは、フォームの中にある操作出来るもののことで、select要素とか、input要素とか、textarea要素とか、button要素など

  • document.forms["フォーム名"].elements["エレメント名"].value みたいに使う

  • HTMLFormElementは、submitとresetという2つのメソッドを持っています

  • input type="submit", "reset"と同じ
  • reset はフォームをリセットする (知らなかった)
  • HTMLInputElement
  • input.form 所属するForm の HTMLFormElement
  • input.defaultValue でデフォルト値が取れる
  • disabledプロパティは、文字列ではなく、真偽値が入っています

  • HTMLInputElement.blur .focus .click メソッド
  • blur フォーカス外し
  • .readOnly プロパティ (属性名は readonly)
  • 入力ボックス.select() 入力された文字を全て選択状態にする
  • チェックボックスラジオボタンの両方に .checked プロパティがある
  • .defaultChecked もあるよ
  • HTMLTextAreaElement
  • HTMLButtonElement

二章第十三回 フォームの操作2

二章第十三回 フォームの操作2 — JavaScript初級者から中級者になろう — uhyohyo.net

  • 絶望のまさかのフォーム2
  • HTMLSelectElement
  • HTMLOptionsCollection
  • 実は、select要素の下にはoptionの他にoptgroupという要素がある可能性があります。

  • ☆☆☆知らなかった めちゃ便利だ optgroup 使おう
  • select.options にまとめてoptionが入ってる
  • 何も洗濯されてないと-1な selectedIndex
  • select.add(),remove()

二章第十四回 nullとundefined

二章第十四回 nullとundefined — JavaScript初級者から中級者になろう — uhyohyo.net

  • JSおなじみの null と undefined だ
  • nodelist.item(100)
  • とかで 100※の p要素を取ろうとしたら null
  • 戻りねが無い関数の戻りねは undefined ナンだね
  • undefined が無い言語だと null になりそう
  • return; でも undefinedになるとのこと
  • var x; もundefined
  • 実は、ifに渡すと偽になる値は限られています。0とNaN(これについて詳しくは第十一章第六回で説明します)、空文字列(つまり"")、false、null、undefined。

  • 実は、nullはリテラルであるのに対しundefinedは「undefinedが入った変数」です。

  • undefined = 5; は一応デキる (strictではできない)が
  • null = 5; は文法エラー
  • var undefined = 5; はスコープ内ならできるとのこと
  • void 0 でつねにundefined を取れる
  • void は常に undefined を返す演算子

時間まとめ

  • 2021/10/3 に始めた
  • 30 + 30+60+21+60+15 = 3時間35分かかっている
    • 14節と1Qiita なので、 1節あたり 14.3分 (ちょっと長いかな?)
  • 2021/10/09 01:00 頃に終わった
  • 累計: 356分

感想

  • テキストノードの存在を知れてよかった
  • ☆☆☆selectの中に使える optgroup 知れてよかった

次: JavaScript中級者になろう 3章・4章を読んだ - t_hazawaの日記