2018-06-10

DNSとDNSレコードについて

AWSについて勉強していて、Route 53に差し掛かったところでそもそもDNSよく分かってないや、ってなったので簡単なまとめ。
Route 53独自のレコードについても触れる。

そもそもDNSサーバ

2種類あるから混同させちゃダメ
1. DNSキャッシュサーバ
  - PCなどから名前解決を依頼されるサーバ
2. DNSコンテンツサーバ(権威DNSサーバ)
  - ドメイン名に関する情報を管理しており(IPアドレスとの対応、または、ドメインを管理している別DNSコンテンツサーバのIPアドレスなど)問い合わせに対して回答するサーバ
DNSの詳細な仕組みに関しては詳細に説明されているサイト(例えばここ)を参照のこと

DNSレコードとは

DNSコンテンツサーバはDNSサーバからの問い合わせに対して、ゾーンファイルを参照する
- ゾーンファイルには、DNSコンテンツサーバが管理する範囲内でのIPアドレスとドメインの対応、
  他のDNSコンテンツサーバにドメインの管理を委譲しているのであれば、委譲先の情報が書かれている
DNSレコードはゾーンファイルの各行のこと

主なDNSレコード

タイプ	略	概要
A	Address	`IPv4` IPアドレス。
AAAA	?	`IPv6` IPアドレス
CNAME	Canonical NAME	ドメイン名の別名。
NS	Name Server	ドメインの管理の委譲先の権威DNSサーバのドメイン名
MX	Mail Exchange	ドメインへのメール配送先サーバのドメイン。
TXT	TeXT	コメント行。Sender Policy Frameworkにも使える
PTR	PoinTeR	IPアドレスに対応するドメイン名。
SOA	Start Of Authority	プライマリネームサーバ、ドメイン管理者の電子メール、ドメインのシリアル番号(更新されたかどうかの判別に使う)、ゾーンのリフレッシュなど

上記のDNSレコード以外に、Route 53には独自のDNSレコードALIASがある
- ALIASレコードでは下記リソースのみ指定でき、それぞれ次のような振る舞いをする
  - CloudFront ディストリビューション
    - Cloud Frontドメイン名へのクエリと同様の振る舞い
  - Elastic Beanstalk 環境
    - 環境への1つ以上のIPアドレスを返す
  - ELB ロードバランサー
    - ELBへの1つ以上のIPアドレスを返す
  - 静的ウェブサイトとして設定された Amazon S3 バケット
    - S3バケットへの1つのIPアドレスを返す
  - エイリアスレコードを作成している同じ Route 53 ホストゾーン内の別のレコード
    - 別レコードへのクエリと同様の振る舞い
- ALIASレコードが参照しているレコードへの変更は自動的に認識される
  - ex) ELBのIPアドレスが変更されてもレコードを変更しなくてもよい
- 一度の名前解決でIPアドレスが得られるので早い
- DNS 名前空間の最上位ノード(Zone Apex)に作成できる

参考

2018-06-05

バイト列を受け取ったブラウザがDOMツリーをつくるまで

概要

ブラウザがページをレンダリングするまでにはいくつかのステップを経ている。 googleのConstructing the Object Modelを読んで、分からなかった単語などを調べながらまとめる。 CSSDOMのところは除いてとりあえずDOMツリーが作られるところまで。

バイト文字列からDOMオブジェクトになるまでの流れ

ブラウザーに渡されたバイト列は、下のような流れでDOMツリーになってレンダリングされる。英語が苦手な人もgoogleのページの図を見てもらえると分かりやすいかと。

バイト列
  ↓
文字列
  ↓
トークン
  ↓
オブジェクト
  ↓
DOMツリー

バイト文字列から文字列へ - Conversion

ブラウザーは、サーバーやディスクから読み込んだバイト列を、決まった文字コードに応じて文字列に変換する。例えば、htmlファイルのheadに<meta charset="utf-8">があれば、バイト列をUTF-8として処理する。

文字列からトークンへ - Tokenizing

ブラウザーは文字列を<html>や<body>などカギカッコ(angle brackets)に囲まれたトークン¹に変換する。それぞれのトークンはそれぞれの特性を持っている。

トークンからノードへ - Lexing

トークンがオブジェクト(ノード)へと変換される。 Tokenizeで、headやbodyなどの各タグは始まりのタグと終わりのタグで別個になっていたが、
この段階でひとまとまりのオブジェクトへと変換される。

Lex - レキシカルアナライザ(字句解析プログラム)を生成するプログラム

オブジェクトからDOMツリーへ

HTMLでは各タグ同士の包含関係などの関係性が書かれているので、オブジェクトは木構造へと結びつけられる。 htmlタグがparent、head、bodyがchildといった形。リンク先の図が分かりやすい。

参考

トークンはここでは、連続したデータにおいて最小の意味を持ったまとまりの意味。↩

2018-06-02

MySQLのデータ型の後にある括弧について(おまけ: charとvarchar)

整数型の場合

テーブルを作る
何文字まで入るのか、確認のためINSERTしていく

mysql> CREATE TABLE tinyint_test ( `num` tinyint(1) NOT NULL );

mysql> INSERT INTO `tinyint_test` VALUES ( 1 );
Query OK, 1 row affected (0.00 sec)

mysql> INSERT INTO `tinyint_test` VALUES ( 2 );
Query OK, 1 row affected (0.00 sec)

mysql> INSERT INTO `tinyint_test` VALUES ( 127 );
Query OK, 1 row affected (0.00 sec)

mysql> INSERT INTO `tinyint_test` VALUES ( 128 );
ERROR 1264 (22003): Out of range value for column 'num' at row 1

tinyintの取りうる範囲(符号ありの場合、-128 ~ 127)であれば、全て入れられる。
- 値や桁数の制限にはならない

文字列型の場合

varcharの場合

mysql> CREATE TABLE `varchar_test` ( `string` varchar(5) NOT NULL );
Query OK, 0 rows affected (0.03 sec)

mysql> INSERT INTO `varchar_test` VALUES ( 'あああああ' );
Query OK, 1 row affected (0.00 sec)

mysql> INSERT INTO `varchar_test` VALUE( 'ああああああ' );
ERROR 1406 (22001): Data too long for column 'string' at row 1

charの場合

mysql> CREATE TABLE `char_test` ( `string` char(5) NOT NULL );
Query OK, 0 rows affected (0.02 sec)

mysql> INSERT INTO `char_test` VALUES ( 'あああああ' );
Query OK, 1 row affected (0.00 sec)

mysql> INSERT INTO `char_test` VALUES ( 'ああああああ' );
ERROR 1406 (22001): Data too long for column 'string' at row 1

文字列型の場合、文字数制限がかけられる
varcharは可変長、charは固定長なのでもしかすると、違う結果になるのかなと思って両方やったけど同じ結果になった。

数値型のデフォルトの括弧の値

数値型の場合、デフォルトの値をしていなかった場合どうなるんだろう

mysql> CREATE TABLE `tinyint` ( `tinyint` tinyint NOT NULL );
Query OK, 0 rows affected (0.02 sec)

mysql> SHOW  CREATE TABLE `tinyint`;
+---------+-----------------------------------------------------------------------------------------------+
| Table   | Create Table                                                                                  |
+---------+-----------------------------------------------------------------------------------------------+
| tinyint | CREATE TABLE `tinyint` (
  `tinyint` tinyint(4) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 |
+---------+-----------------------------------------------------------------------------------------------+
1 row in set (0.00 sec)

4桁or4文字までとな
あ、マイナスがあるからか！

mysql> CREATE TABLE `tinyint_unsigned` ( `tinyint` tinyint  unsigned NOT NULL );
Query OK, 0 rows affected (0.02 sec)

mysql> SHOW  CREATE TABLE `tinyint_unsigned`;
+------------------+-----------------------------------------------------------------------------------------------------------------+
| Table            | Create Table                                                                                                    |
+------------------+-----------------------------------------------------------------------------------------------------------------+
| tinyint_unsigned | CREATE TABLE `tinyint_unsigned` (
  `tinyint` tinyint(3) unsigned NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 |
+------------------+-----------------------------------------------------------------------------------------------------------------+
1 row in set (0.00 sec)

数値型で値を指定しなかった場合のデフォルト値は文字数のようだ

文字列型のデフォルトの括弧の値

mysql> CREATE TABLE `string` ( `c` char NOT NULL, `v` varchar NOT NULL );
ERROR 1064 (42000): You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'NOT NULL )' at line 1

mysql> CREATE TABLE `string` ( `c` char(1) NOT NULL, `v` varchar(1) NOT NULL );
Query OK, 0 rows affected (0.03 sec)

そもそも指定しないとエラーになる

charとvarcharについて

charは固定長で 255文字まで格納できる
- 最初に指定した値の長さになるように文字列の右側が空白で埋められる
- 通常の設定では取り出す時に空白は削除される
varcharは可変長で 65,535文字(行全体のバイト数の最大値) まで格納できる
- varcharはプリフィクスに値のバイト数を示すデータが格納される
  - ~255までであればプリフィクスは1バイト、256~ であれば2バイト。
基本的には記憶域を節約できるvarcharがよいが、必ず同じ桁数の文字列が格納されるカラムであればcharがよい。

参考

11.4.1 CHAR および VARCHAR 型

2018-05-29

URIのスキーマを省略すると?

どういうこと?

こうではなく

<img src="https://example.jp/index.html" />

こう書くということ

<img src="//example.jp/index.html" />

どうなるの?

現在見ているサイトのプロトコルでリクエストが送られる。
- httpで見ているサイトならhttpで、httpsで見ているサイトならhttpsで

短くかけて便利だけど、、、

参考リンクやGoogle HTML/CSS Style Guideにもあるように非推奨らしい。
- プロトコルの省略、httpプロトコルの使用は非推奨とのこと
- こんな記事があったりするように、https化を進めているからかね。
- 何年かしたらプロトコル省略がデフォルトでhttpsとして解釈されたりするんかな?

参考

2018-05-20

UUID生成について

UUIDとは
- Universal Unique Identifier
- 汎システム的に他とは重ならない識別子
uuidgen
- uuidを生成するコマンドラインユーティリティ
- libuuid(3)ライブラリが使われている
- 生成されたUUIDは、いつどこで作られたUUIDとも重ならないと考えて良い
書式
- uuidgen [ -r | -t ]
  - -r 乱数ベース
  - -t 時刻ベース
使い方の例
- cookieにuser id としてセットして、効果計測に使う
  - 例 UUIDでユニークユーザーを特定してアプリ広告の効果を測定
  - ITP以降、3rd party cookieはセットしてもすぐ消えるかもしれないので注意！
    - ITPによるリターゲティング広告、計測ツールへの影響

2018-05-19

webpack簡単まとめ

はじめに

react + echo でSPAを作るぞ、と意気込んだものの色々分からないので、ちょっとずつ進めていく。
自分のレベルはcreate-react-appでTODOアプリくらいは作ってみたけど、なんで動いているのかよく分かっていないよ、くらい
- node、npmはこの前簡単にまとめてみたのでなんとなく分かる
公式ドキュメントのGuidesを進めていく中で、覚えときたいところ、よく分からなかったところ、忘れそうなところのメモ書き。
具体的なコードは書かないのでモジュール名などでググるべし

Asset Management

webpack.config.jsにwebpackの設定を追加していく
npm管理されている各種loader(style-loaderなど)をconfig追加すると、各種ファイルをバンドルできる
- style、css、xml、csvなど

Output Management

jsやcssファイルがバンドルされる際、ファイル名がハッシュになるが、htmlファイルが参照するファイル名は変わらないという問題が発生する
html-webpack-pluginを使おう
- コンパイル毎にファイル名のハッシュが変更されてしまうのを解決してくれる
使われないファイルが出力先フォルダに増えていく問題に対しては、clean-webpack-pluginを使うと、使わないやつを消してくれる。

Development

バンドルしたファイルでエラーが起こったとき、バンドル前のどのファイルでエラーが起こったか分からない?
- webpackのinline-source-mapオプションを使うと、元ファイルのエラーを表示してくれる
ファイル変更する度にビルドし直すの面倒だよね?3つの解決方法がある
1. webpackのwatchモードを使う
  - ファイルに変更があるとコンパイルし直してくれる
  - しかし、ブラウザで表示する場合にはリロードが必要
2. webpack-dev-serverを使うと、webサーバーを立ち上げてくれて、ファイルに変更があると、コンパイル・リロードを自動でやってくれる
3. webpack-dev-serverでは、webpack-dev-middlewareを内部的に使っている
  - webpack-dev-middlewareを切り出してカスタマイズして使うことも可能。
4. とりあえず最初は2の方法でいいのではないかと思う。

Code Spliting

出力されるjsファイルを分割する方法は3つ。

ぱっと見は2が良さそう
Entry Pointsを分けること
- webpack.config.jsファイルのentryを複数指定する
- 簡単で直感的だが、複数ファイルで重複したモジュールがバンドルされる可能性がある
CommonsChunkPluginを使うこと
- 重複したモジュールが1つの別ファイルに出力される
Dynamic imports で行うこと
- インラインで読み込む

参考

webpack公式ドキュメント

2018-05-05

React の Quick start の簡単なまとめ

はじめに

installなど、そのまま簡単に進められたものは省く
- installationを見るとよい
React公式ドキュメントを読み進める中で、覚えておきたいもののメモ。
github-pagesで動いていてて、コードはgithubにあるが、メモ程度に考えてもらった方が、、、

Rendering Elements

Reactで作られた作られたアプリケーションは、通常1つのrootDOMnodeからなる。
- <div id="root"></div>しかないってこと。
- 既存のアプリケーションに取り入れるなら、複数の独立したrootDOMを取り入れることになるみたい。
React Element(componentをクラスとするなら、elementはインスタンスみたいなもの?)はimmutableだ。
- UIを変更するには、ReactDOM.render()に新たなelementを渡すしかない。
- Reactは新旧のelementを比較して、変更部分だけを適用する
  - 仮想DOMといわれる仕組みで、部分的な再描画を行うのでコストが小さい

Components and Props

Reactのcomponentには2種類ある
- functional componentsは、propsの受け取りはできるが、stateの変更は行えない。
- class componentsは、propsの受け取りもstateの変更も行うことができる。
描画の流れ(公式からそのままコードを持ってきている)

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

<Welcome name="Sara" /> element を持った、ReactDOM.render() が呼び出される。
React が {name: 'Sara'} を props として持った Welcom component を呼び出す。
Welcom component が結果として、<h1>Hello, Sara</h1> elementを結果として呼び出す。
ReactDOM は効率的に受け取ったelementに合った形でDOMを更新する
componentのpropsの命名は、呼び出されるcontextではなくcomponent単体から考えるべき
- 再利用性も高まりやすい
props は Read-Only なので、値の変更はできない。

State and Lifecycle

componentDidMount()
- componentがDOOMにレンダリングされた後に呼び出される
componentWillUnmount()
- componentがDOMから消える前に呼び出される
stateの注意点
- 直接stateに値を入れていいのはconstructorの中でだけ。
  変更はsetState()で行う
- stateの更新は非同期に行われうるので、次の変更にその変更を依存してはダメ
  別変数に入れておくとかしましょう
- stateの更新はマージされる

Conditional Rendering

条件によって表示内容を変えたいときには、JSXの埋め込み表現内で
- &&オペレーターを使う
- 三項対立を使う
特定条件でcomponentを表示したくない時には、propsの値によってnullを返す

Lists and Keys

component内でlistをレンダリングする場合には下の例のようにmap()を用いる
下の例ではkeyというものを定義しているが、これはReactが要素の変更、追加、削除を特定するために使われる。
- keyは、componentに渡されない。

const array = [1, 2, 3];
array.map( x => <li key={x.toString()}>x</li> );

Forms

formの入力値の制御・送信は、componentのstateで行う。
- Controlled Componentと呼ばれる
- onChange、onSubmitを使う
- 複数のinput要素を扱う時には、それぞれのnameによって変更するstateを決める(handleChaneは共通でよい)

Lifiting State Up

複数のcomponentの値を同期させたい時
- 上位のcomponentのstateを使い、そのstateをhandleする関数を下位componentに渡す

Thinking in React

stateはinteractiveな値
stateアンチパターン
- 親要素から渡されたpropsをstateにすること
- 変化しない値をstateが変化しないこと
- 別のstateやpropsから導き出されうる値である場合

次にやりたいこと

turorialをやる
apiサーバーと連携したアプリを作る
typescriptを導入する