Cheatsheet

vuejsの気になったところ watcherの注意点 wacherの中ではthisを使えない。なるべくcomputedを使う。 watch: { counter() { const vm = this; setTimeout(() => { vm.counter = 0; }, 3000); }, }, v-onディレクティブでの注意点 <!-- method event handler。vue側がいい感じに解釈 --> <button @click="countUp">+1</button> <!-- javascript式 --> <button @click="countUp()">+1</button> v-showの特徴 display: noneのcssがかかる 全てdomに追加されるため初期描画が遅い 要素を削除せずにcssをかけるだけなので描画の切り替えが早い elseがない v-forの特徴 要素の変更が最小限になるようになるべく再利用する 予期しないバグを生む可能性があるので, key属性をつける 仮想ノード createElemetで作られているのは仮想DOMを作るための仮想ノードである。いわゆるDocument Object Modelではなくjavascriptのオブジェクトである。 new Vue({ data: { name: "tak", }, render(createElement) { return createElement("h1", "hello, " + this.name) } }).$mount("#app3"); 仮想DOM DOMの変更を高速に反映するための仕組み。DOMを直接変更するには時間がかかるので, 仮想DOMを変更し前の仮想DOMとの差分を反映して高速に描画する。 Babel JavaScriptのコードを新しい書き方から古い書き方へと変換するツール Webpack webpackは、モジュールを束ねるツールです。 モジュールとは、プログラム内のJavaScriptファイル（以下：jsファイル）やsassファイルなどのことです。webpackを使うことで、複数のjsファイルをひとつのjsファイルにまとめたり、複数のsassファイルをひとつのsassファイルにしたりできます。 ...

Dockerの忘れそうなところをメモ。 Dockerコンテナの実行 docker run pull, create, startを一気にやっちゃう -v /User/takaaki/html:/usr/share/nginx/html:ro バイトマウントする。roとかだとread onlyオプションをつけることができる。 -rm コンテナを停止したときに削除する。 -d バックグランド実行 -e AUTHOR="Takaaki" 環境変数を設定できる。 --link static-site:ss リンク先に通信できるようになる。リンク先の環境変数を追加できる。 docker build イメージを作成。引数にビルドコンテキストを指定。 ビルドコンテキスト…イメージが参照する範囲を指定する。ここで指定した範囲がDocker Hubにpushされるため小さい方がいい。Dockerfileがあるディレクトリの場所でもある。 docker create イメージからコンテナを作成。 -i コンテナの標準入力を取得して双方向に接続. -t コンテナ内にtty(eletypewriter)を割り当てる。 docker cp 文字通りコピー。ホストからコンテナ、コンテナからホストどちらにもできる。 docker add これは文字通りではない。tarを自動で展開したりURLからダウンロードしたりする処理が走る。cpが推奨される。 docker pause, docker unpause docker stop, docker start docker inspect docker rmi イメージを削除。 docker rm コンテナを削除。 docker attach コンテナに接続される。exitで抜けるとstopされる。itで実行していたならばctrl + p, ctrl + qで抜けるとstopされない。 docker exec コンテナ内でコマンドを実行。docker exec -it {image} /bin/bashとしてbashを実行するのによく使われ、exitで抜けてもstopされないため安全であり推奨される。 ...

udemyの教材で正規表現の勉強をした。いままでなんとなく書いていたたが, これからはなんでもかける気がする… 基本的な記号 = 文字または数字を1文字分指定する ^(キャロット) = 直後の文字または数字を指定しない -(ハイフン) = 文字数字の範囲を指定する (バックスラッシュ) = 直後のメタ文字を単なる文字として扱う . (ワイルドカード) = なんでもよし |(パイプ) = 左右のどちらかにマッチするか判定する ()(丸かっこ) = 正規表現をグループ化する 数量詞 繰り返したいパターンの直後におく +(プラス) = 1回以上の繰り返し *(アスタリスク) = 0回以上の繰り返し ?(クエスチョンマーク) = 入力なしか1文字のみ {n} = n回の繰り返し {n, } = n回以上の繰り返し {n, m} = n回以上, m回以下の繰り返し 一致方法 最長一致(デフォルト) 最短一致 ?を数量詞の最後につける 区切り ^ = カバーする範囲の先頭を行頭に指定 $ = カバーする範囲の最後を行末に指定 \b = スペースや改行による単語の区切り 前後につけて単語を見つける \B = \b以外の区切り 単語の中の文字列を見つける 1文字のメタ文字では機能が逆になる ショートコード [0-9] = \d [^0-9] = \D [a-zA-Z0-9_] = \w [^a-zA-Z0-9_] = \W \n = 改行 \t = タブ \r = リターン \f = 改ページ [\n\t\r\f ] = \s [^\n\t\r\f ] = \S 修飾子 g(global) = マッチする結果すべてを抽出 i(case-insensitive) = 大文字と小文字を区別しない m(multiline) = ^と$の挙動を変え, 複数行を対象にする 日本語 ひらがな [ぁ-ん] [\u3041-\u3096] [\x{3041}-\x{3096}] カタカナ [ァ-ヶ] [\u30A1-\u30FA] [\x{30A1}-\x{30FA}] 漢字 [亜-煕] [々〇〻\u3400-\u9FFF\uF900-\uFAFF]|[\uD840-\uD87F][\uDC00-\uDFFF] [々〇〻\x{3400}-\x{9FFF}\x{F900}-\x{FAFF}]|[\x{D840}-\x{D87F}][\x{DC00}-\x{DFFF}] 半角文字以外 [^\x01-\x7E] 応用 フリーダイヤル /0120-((\d{2}-\d{4})|(\d{3}-\d{3}))/ 市街局番 /\d{2, 4}-\d{2, 4}-\d{4}/ 携帯番号 /(090|080|070)-\d{4}-\d{4}/ URL /http[s]?://[\w/%&$#?()=~+-]+/ メールアドレス /[\w-]+@([/w-]+.)+[a-zA-Z]{2, } 感想 とりあえず正規表現が使えそうだったらこのページを参考に書いてみようと思う. ...