github 基礎編 ~必ず通る道~

始め方

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

初期化

git init


インデックスに反映

git add .



コミット

git commit -m 'first commit'


プッシュ

git push origin master


別のブランチを作成移動

git checkout -b 〇〇


ブランチへプッシュ

git push origin 〇〇

TypeScript 型推論編 ~JavaScriptらしさ~

型推論

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

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.jsonresolveJsonModuleesModuleInteroptrueに設定する。

参照文献

実践TypeScript ~ BFFとNext.js&Nuxt.jsの型定義~
https://www.amazon.co.jp/実践TypeScript-BFFとNext-js-Nuxt-jsの型定義-吉井-健文/dp/483996937X

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




参照文献

実践TypeScript ~ BFFとNext.js&Nuxt.jsの型定義~
https://www.amazon.co.jp/実践TypeScript-BFFとNext-js-Nuxt-jsの型定義-吉井-健文/dp/483996937X

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

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
審議値として必要な型を指定できる。


参照文献

実践TypeScript ~ BFFとNext.js&Nuxt.jsの型定義~
https://www.amazon.co.jp/実践TypeScript-BFFとNext-js-Nuxt-jsの型定義-吉井-健文/dp/483996937X

TypeScript 入門編 ~より高度に~

TypeScriptとは

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

インストール

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

npm install -g typescript

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

tsc --init



ファイル

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



参照文献

実践TypeScript ~ BFFとNext.js&Nuxt.jsの型定義~
https://www.amazon.co.jp/実践TypeScript-BFFとNext-js-Nuxt-jsの型定義-吉井-健文/dp/483996937X

Vue VueRouter編 -最終章- ~ありがとうVue.js~

ナビゲーションガード

遷移を操作するためのフックのこと。 遷移を中断させたりタイミングを操作する。

ナビゲーションガードの引数
next()関数が重要。
遷移をさせない時にはnext(false)にする。
複数のフックを併用できるが、それぞれのフックで解決した後に遷移する。

ルート単位のガード
ルート単位のナビゲーションガードは 各ルート単位のオプションに定義する。
パラメータ確認などに使用。

グローバルのガード
すべてのルートに対してフックを呼び出すには
ルートインスタンスを使ってグローバルに登録する。
認証処理などに使用。

コンポーネントのガード
初期データを非同期に読み込んだ後に遷移させる場合に使用。

最後のまとめ!

1.VueRouterはルーティング用のライブラリ
2.ページはコンポーネントで作成!

次回!

今後は「基礎から学ぶ Vue.js」を読んだことから開発を行っていきます!
開発している中で重要だと思ったことや学んだこと、
うまく説明できなかった部分を載せていきます。

開発アプリケーションは公開する予定です! ではまた!

参照文献

基礎から学ぶ Vue.js
https://www.amazon.co.jp/基礎から学ぶ-Vue-js-mio/dp/4863542453/

Vue SPA VueRouter編 -第1章- ~最高の品質を!~

SPA

SPA(Single-page Application)は一つのウェブページを使用して内容のみを変えて
画面遷移させるアプリケーション設計のこと。

Vue Routerインストール

npm install vue-router

src/router.js

import Vue from 'vue'
import VueRouter from 'vue-router'

vue.use(VueRouter)



組み込みコンポーネント
<router-view>ルートにあうコンポーネントを描画する
<router-link>ルートのリンク作成。

使い方

src/views/TestA.vueとTestB.vueを作成後
<template></template>テンプレート(タグ内はなんでもOK) を記述。

router.js

//VueRouterインスタンスを生成
const router = new VueRouter({
//URLのパスと紐づくコンポーネントをマッピング
  routers:[
    { path:'/', component:TestA},
    { path:'/Test',component: TestB}
  ]
})


export default router


main.jsでアプリケーションに登録

import router from './router.js'

new Vue({
  el : '#test,'
  router,//アプリケーションに登録
  render: => h => h(Test)
})

App.vueに <router-view>タグを記述することで、ルートとマッチしたコンポーネントの内容が描画される。

URLのハッシュ
Vue Routerはハッシュヒストリーの2種類のモードが選択できる。
デフォルトはハッシュモードになっていている。
ハッシュモードはハッシュ値の変更によって現在のルートを検知するため、 ブラウザのHistroyAPIのサポートやサーバー側の設定を必要としない。 ただURLに#が付与されてページ内リンクが使用できない。

ヒストリーモードにするには、

const router = new VueRouter({
  mode : 'history',
  routes : []
})

サーバの設定が必要になる。

ルート定義のオプション

ルート定義

const router = new VueRouter({
  routes : [
    {
      //ルートA
    },
    {
      //ルートB
     }
  ]

})



名前つきルート
ルートに固有の名前をつけるにはname : 'hoge',

パラメータ
idなどの可変URLにはパラメータを使う。path: '/hoge/id',

クエリ
URL付与クエリはthis.$route.queryでオブジェクト形式で格納される。

メタフィールド
閲覧認証のルート情報の設定はmeta: {requiresAuth: true}

リダイレクト
特定のパスにリダイレクトは{path: '/tetsa', redirect: '/testb'}
名前指定は{path: '/tetsa', redirect: {name : 'hoge'}}

次回!

VueRouterクライマックス編! ついにVueの基礎学習が終わる!

参照文献

基礎から学ぶ Vue.js
https://www.amazon.co.jp/基礎から学ぶ-Vue-js-mio/dp/4863542453/