t_hazawaの日記

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

JavaScript中級者になろう 9章を読んだ(オブジェクト志向)

Webエンジニアリング JavaScript

前回:

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

経緯

  • このサイトを読むのは楽しい

9章　オブジェクト志向

九章第一回　オブジェクト指向とは

九章第一回 オブジェクト指向とは — JavaScript初級者から中級者になろう — uhyohyo.net

  • プロトタイプチェーンで作られる場合(昔のやり方)と、クラスで作る場合(普通の場合)があるのが難しいポイントだなあ
  • new honyarara(); で、 honyarara 関数(コンストラクタ) を new演算子がyobidaす
  • new は新しいthis を作ってくれる　2021/11/03 17:49 10m

九章第二回　prototypeの活用

九章第二回 prototypeの活用 — JavaScript初級者から中級者になろう — uhyohyo.net

  • コンストラクタ利用、prototype 利用、 クラス利用の３種類があるのかな　多い

九章第三回　継承とは

九章第三回 継承とは — JavaScript初級者から中級者になろう — uhyohyo.net

  • function.apply()
  • function.call()
  • 前読んだけど忘れた
  • apply() this値指定カノう　引数列を配列で渡せる
    • 思い出した
  • 引数列は ES2015のspread operatorがお株を奪ったらしい
  • call は this, 引数1, 引数2,... とわたす
  • arguments　を使ってても　関数の定義業は funciton sum() で、引数が内容にみえるから、 spread operator がいけてそうだね

  • newの場合は関数呼び出しの()を省略できる

  • Dragon 作りのときに、Teki の プロトタイプしか使わないので、 Teki のインスタンスをつくって、それの teki.prototype を三章する、ってことみたい(?)　2021/11/03 18:57 24m

九章第四回　プロトタイプ指向

九章第四回 プロトタイプ指向 — JavaScript初級者から中級者になろう — uhyohyo.net

  • プロトタイプ指向ではprototypeも結局のところただのオブジェクトなので、自由に操作できます。

  • 変更自由
  • Rubyのようにメタプログラミング機能が発達している言語では、クラスベースでも、結構クラスを変更できるらしい

九章第五回　クロージャ

九章第五回 クロージャ — JavaScript初級者から中級者になろう — uhyohyo.net

  • スコープのこと　2021/11/09 18:41 8m
  • グローバルスコープ以外は、関数かブロックスコープによって作られるらしい
  • なんと aaa() {} のなかで var bbb= function() {} を作れるのだ
  • 他の言語で見ない　いや、無名関数ならみるけど…
  • 作った関数をグローバルに返しても、関数は生まれたスコープの範囲のものを使えるとのこと

  • クロージャは、ローカル変数に対する限定的なアクセスを提供する手段になる

  • この節からは初めて読むようだ　2021/11/09 18:55 16m
  • function MyDiv の中で無名関数を使うと、無名関数の中ではthisが無名関数のものになってしまうので、MyDivのthisには thisではアクセスできないよ (なんか parent.this みたいなのがありそうなきもする)
  • var t = this;
  • とすると、無名関数の中でも tにアクセスできるので、 t.nameにアクセスデキるようになる
  • function(e)({...}).bind(this) とすると、親のthisをfunction中にわたせる

九章第六回　ゲッタとセッタ

九章第六回 ゲッタとセッタ — JavaScript初級者から中級者になろう — uhyohyo.net

  • オブジェクトのプロパティを参照したり変更しようとするときに、関数を呼ぶというものです。このとき呼ばれる関数が、ゲッタやセッタです。
  • 単に単純に取得、変更だけのやつだけじゃないんだね　2021/11/09 19:29 27m
  • ゲッタセッタの作り方は複数あるらしい
  • get aaa(){ return 3; }, とかオブジェクトリテラルに書く
  • set aaa() {}
  • 同じプロパティの取得、設定なので、 aaa のところが同じになる
  • 必ず真偽値を返すプロパティにできたりできる
  • obj.defineGetter("a", function(){}); (めちゃ古い書き方)
  • defineProperty がナウい
  • 非標準だったので、 __で囲われている
  • 代入演算子は左を三章せず、→の価を返す
  • 無名関数によって、 _a に直接あクセスできなくするテクニック

九章第七回　プリミティブとオブジェクト(とてもnagai)

九章第七回 プリミティブとオブジェクト — JavaScript初級者から中級者になろう — uhyohyo.net

  • プリミティブも String,Number,Boolean というオブジェクトのインスタンスができる
    • プリミティブのプロパティを三章しようとしたときに
  • オブジェクトはイべてtrue
  • == で　null と true になるのは　null か undefined だけ
  • console.log(null==false)
  • false
  • falseはダメ　2021/11/09 19:58 47m
  • (null & defined) のグループは、これら以外の価とは==でtrueにならないとのこと。 0 や false や "" ともならないんだね
  • 真偽値とそれ以外を比べる場合、まず false が 0、trueが1に変換される
    • true == "3" は false。 true == "1" だけが true らしい
  • オブジェクトが 文字列と比較される場合、まずオブジェクトが文字列に変換される obj.toString() される
    • 数値ならvalueOf() 文字列でもtoString() が無いときに呼ばれる　逆も　でも Object.prototype にあるので普通はある
  • 本来、valueOf() は数値を返すメソッドではなく、自分自身を返すメソッドらしい　2021/11/10 17:17 10m
  • オブジェクトリテラル {} とか {toString: function(){ return "3"; }}

  • 実は==（と!=）はjavascriptプログラマ達からは嫌われており、実はあまり使われていません。そもそも、勝手に型を変換してしまうというのが直感的な挙動ではありませんね。

  • === だと、もちろん null === undefined も false
  • == null だけは、よく使われるとのこと
  • 左辺が undefined または nullのときだけ trueになる

  • 特に、undefinedとnullに共通する特徴は「プロパティを参照しようとするとエラーになる」ことなので、その場合を除外したい場合などにこの比較を用います

  • わかりみ
  • 文字列連結も +

  • どちらも文字列でない場合（すなわち数値、真偽値、null、undefinedの場合）、数値の加算となり両辺が数値に変換されます。 例えば、2+trueはtrueが1に変換されるので3です。"2"+trueの場合、trueは文字列に変換されるので"2true"になります。

  • 数値以外を数値に変換する手軽な方法として、「0を引く」というものがあります。 falseも0に変換されるので、falseを引いてもいいです。

  • (number)"3" とかないの？キャスト
  • falseはわかりにくそう　

  • こうすれば、一目見ただけでは何がしたいのか分かりません。コードを汚くするのに一役かってくれます。

  • NaNは、必ず数値へ変換しなければならないのに数値への変換は不可能という困った状況をなんとかするために存在します。 数値の演算の結果を数値で表せない場合にもnanとなります（例えば0/0など）nanを含む四則演算は全てnanになります。nanを含む比較演算の結果は必ずfalseとなります。

  • nan===nanですらfalseになります。nanはプログラム上ではnanと書くと取得できます。undefinedと同様、nanという変数にnanが入っています。

  • Number.NaN の方が推奨
  • isNaN , 100.isNaN
  • String(x)
  • Number(x)
  • Boolean(x)
  • で変換できる
  • 同盟のコンストラクタと関数がある

九章第八回　例外処理

九章第八回 例外処理 — JavaScript初級者から中級者になろう — uhyohyo.net

  • throw では Error オブジェクトを投げるといいぞ。
  • err.message がある err が throw されると、コンソールが Uncaught Error: エラーが発生しました。 みたたに表示してくれる
  • new Error("message"); でもいいぞ

感想

  • クロージャの用途(tにデータをとっておく)とか知らなかったなぁ　2021/11/09 19:03 22m

時間まとめ

  • 11/3, 9, 10 に 31+48+40 = 119分 で読んだ
  • ブログは 15分ほど
  • 累計: 851分

次: JavaScript中級者になろう 10章を読んだ(XPath) - t_hazawaの日記

JavaScript中級者になろう 7章・8章を読んだ

Webエンジニアリング

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

経緯

  • 業務RDSをlambda で止める資料を書いてる途中
  • 土日に社内ドキュメントシステム触るのは良くないのでJS中級者読む

第七章　さまざまな機能

七章第一回　複数のドキュメントを扱う

https://uhyohyo.net/javascript/7_1.html

  • iframe要素、すなわちインラインフレーム

  • 何の略化初めて知った

  • same origin policy オリジンが同じでないと読めないということは、例えばこのサイト上のページのjavascriptは他のオリジン（例えばhttps://google.co.jp）上のページは読めません。

  • iframeで読み込んだ文書も一つの文書だから、その文書に対応するdocumentがあります

  • iframeElement.contentDocument;

  • loadイベントをjavascriptから登録するときはwindowに登録するのがいいでしょう。

  • window.addEventListener('load', function(){

  • 今回loadイベントを待つ理由は、iframe要素がtest.htmlを読み込むのを待つためです

  • node.ownerDocument でどのdocumentに属してるかとれる

  • iframeの中から消えた理由は、ノードは1箇所にしか存在できないからです。既に木構造中に存在するノードが新しい場所にappendChildされた場合はこのように古い場所から移動してきます。

七章第二回　ノードどうしの位置関係を知る

https://uhyohyo.net/javascript/7_2.html

  • elem.compareDocumentPosition(anotherElem)
  • elem.DOCUMENT_POSITION_FOLLOWING
  • 4 を DOCUMENT_POSITION_FOLLOWING に変換してくれるものはないのかな (なさそう)
    • 表をみるしかないのかな

  • このように定義された順序付けを文書順とかtree orderと言います。

  • 4 + 16 で 20になることもあるよ
  • if (node.compareDocumentPosition(other) & node.DOCUMENT_POSITION_CONTAINED_BY) で、 contained_by か判定できる
  • 論理和は |
  • 排他的論理和は ^

  • ある値との排他的論理和ととった値があるとき、もう一度同じ値で排他的論理和をとると、もとの数値に戻ります。mnnとしたとき、mnn = mnn = m0 = mという性質によるものです。

  • javascriptである値を真偽値に変換するには、boolean(値)というようにboolean関数に渡せばよいです

  • 実は、a&&bの返り値はaかbかのどちらかです。具体的には、aを真偽値に変換してtrueならbを返し、falseならaを返します（aを真偽値に変換した結果を返すわけではないので注意してください） 3&&"foo"は"foo"となります。短絡実行

  • a||bはaを真偽値に変換してtrueならaを返し、falseならbを返します。短絡実行

七章第三回　条件を満たすノードを順番に処理する：TreeWalker

https://uhyohyo.net/javascript/7_3.html

  • TreeWalker
    • 初めてきいた

  • 木構造の上を移動しながら次々処理をしていく

  • document.createTreeWalker()

  • 1つめの引数は頂点ノード、2つめと3つめは条件 3つめの引数に指定するのは関数です。この関数はフィルター

  • NodeFilter.FILTER_ACCEPT, SKIP, REJECT
  • tw.previousNode,nextNode

  • var node; while( node = tw.nextNode() ){ node; //そのノードに対する何らかの処理 }

  • parentNode() は条件を満たす親、祖先ノードに移動します(近い方から順にためす)

  • previousSibling,nextSibling　兄弟ノード

七章第四回　ノードをまとめて扱う：DocumentFragment

https://uhyohyo.net/javascript/7_4.html

  • documentfragmentというものです。これは、題名の通り、複数のノードをまとめて扱うのに必要なものです。 これはノードの一種です　小型のdocumentのようなもの - 全く知らなかった

  • 3兄弟を抜き出した時の親がDocumentFragment 仮の親
  • document.createDocumentFragment();

  • DocumentFragmentを追加した場合、DocumentFragment自体は追加されず、DocumentFragmentの子ノードが直接追加される

  • documentfragmentに先にまとめて追加しておき（documentfragmentはdocumentとは独立した木構造だから追加しても画面を書き直す必要がありません）、最後にdocumentfragmentを追加すればいいのです。

  • 1つ1つ、ほんもののdocument にノードを追加するより、ブラウザ的に楽らしい　2021/10/30 15:58
    • なんか重要そう

  • HTML5ではtemplate要素の中身がDocumentFragmentにより表されています

七章第五回　サンプル：見出しのリスト

https://uhyohyo.net/javascript/7_5.html

  • .textContent

  • また、textContentプロパティに文字列を代入することができ、その場合その要素の子がテキストノード1つになります

七章第六回　サンプルの改良

https://uhyohyo.net/javascript/7_6.html

第八章　Range

八章第一回　Rangeとは

https://uhyohyo.net/javascript/8_1.html

  • また知らないものがきた

  • 『え』から『お』まで

  • ノードにまたがった範囲を表せるらしい　2021/10/30 17:03

  • オフセットは数値です。これは、最初の子ノードの前を0として、その次を1,その次を2,・・・と順番に番号をつけていったものです。

  • テキストノードだと、オフセットがどの文字の間か、テキストノード以外では、オフセットがどの子ノードの間かになるみたいだ(？)
  • document.createRange();
  • この Range を何に使うのかはこの後書いてあるのだろう

八章第二回　Rangeの機能

https://uhyohyo.net/javascript/8_2.html

  • range.deleteContents() 削除できる
  • range.cloneContents()
  • 親は DocumentFragments
  • range.extractContents() とってこれる
  • range.compareBoundaryPoints()
  • node.compareDocumentPosition()

  • range.toString() は、Rangeの範囲を全てテキストにして返すメソッドです。

八章第三回　Rangeの活用とSelection

https://uhyohyo.net/javascript/8_3.html

  • selection というものはよく使うらしい　ユーザーが選択した範囲を表すものです。
  • window.getSelection()
  • selection.getRangeAt(0);
  • 最初のRangeを取る

  • SelectionからRangeを除去する機能です。選択部分をSelectionから除去すると、実際に選択が解除されます。

  • selection.removeAllRanges()
  • document.addEventListener('selectionchange',function(ev){
  • range.surroundContents(newParentNode)
  • 新しいおやをいれてかこわせる

八章第四回　サンプルの改良

https://uhyohyo.net/javascript/8_4.html

  • range.compareBoundaryPoints() を活用してる
  • テキストノードにスタイルをつけるにはいちいち spanで囲わないといけなくて不便
  • range.startContainer.splitText(range.startOffset); テキストノードの分割方法
  • node.nodeType, TEXT_NODE, ELEMENT_NODE
  • textNode.splitText(3) テキストノードをわける

    • 返り値は、後ろに作られた新しいテキストノードです。

感想

  • 知らないことをしれてよかった
    • DocumentFragment は大事そう
  • なんかあんまり使わない機能のような気がしなくもない (後半の「新しいJS」の章に期待)

時間まとめ

  • 2021/10/23 に始める
    • 10/23, 24, 30(2回), 11/1 にやった 5日分
    • 120分程度(ブログ以外)
      • 1章1時間程度
    • ブログは15分くらいかな
  • 累計: 717分

次: JavaScript中級者になろう 9章を読んだ(オブジェクト志向) - t_hazawaの日記

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

プルリク履歴 Webエンジニアリング

経緯・概要

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章を読んだ

Webエンジニアリング

前: 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では、このように重複する指定があった場合、後ろにあるほうが優先されます。 (セレクタとかで同順位だったら)

第六章 XMLとXHTML

六章第一回　XML・XHTMLとは

六章第一回 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を名前空間として使ってるだけ)

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

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

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

  • 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を止めた

Webエンジニアリング

前: 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章を読んだ

Webエンジニアリング

経緯

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

3章 イベント

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

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

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

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

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

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

  • addEventListener() がオススメの方法
  • 3爪の引数はフェーズ とりあえず false

  • 複数イベント登録できる

  • removeEventListener() の第２引数では、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より人気
  • 第２引数省略すいと最後まで
  • 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の日記