2019-10-16

github 基礎編 ~必ず通る道~

git

始め方

まずgitがインストールされていること。
githubにsshの設定をしていること。

初期化

git init

インデックスに反映

git add .

コミット

git commit -m 'first commit'

プッシュ

git push origin master

別のブランチを作成移動

git checkout -b 〇〇

ブランチへプッシュ

git push origin 〇〇

2019-10-15

TypeScript 型推論編 ~JavaScriptらしさ~

TypeScript

型推論

変数には型を必ず付与する必要はない。宣言時に代入された値から、型の推論ができる。

const/letの型推論

letの型推論

let test = 'aiu'

//推論
let test: string

constの型推論

const test: 'aiu'

//推論
const test: 'aiu'

Widening Literal Types 定数を変数に代入するとまた少し変わる。

const TestOne = 1
const TestTwo: 2 = 2
const TestThree = 3 as 3 

let One = TestOne
let Two = TestTwo
let Three = TestThree

const num = {
  //推論
  One, // number
  Two, //2
  Three //3
}

Array/Tupleの型推論

Arrayの型推論

const test = [ 0 , '1' ]
//推論
const test: (string | number)[]

宣言時にアサーションasを付与した場合。

const test = [0 as 0 ]  //const test: (0)[]
test.push(0) // OK
test.push(1) //NG

Tupleの型推論 asアサーションで付与する。

const test = [true , 0] as [boolean , number]
//index値参照
const t1 = test[1] // number

objectの型推論

object宣言時に初期値を与えることで型推論が適用。

const obj = {
  t1 : 1
  t2 : '2'
}
//推論
const obj : {
  t1 : number,
  t2 : string
}
//再代入
obj[t1] = 3 //OK
obj[t1] = '3' //NG

関数の戻り型推論

関数宣言の際に戻り型アノーテーションを必ず付与する必要はない。

function test(t1 : string){
  console.log(t1)
}
//推論
function test(t1): void

Peomiseの型推論

Promiseは非同期処理を行う。 Promiseを返す関数

function test(t1: number){
  return new Promise( resolve =>{
    setTimeout(() => resolve(`${t1}ms passed`), t1)
  } )
}
test(2000).then(res => {} )

//推論
function test(t1: number): Promise<{}>

時間経過後に文字列を持ってresolveが実行される。 resolveは非同期タスクが成功して完了した場合に実行される関数。多くの場合thenを使って処理を後に託すがresの型がstring型であることを特定できない。推論では上記のようになっている。

resolve関数の引数を指定する

function test(t1: number)Promise<string>{
  return new Promise( resolve =>{
    setTimeout(() => resolve(`${t1}ms passed`), t1)
  } )
}
test(2000).then(res => {} ) // resはstring型
// new Promise<string>でもあり。

async関数 Promiseインスタンスを返す関数はasync関数の中でawaitを実行することでも、型推論が行われる。

async function test(){
  const t5 = await t1(1000) // t5: string
  return t5
}

//推論
function test(): Promise<string>

async関数の戻り型もPromise型。

Promise.all/Promise.race Promise.all/Promise.raceを使用すると、非同期処理を並行して実行する。そしてそれぞれに応じた型推論の結果が適用される。詳細は省きます。

import構文

import構文の型推論 外部モジュールで定義された変数や関数は、型付与の有無を問わず、そのまま型推論の対象となる。ただこれはimportに限られ、requireでは型推論は行われない。

dynamic import dynamic importも型推論の対象となる。 dynamic importは戻り値がPromiseのため、適切なコードを書けば型推論が適用される。

JSON

JSONファイルを外部モジュールとしてインポートして、定義内容を型推論できる。設定が必要でtsconfig.jsonのresolveJsonModuleとesModuleInteropをtrueに設定する。

2019-10-13

TypeScript 基礎編 -後編- ~クラスから列挙まで~

TypeScript

キーワード

typeof
typeofを使用して、宣言済みの変数の型を取得できる。

let asString: string = ''
let test: typeof asString
test = 'aiueo' //OK
test = 0 //NG

keyof
keyofでLiteral Unionなどのオブジェクトのプロパティ名称を取得できる。 typeofとの併用可能。

アサーション

アサーション(宣言)は値の型について把握している場合に使用。ダウンキャスト可能な互換性のある場合に「この型である」と宣言する。 <>とasを使用する方法がある。推奨はasでアサーションを利用すると強力な型付けが可能になる。

let asString: any = 'String now';
let len: number = (<string>asString).length;

let asString: any = 'String now';
let len: number = (asString as string).lentgh;

クラス

宣言と継承

class Hoge{
  ...
  constructor(aiueo: string, kakiku: string){
    this.aiueo = aiueo
    this.kakiku = kakiku 
  }
}

const hoge = new Hoge(kani , uni)

親クラスを継承したサブクラスで super関数は親クラスのコンストラクタ実行に相当する。

クラスメンバ修飾子
public``protected``privateが付与できる。他の言語と同様で publicはどこでも。 protectedはサブクラスのみ。 privateは同一クラスのみ。

列挙型

列挙型はenumを使用する。

数値列挙
初期化子を省ける。

enum Direction {
  aiu,  // = 0
  eo,  // = 1
  wa,  // = 2
}

const aiu = Direction.aiu

文字列挙
初期化しなければいけない。

enum Direcrtion{
  aiu = "eo",
  wa = "on"
}

open ended
列挙値の追加が可能。

enum Direction{
  aiu = "eo"
  }

enum Direction{
  wa = "on"
}

2019-10-13

TypeScript 基礎編 -前編- ~JavaScriptの発展~

TypeScript

NaN

NaN(Not-a-Number)はJavaScriptでいう「非数」(数字ではない値のこと)。

const val = '100'
const val = val + 200

以上のような型が違う場合でもJavaScriptが内部で数値として変換してしまっていた。このように型の不整合やバグを防ぐために登場TypeScript！

TypeScript基本の型！

boolean
値はTrueorFalse

number
浮動小数点値(数値)

string
テキストデータ

array
配列となっていて[]で表す。

tuple
固定数の要素がわかっている配列。

any
型の不明な場合に使用し、型のチェックを無効にする。

unknown
anyに近く型安全なany。

void
型がまったくないこと。
基本的には返り値なしで使用。

null/undefined
すべての型のサブタイプ。
単体ではあまり役に立たない。

never
発生し得ない値の型。

object
非プリミティブ型
boolean``number``stringなどのいずれでもない。

型レベルアップ

Intersection Types
複数の肩を1つに結合する。
既存の型をまとめて単一の型を取得できる。
&(アンパサンド)で連結する。

Union Types
複数の型のうちのいずれか1つの型を成立することを示す。
|(パイプ)で連結する。

Literal Types
文字列に必要な型を指定できる。

let test: 'aiueo'
test = 'aiueo' //OK
test = 'kakikukeko' //NG

Numeric Literal Types
数値として必要な型を指定できる。

Boolean Literal Types
審議値として必要な型を指定できる。

2019-10-11

TypeScript 入門編 ~より高度に~

TypeScript

TypeScriptとは

JavaScriptの進化版!
Microsoftによって開発され、コンパイルするとJavaScriptに変換される。

インストール

事前にNode.jsのインストールが必要。

npm install -g typescript

typescriptをインストールするとtscコマンド使える。

tsc --init

ファイル

ファイルの拡張子はtsになる。 tscコマンドを実行するとTypeScriptファイルがJavaScriptにビルドされる。 tsc

2019-10-09

Vue SPA Vuex編 -第2章- ~Vuexの完全理解！~

Vue

ストアの分割

ストアはモジュール化し、分割することで管理しやすくする。

モジュールの使い方
オブジェクトで定義したモジュールを、ストアのmodulesオプションに登録する。
モジュール定義

const moduleA = {

}
const moduleB = {
}

ストアに登録

const store = new Vuex.Store({
  modules:{
    moduleA,
    moduleB
}
})

モジュールのステートアクセス

store.state.moduleA
store.state.moduleB

ネームスペース
同一のタイプをコミットする際に同期させたくない場合に別のタイプ名を使用する。
その際にモジュールを定義する際、namespacedオプションをtrueに設定してネームスペースを持つことが可能になる。

ネームスペースがついた場合/で区切って呼び出す。

commit('<ネームスペース>/<タイプ>')

機能とオプション

ストアの状態を監視
Vuexでアプリケーションレベルのウォッチャを定義できる。
関数の第1引数にstate、第2引数にgettersを使用して監視するデータを返す。

Strictモード
strict : trueでコードを厳格にみる。

Vuexでホットリロード
APIメソッドstore.hotUpdate()の設定が必要になる。
ただしVuex.Storeコンストラクタを使用するファイルは
ホットリロードが使用できないため、別ファイルで作成する必要がある。

2019-10-09

Vue SPA Vuex編 -第1章- ~VuexはDB！~

Vue

Vuex

状態管理の拡張ライブラリで、データとその状態に関する全てを一元管理する。

特徴
Vuexによって管理されているデータはリアクティブになっているため、
構造状態に関わらず常に同期されている。
またデータの管理や、状態を管理できるモジュール機能などを持つ。

ポリフィル
ES2015のPromiseに対応していないブラウザをサポートする為に
babel-polyfillなどのポリフィルをインストールする必要がある。

import 'babel-polyfill'
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

Store

Vuexで状態を管理する為ストアを作成する。
アプリケーション内の仮想的なデータベースと考える。
Vuex.Storeコンストラクタでインスタンスを作成する。

Vueアプリケーションにストアを登録する
ストアのインスタンスをVueアプリケーションのルートに登録すれば、
コンポーネントのインスタンスプロパティ$storeでどこからでも使用できる。
そして単一ファイルコンポーネントごとにstoreを読み込む必要がなくなる。

コアコンセプト

コンポーネントとVuexの機能の繋がり

コンポーネント
↓
アクション(store内) ←→ 外部API
↓
ミューテーション(store内) 
↓
ステート(store内) 
↓
コンポーネント
↓

と繰り返している流れ。

ステート(state)
ステートはストアで管理している状態そのもの。
ミューテーション以外からの変更はできない。
コンポーネントでいうdata。

ゲッター(getter)
ゲッターは、ステートを取得する為の算出データ。
算出プロパティとの違いは引数が渡せるが、セッターはない。
プロパティやメソッドを受け取れる。
コンポーネントでいうcomputedとmethodsの中間。
ただ引数付きのゲッターはキャッシュが行われないので、
何度かアクセスするデータはコンポーネントの算出プロパティに登録してキャッシュするのが良い。

ミューテーション(mutations)
ステートを変更できる唯一のメソッド。
コンポーネントでいうmethods。
ミューテーションとアクションのメソッドはタイプと呼ばれる。
引数で以下の情報が受け取れる。
1.state ステート
2.payload コミットからの引数

コミット(commit)
ミューテーションを呼び出すためのインスタンスメソッドがコミット。
コンポーネントでいう$emit。
引数の使用可。

アクション(action)
非同期処理を含めることができるメソッドで、
データの処理や非同期処理を行い、結果をミューテーションへコミットする。
ステートを変更する以外の処理はアクション内で済ませるのが良い。

ディスパッチ(dispatch)
登録されているアクションを呼び出すインスタンスメソッドで、
別のアクション内からも使用できる。
ミューテーションとpayloadの扱いは同じ。

Vuexの小さなまとめ
1.アプリケーションレベルの状態まではストアで管理する。
2.ミューテーション内でしか状態変更ができない。
3.非同期処理はコミット前！

次回！

これ以上管理しやすく！？Vuexのさらなる知識！