Cheatsheet on ashitaka blog

Vue.js チートシート

Sun, 10 May 2020 07:24:04 +0900

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チートシート

Wed, 29 Apr 2020 06:00:40 +0900

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されないため安全であり推奨される。

正規表現チートシート

Wed, 05 Jun 2019 07:27:16 +0900

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, }

感想

とりあえず正規表現が使えそうだったらこのページを参考に書いてみようと思う.