t_hazawaの日記

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

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

Webエンジニアリング

経緯・目的

  • 検証環境の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で返し、何かエラーが発生した時はエラーオブジェクトに内容が吐かれる

  • まず、"使う"方として、githubのapi 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章を読んだ

Webエンジニアリング

前: 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の日記

JavaScript中級者になろうの基礎編と第一章を読んだ

Webエンジニアリング

経緯・目的

  • JSを避け続けてきたので、JS力が激引く
  • uhyoさんの「JavaScript初心者から中級者になろう」がとてもクオリティ高いので、全部読もうと思った

基礎編

基礎1

基礎第一回 — JavaScript初級者から中級者になろう — uhyohyo.net

  • script type="text/javascript"

  • typeをこのように書くと正統的なんだね

  • あくまで単語と単語（より正確には、トークンとトークン）の区切りなどに空白を入れることができます。

  • JSで単語のことはトークンというらしい

    100のようにプログラム中で数値を表す部分は数値リテラルといいます。

  • 正確に数値リテラルと言う言葉を、私はこの記事を読む前は言うことができなさそうだった

基礎2

基礎第二回 — JavaScript初級者から中級者になろう — uhyohyo.net

  • 変数名の先頭（最初の文字）が数字であってはいけません。

  • 多分そうだろうとは思ってた
  • 日本語の変数名も実はつけられるらしい(よくない)

  • 演算子が作用する値（この場合+演算子の左と右の値）をオペランドといいます

  • ◎演算子がオペランドだと思ってた

  • a=5;の場合、演算子=に値を返す以外に、変数に値を代入するという効果があったので意味のある文になっています。このように、式を返す以外の処理を副作用といいます。

  • 実は右から順番に計算していくものもあります。代入演算子がそれです。そのため、次のようなことができます。 a = b = c = d = 3

  • 右からはしらなかった jsにはこの書き方多いよね

基礎3

基礎第三回 — JavaScript初級者から中級者になろう — uhyohyo.net

基礎4

基礎第四回 — JavaScript初級者から中級者になろう — uhyohyo.net

  • ちなみに、関数定義はどこに書いておいても構いません。関数を使うより後でも構いません。

  • 知らなかった
  • 関数中で var をつけなかったらグローバル変数になって上書きしちゃうのね
    • var でローカル変数

  • 関数ではないところでvarを使うことも可能ですが、意味はありません。ただ、varをつけると変数を新しく作っているのだということが一目瞭然なので、この処理ではこういう新しいグローバル変数を作って使っていますよ、ということを（プログラムを見る人に）示す効果があります。 ですから、プログラムをわかりやすくするためにもできるだけつけておきましょう。

基礎5

基礎第五回 — JavaScript初級者から中級者になろう — uhyohyo.net

  • ブラウザの開発者ツールで、既存のhtmlを編集で全部消して、ここにあるhtml を貼り付ければ、htmlもカンタンに試せるね
    • もちろん、JSはコンソールで試せるね

  • このようにオペランドが1つしかない演算子を単項演算子といいます。対して、2つある演算子は二項演算子といいます

  • 演算子が前にあると足した後の値を返し、後にあると足す前の値を返します。

  • 逆だと思ってた

基礎6

基礎第六回 — JavaScript初級者から中級者になろう — uhyohyo.net

  • 関数を使わずに、document.name でも要素を取れたんだね(よくないやり方)
  • document.forms["フォーム名"].elements["エレメント名"].value という書き方もあったのね (よくなさそう)
  • var aa = ["aaa","bbb"];
  • for of 文
    • いつの間にか使っていた

第一章　オブジェクト

1-1

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

  • 知らないことが続々とあった

  • 実は配列はオブジェクトの一種

  • オブジェクトでは、ひとつひとつの値が番号ではなく名前を持っています

  • 新しいプロパティを作るときであっても、新しく「変数」を作っているわけではないので、代入するときに「var」はつけません。

  • プロパティの表し方には別の書き方があります。次のような書き方です。。。オブジェクト名["プロパティ名"] プロパティ名が変数に入っている場合などに役立ちます。

  • 数字だけの名前のプロパティは、arr.0の形で書けません（文法エラーになります）。arr[0]の形でのみ参照できます。

  • arr[0] 文字列が必要な場面で数値が渡されたことになるので、数値は文字列に変換されます。すなわち、arr[0]とはarr["0"]と同じ意味となります。

  • arr.length の .length もプロパティ

1-2

一章第二回 オブジェクトの実体 — JavaScript初級者から中級者になろう — uhyohyo.net

  • var obj = {}; とも書ける

  • プロパティ名が"で囲まれていますが、実は囲んでも囲まなくても構いません。

  • この書き方でオブジェクトを表現する方法をオブジェクトリテラルといいます

  • ほとんどこの書き方で書かれるらしい

  • オブジェクトは作成したあとから変更可能(mutable)

  • 実は、この場合、変数aと変数bに入っているのは同じオブジェクトです

  • オブジェクトは参照わたしらしい
  • うーん、なるほど(数値型の) 3と5は別物なのか…
  • var a = {"aaa": 10};var b = {"aaa": 10}; なら別のオブジェクトになる

  • オブジェクト以外の値のことをプリミティブ（プリミティブ値）といいます

  • Javaでも聞いた覚え

1-3

一章第三回 配列のコピー — JavaScript初級者から中級者になろう — uhyohyo.net

  • 配列もそのままだと変更可能(連動して変わってしまう)になっちゃうよ

  • ちなみに、関数呼び出しのときに引数としてオブジェクトを渡した場合も、オブジェクトはコピーされません。渡されたのと同じオブジェクトが引数変数に入ります。

  • …で、こういうユーザがいちいちコピー関数を作る方法でなく、便利なコピー関数があるんだよね？

  • 今回やったような配列のコピーは、ES2015という比較的新しい記法で次のように書けます。 var b = [...a];

  • あった

1-4

一章第四回 オブジェクトと関数 — JavaScript初級者から中級者になろう — uhyohyo.net

  • 関数もオブジェクト

  • javascriptでは全てのものがオブジェクトかプリミティブ

  • 関数定義というのは、新しい関数を作り、それを変数に入れる作業

  • 関数名は関数が入った変数名だったんだなぁ
  • function aaa(){ alert("test");} が aaa に入ってる

  • プロパティのうち、関数であるもののことをメソッドといいます

  • var a = {}; a.abc = test; a.abc(); function test(){ alert("test"); }
  • この書き方でメソッドにナルンだね
  • var aaa = function (){ alert("test"); };
  • こっちの方が見慣れてる (関数式)

  • これを関数リテラルと呼ぶことも可能かもしれませんが、そう呼ばれているのはあまり見ません。

  • あくまで代入文なので、function(){ ? }の後には「;」が付いている

  • var a = { abc: function(){ alert("abc"); }, aaa: function(){ alert("aaa"); } };

  • こういう書き方もできるのね
  • var a = { abc(){ alert("abc"); }, aaa(){ alert("aaa"); } };
  • ES2015にはこういうのもあるらしい (わかりにくそう)
    • というか、やっぱり書き方多いよね　JS
  • 関数を返す関数でa()();　とか (a())(); とか書けるらしい (実践でもたまに出てきそう)
  • (function(){ alert("test"); })(); 無名関数と同じ形だから、よく出てくるのね
  • 関数式は 関数を返すんだなぁ

感想

  • 第一章は普通にはっきりと分かってないことが多かった
    • 基礎編も知らなかったことが何個かあった

時間まとめ

  • 2021/09/30 18:36 に読み始めた
  • 2021/10/03 17:35までに読んだ
  • 40 + 60 + 17 = 117分かかってる
    • 一章につき 60分かな？
      • 一節 10分程度？
    • 18章あるので、18時間かかりそう
  • このブログを書くのに 24分かかった
  • 累計 141分

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

評価資料作成時間まとめ

まとめ記事

2021/09/30 18:09

前: 期末評価資料を書きたい2021-09-06.txt

経緯

めちゃくちゃ時間がかかった気がする

ポイント

ブログにあげる

時間まとめ

なう(2021/09/04 20:32:56) 44ふん pr出してマージされた　17ふん勉強まとめ中
　集計361ふん
なう(2021/09/06 00:23:33)59ふん　案件速さまとめてた40ふん　:on1準備中
　集計420ふん

なう(2021/09/07 02:27:31)56ふん　半期でやった事見直した　ニチレイは見きった　56ふんかかるんだね
　集計56ふん
なう(2021/09/08 01:46:14)60すん　30ふん期末資料やったこと　15ふんPowerShell　15ふんtypescriptの型の大事さ
　集計116ふん


なう(2021/09/16 22:28:24)29ふん　1on1みた
　集計145ふん　60ふんやってない
なう(2021/09/17 19:41:53)　人事制度よんだ　51ふん
　集計196ふん
なう(2021/09/17 22:44:06)31ふん　10ふん評価資料まとめ　20ふんcdk勉強　公式よみ
　集計227ふん　残り163ふん
　0917は金曜日　ここまでで270ふんしとくべき（43ふん不足）
　18、19はワクチン2回目休み


　なう(2021/09/27 00:19:50)　32ふん　評価資料作り中
　　リハビリで半分
　なう(2021/09/27 21:25:08)42ふん　評価資料つくり
　　記事しらべてたまとめ記事　
　集計42ふん
　なう(2021/09/28 21:35:52)45ふん　評価資料つくり　金額換算できてる　4ケースくらい書けた（11ふん/ケース　かかる）
　集計87ふん
なう(2021/09/29 22:24:03)80ふん評価資料完成する
　集計167ふん

合計

  • 491分 = 8.18時間だった (8.2日分相当)
    • 本を1冊弱読める時間

何に時間がかかってるのか

(単位:分)
勉強まとめ 17
案件速さまとめ 40
半期でやったこと見直し 56+30
1on1見直し 29
人事制度確認 51
評価資料整え 10+32+80
  作ったドキュメント(まとめ記事)まとめ 42
  とりわけ良かった仕事まとめ 45

考察

  • うーん、こんなものかも
    • 毎回このくらいかかってる気がする…
  • 半年に 8日強、評価資料にかかるとおぼえておこう

JavaScriptの継承や歴史や型の大事さなどを勉強した

Webエンジニアリング

経緯

  • FlMMLonHTML5 に prを出そうとした
    • 出した
  • 自分の JavaScript 能力があまりにも低かったので、勉強することにした
  • uhyo_さんの「JavaScript 中級者になろう」講座がとても品質高かった
  • その他にも何個か読んだ

細部

  • webpackで引数が消滅していたのは、wrapperが間に挟まっているからだった (wrapper の 方でも引数をいじらないといけなかった)

勉強

uhyoさん編

JSの歴史編

  • JSの歴史を知りたくなったので JavaScript入門 - とほほのWWW入門 を読む

    • javascriptとは、netscape communications社が開発したプログラミング言語です

    • c言語を祖先として生まれた言語

    • javascriptは元々livescriptという名前で開発されていましたが、javaが流行しはじめたことや、netscape社とsun社が技術提携したこともあり、javascriptと名前を変えたようです。

    • とほほさんは2019年も更新されてるのね
    • ES4が放棄になったので、 ES3(1999年)→ ES5 (2009年)がだいぶ開いてる
    • ES2015(ES6, 2011年)→ ES7(ES2016, 2016年) も結構あいてる そのあとは毎年更新
    • ☆ 各バージョンで追加された機能が列挙されてて素晴らしい
      • このリンク先を読んでいけばES博士になれそう　そのうちやりたい
  • JavaScript が勝ち残った理由を知りたくなった
  • ウェブブラウザ上で動作するプログラミング言語において、なぜJavaScriptだけが生き残ることができたのでしょうか？ - Quora
    • 非同期イベントループが画期的とのこと。　確かに、他のライバルは全部読み込んだ枠の中だけで世界が完結してた
    • スマホ時代の前は jsよりflashの方が…確かに人気あったかも。

    • 今ではjavaはサーバサイドでしか見かけなくなりましたが、最初はフロントエンド用のテクノロジーでした。

    • 同じ時期にnetscape社はブラウザ上で動作するlivescriptというスクリプト言語を開発していました。しかし、javaが大人気だったため、このlivescriptをjavascriptという名前に変更しました。

    • microsoft は mosaicというブラウザを買収しこれを基にinternetexplorerを開発していきます。

    • このmosaicは、netscape社起業前にnetscape社の開発陣が作った本家webブラウザです。mozzilaの語源はここにあります。

    • IEは htmlを厳密に書かなくてもレイアウトが崩れないというのが受けたようです。

    • activexも一時期よく使われましたが、脆弱性の問題もあり、皆使わなくなっていきます。 - プログラミング言語(何でもできてしまう)で脆弱性は致命的だなぁ

    • JavaScript は Flash 前の時代、各社勝手に拡張してたらしい

    • 多くの古い仕様が残っているというのも事実です。 - これがJSの難しさの原因っぽい

    • c#でwindowsアプリを作るのと比較すると遥かに効率よくユーザーインターフェースが作成できます。

    • 現在ではプログラム言語としても優秀なのでどんどん使いましょう。 - 過去が悪いのね (腑に落ちた)

読みたかったものを読む編

またJSのことを知るぞ編

型編 (TypeScript編)

  • 型ってそんなに大事なの？　調べたい　2021/09/03 2:06
  • 敗北者のTypeScript - Qiita
    • A4判 36P相当 (28600文字)
    • フロントエンドは、ユーザ側に環境があるので、実際に死ぬ言語が何個も出てきた(Silverlight, ActionScript などなど) …ので、煽り調で注目を得て生き残っていかねばならないのだと思う
    • 型があると色々なエラーを避けられるんだね
    • 安全ということをプログラマが手作業で示すか、機械的な保証を強制するか　の違いみたい

    • typescript時代においては、ちゃんと型で表現できるようにプログラムを設計するということもtypescriptのスキルの一つですね。

    • コード例が多くて分かりやすい
    • 型があることによる安全性がわかってきた

    • ここまでで紹介したany,as,!くらいがtypescriptが持つ代表的な危険性です - 分かりやすい

    • TypeScriptの強力な型システム

      • type MyObjWithName = MyObj & { name: string; };

  • TypeScript って誰が 作ったの？
  • TypeScript - Wikipedia
    • マイクロソフトが 2012年に初めて出した

    • javascriptに対して、省略も可能な静的型付けとクラスベースオブジェクト指向を加えた厳密なスーパーセット

    • jscript.netとtypescriptはよく似ている

    • プリミティブ型のためのアノーテーションはnumber、boolean、stringである。
      - プリミティブ型はこの３つしかないのかあ

    • 型アノーテーションは別個の「宣言ファイル」に外出しすることが出来る (C++のheader ファイルみたいなもの)　jQuery とかを TypeScriptにできる(ヘッダーファイルみたいなもので型情報をつけることで) - 知らなかった

declare module arithmetics {
    add(left: number, right: number): number;
    subtract(left: number, right: number): number;
    multiply(left: number, right: number): number;
    divide(left: number, right: number): number;
}

まとめ

  • JavaScriptのことを (uhyoさんの中級者になろうを全部読んで)ちゃんと知りたいとおもった

時間まとめ

  • 9/1～9/3, 9/8～9/13 の 9日 (9時間) これにかけた
  • でも知らなくて、今後というか本来必要なことを知れたと思うのでいいかな

当たりくじを売っていた売り場の例え(事前確率)

統計学 株式投資

起こったこと

  • 2021/8/19(木) にタマホームを買った
    • お客さんは他のハウスメーカーと比較してタマホームが優れてるからタマホームを選ぶ訳で、社員さんにワクチンを打たせないとか風俗利用推奨してたとかでタマホームのメリットは打ち消せないと思うなあ。
    • (今後もずっとワクチン打たせない方針だとしても、将来の採用でワクチン接種済の社員候補者しかいなかったら接種済者を採用せざるを得なくなるはず。。)
  • 9/3(金)にタマホームを利確した (+12.8%)
  • その後も +15%くらい上がったのだった

考え方

  • 別に、 9/3 の段階の情報では、マイルールに照らしても売るのが最善だね (事前確率)
    • 特に、「直近急騰していたら買わない」というマイルールが大きい
    • どっちとも言えないときはエントリーしないのが良いと思う

勉強

  • 事前確率 - Wikipedia

    • 情報がない場合を無情報事前分布(non-informative prior distribution)という。後者の場合には広く薄い信念を表明している形状が望まれ、その一類型として一様分布がある

  • 事後確率 - Wikipedia
    • モンティ・ホール問題では「常にヒント後に変えるのが最善」なのと同じ (結果的に最初に選んだのが当たりでも、最終結果の情報を知る前の状態では、変えるのが最善)

    • 事前確率に証拠となる情報を加味してより確からしい事後確率を求めることをベイズ改訂（またはベイズ更新）といい、この方法を用いる推定をベイズ推定という。

  • 尤度関数 - Wikipedia

    • 最初の論文は、ロナルド・フィッシャーによる1922年の"on the mathematical foundations of theoretical statistics"である

    • 聞いたことある　読んだことすらあるかも！？ 2021/09/13 3:37 33min
    • やっぱり統計は楽しいね　2021/09/13 3:34 30min

Webpackを勉強するぞ

Webエンジニアリング

動機・経緯

経緯

  • オープンソースプロジェクトにprを出すぞ！ (JS)
  • 一箇所だけ、呼び出し元から引数を渡してモジュールをnewしたいぞ
  • Webpackでbuildすると 引数が消えてビルドされるのだが…

背景

  • 自分はフロントエンドだけはだましだましやってきたのだった

勉強

感想

  • JavaScript は書き方の種類が大量にあって、PHPよりはるかに厳しいと思う
    • ES6版とCommonJS版？
      • ES2020版はどのくらい変わったんだろう
    • PHPやRubyは書き方が1通りしかなくてすごい
      • (バージョンが上がっていっても、基本的な書き方がほとんど変わってないのがすごい)
    • ブラウザで動くプログラミング言語がこれしかないから使われてるのだと思う (言語間競争が今では全く無い)

今後

  • webpack new 引数 消滅 とかでググって、当初の問題の解決策を見つけたい

時間管理

  • 2021/8/29 38min から勉強してるみたい
  • 2021/08/31 27min で勉強終わった
  • つまり勉強時間は丸２日(約1時間)のようである