2021-09-01から1ヶ月間の記事一覧
TypeScriptを使うべき理由 ドキュメントとして利用 型を指定することで使い方がわかる TypeScriptを読めることでサードパーティのパッケージの仕様がnode_modulesで使い方がわかる Linterとして利用 コンパイルした時にエラーがわかる ES5へのコンパイラとし…
タグをリモートリポジトリにプッシュ git push origin タグ名
新しくブランチを作成し、移動 以前は git checkout -b 新ブランチ名でしたが以下のコマンドでできる。 git switch -c 新ブランチ名
ブランチ同士の比較 masterブランチと他のブランチのコミット比較 git log master..他のブランチ名 masterブランチと他のブランチの差分比較 git diff master..他のブランチ名
git tag タグの追加 軽量タグ git tag タグ名 コミットID 注釈付きタグ git tag -a タグ名 コミットID -m "コミットメッセージ"
git blame 誰が変更したか確認 git blame ファイル名
git show コミットの中身を確認 コミットIDを指定する方法 git show コミットID HEADから何番目かで指定する方法 git show HEAD~数字
git log 履歴をフィルタリング コミットした人でフィルタリング git log --author="コミットした人" コミットしたを指定日付以降でフィルタリング git log --after="2020-01-01" コミットメッセージに含まれるでフィルタリング git log --grep="コミットメッ…
git mv ファイル名変更 ファイル移動 ワーキングディレクトリとステージングエリアのファイル名変更 ファイル移動 git mv 変更前ファイル名 変更後ファイル名
git rm ファイル削除 ワーキングディレクトリとステージングエリアのファイル削除の場合 git rm ファイル名 ステージングエリアのファイルのみを削除の場合 git rm --cached ファイル名
git restore ファイルの変更の取り消し git version22.3から使える(2019年8月) ステージングエリアの内容でワーキングディレクトリのファイル変更を取り消ししたいとき git restore ファイル名 ローカルリポジトリの内容でステージングエリアのファイル変更…
git addとgit commitを同時にやる方法 git addを同時にしてしまうためコミットしたくないものがある時は使用してはいけない git commit -am " コミットメッセージ"
v-on イベント作成 @clickはv-on:clickの省略記法 以下は一度クリックすると購入ボタンが押せなくなるイベント <div id="app"> <button @click="checkClick" :disbled="clicked">購入</button> </div> <script> let app = new Vue({ el: "#app", data: { clicked: false }, methods: { checkClick: funciton() { this.clicked = true; } } }) </script>
v-for 配列繰り返し <div id="app"> <ul v-for="week of weeks"> <li>{{ week }}</li> </ul> </div> <script> let app = new Vue({ el: "#app", data: { weeks: ['月', '火', '水', '木', '金', '土', '日'] } }) </script>
v-for 繰り返し構文 <div id="app"> <ul v-for="i of 繰り返したい数" :key="i"> <li>{{ i }}</li> </ul> </div> <script> let app = new Vue({ el: "#app" }) </script>
条件によって、表示、非表示切り替え v-ifでdisplayがtrueなら表示、displayがfalseなら非表示と切り替え <div id="app"> <p class="alert" v-if="display">表示</p> </div> <script> let app = new Vue({ el: "#app", data: { display: false } }) </script>
フォームと値の接続 v-modelを使用 <div id="app"> <input type="number" v-model="number"> = {{ number }} </div> <script> let app = new Vue({ el: "#app", data: { number: 値 } }); </script>
クラス属性を書き換える :class="プロパティー名"でクラス属性を書き換える :classはv-bind:classの省略記法 <div id="app"> <p :class="プロパティー名">クラス属性を書き換える<p> </div> <script> let app = new Vue({ el: "#app", data: { プロパティー名: 値 } }) </script>
基本的な使い方 elはエレメントで使いたいセレクタを指定する。Vueの公式では#app. {{}}はマスタッシュ構文 <div id="app"> {{ dataの変数名 }} </div> <script> let app new Vue({ el: "#app", data: { 変数名: 値 } </script>
readonly 読み込み専用のプロパティーを作成 class クラス名 { readonly プロパティー名: 型指定 = 値; } let 変数名 = new クラス名(); 変数名.プロパティー名;
クラス定義 class クラス名 { public 変数名: 型指定; private 変数名: 型指定; constructor() { } public メソッド名(): 戻り値の型指定 { } }
リスト 入れたいものを定義し、入れたいもの以外はエラーにする let color: 'red' | 'blue' | 'yellow'; color = 'red'; color = 'blue'; 以下はエラーになる color = 'green';
型推論 letで定義した時に型を自動で決定し、決定した型以外を代入するとエラーになる let moji = '文字'; let suuji = 1; 以下でエラーが発生。letで定義した時に型推論でstringとnumberで型指定している moji = 1; suuji = '1'
ユニオンタイプ 複数の型指定を定義 let 変数名: number | string;
ジェネリック 後から型指定をして入れることができる const 関数の変数名 = <T>(引数: T): 戻り値の型 => { } Tに入るのが引数の型 使い方 関数の変数名<Tに入る型></tに入る型></t>
関数の型 引数と戻り値に型を指定できる function 関数名(引数1: 引数1の型, 引数2: 引数2の型): 戻り値の型 { }
型 数字 let a: number = 1; 文字列 let a: string = '1'; 複数の型を入れられる(過去のJSとの互換性のためなのでなるべく使わない) let a: any = 1;
クラス継承 super 他のクラスのプロパティーとメソッドを引き継ぐこと class 継承先クラス extends 継承元クラス { constructor() { super(引数); } メソッド名(){ super.メソッド名(引数); } }
【JavaScript】ES6 クラス コンストラクター関数をクラス表記で書ける クラス class クラス名 { constructor(){ } メソッド名() { } } コンストラクター関数 function 関数名() { } 関数名.prototype.メソッド名 = function(){}
プロトタイプ継承 別のコンストラクター関数のプロトタイプを受け継いで、機能を流用。 継承先の関数.prototype = object.create(継承元の関数.prototype); 継承先の関数のブロック内で以下を書く 継承元の関数.call(this, 引数);