【ロピタルの学習記録 3/5】応用情報午前合格点取り戻せた〜

今日学校で応用情報の午前問題を解きました。前回は47/80で１問足らずでしたが、今回は53/80でなんとか取り戻すことができました

基本情報と比べて一つ踏み込んだ知識が問われるのでその都度覚えていきたいと思います

Javascript

非同期処理 〜リベンジ編〜

結構長くなったのと、なぜか教えるような文調で書いていたので、一つの記事としてまとめました。

ropitaru.hatenablog.com

非同期処理とPromiseらへんについては、結構理解できたと思います

Vue

コンポーネント

jp.vuejs.org

• グローバルコンポーネントはVue.componentメソッドで定義する
• ローカルコンポーネントはJavascriptオブジェクトとして定義して、componentsオプションに含める
• モジュールシステムを使用している場合、importすることでコンポーネントを使用できる
• inputやbuttonのような基底コンポーネントはよく使われるためグローバルに登録することができる↓

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

const requireComponent = require.context(
  // コンポーネントフォルダの相対パス
  './components',
  // サブフォルダ内を調べるかどうか
  false,
  // 基底コンポーネントのファイル名に一致させるのに使う正規表現
  /Base[A-Z]\w+\.(vue|js)$/
)

requireComponent.keys().forEach(fileName => {
  // コンポーネント設定を取得する
  const componentConfig = requireComponent(fileName)

  // コンポーネント名をパスカルケース (PascalCase) で取得する
  const componentName = upperFirst(
    camelCase(
      // フォルダの深さに関わらずファイル名を取得する
      fileName
        .split('/')
        .pop()
        .replace(/\.\w+$/, '')
    )
  )


  // コンポーネントをグローバル登録する
  Vue.component(
    componentName,
    // `export default` を使ってコンポーネントがエクスポートされた場合に存在する
    // `.default` でコンポーネントオプションを期待していて
    // 存在しない場合にはモジュールのルートにフォールバックします。
    componentConfig.default || componentConfig
  )
})

プロパティ

jp.vuejs.org

• プロパティはオブジェクトリテラルの形式で表現することで、型を指定することができる
• 動的な値もv-bindで束縛すれば割り当てられる
• 数値や真偽値の場合はJavascript式で表現しないといけないため、v-bindを使用する
• 親コンポーネントからデータを変更すると、子コンポーネントの値も変更される（逆は無理）
• 参照渡しの場合は親コンポーネントの値も変更されるので注意
• プロパティにバリデーションをかけることもできる
• inheritAttrs: falseを設定すると、属性の継承をしないようにできる

CSS

イケメンで説明超わかりやすいしまぶーさんの動画を見ました

www.youtube.com

応用情報

今回はなんとか取り戻せたということで少し安心です。でも午前は８割くらいまで伸ばしたい...あと１ヶ月ちょっと...ひえぇ

ということで復習をします。まだ途中ですが、今日やった分だけ。

スーパスカラ

スーパスカラは複数の命令パイプラインを利用し、１クロックで複数の命令を同時に実行できるようにした方式。

つまり命令を処理する小人が複数いるみたいな感じですかね

３層クライアントサーバシステム

• データベース層: データベースアクセスを行なう
• ファンクション層: 業務ロジックに従い、データ加工処理を行なう
• プレゼンテーション層: ユーザインタフェースを提供する

MVCアーキテクチャで言えば、データベース層がモデル、ファンクション層がコントローラ、プレゼンテーション層がビューかな

用語

• MEMS(Micro Electro Mechanical Systems)は微小な構造を持つ電気機器の総称
• SoCは一つの半導体チップにプロセッサやメモリなどをまとめたもの
• クロックゲーティングは、必要のない部品へのクロック共有を止めることで消費電力を減らす技術

TDCカレッジ

今日はWebサイトの土台部分を構築しました。具体的には、

• VueCLIでSPA作成
• Netlifyで自動デプロイの設定
• Sassで記述できるように設定

npm install sass-loader node-sass --save-dev

• Vue Routerの設定

tech-dig.jp

• グローバルでスタイル適用できるように設定

ashesrl.hatenablog.com

• リセットCSS (normalize.css)の読み込み

qiita.com

をしました。明日は実際に少し開発しながら便利に開発できるように整えていきたいと思います。

明日

インプット

• javascript: js-primer
• 応用情報: 復習
• MOS: 過去問

アウトプット

• TDCカレッジ: 少し開発
• Poeta: ホットリローダを使えるようにする

今日はTDCカレッジの土台作りに専念してしまって、ホットリローダとの格闘ができなかったので明日はなるべくやります...

おやすみなさい💤

Javascriptの非同期処理を本質から理解する エラーファーストコールバック・Promise

非同期処理

参考にさせていただいたサイト↓

jsprimer.net

非同期処理とは

非同期処理はコードがz軸に沿って浮いた状態のイメージとなる。例えば

console.log("1. setTimeoutに登録した関数を1秒後に実行します");

setTimeout(() => {
  console.log("3. 非同期処理が実行されています");
}, 1000);

console.log("2. 非同期処理より先に実行されます");

この場合、setTimeoutに登録した関数は非同期処理となり、プログラムは上から順に実行されるという僕の思い込みは打ち砕かれます。僕のイメージでは、setTimeoutに登録(引数として渡した)アロー関数は、1000msの間浮いた状態となります。

非同期処理と例外処理

非同期処理をtry...catchで例外キャッチしようとしてもできません。

try {
    setTimeout(() => {
        throw new Error("非同期的なエラー");
    }, 10);
} catch (error) {
    // 非同期エラーはキャッチできないため、この行は実行されません
}

try...catchの中に非同期処理を記述してはいますが、try...catchが実行される時、非同期処理は浮いているため、例外をキャッチできません。次のようにすれば例外をキャッチできます

setTimeout(() => {
  try {
    throw new Error("エラー");
  } catch (error) {
    console.log("エラーをキャッチできる");
  }
}

ですが、これでは非同期処理の外側に例外が発生したことを伝えることができません。なぜ外側に例外処理を伝える必要があるのかを考えていきます

例えば、サーバからデータを取ってくるという非同期な処理と、データを加工するという処理をするとします。もしこれを非同期処理の中で全部実行するなら例外を外側へ伝える必要はありあませんが、データを加工する処理を分離すると、そのデータを加工する処理に、「データ取ってくるの失敗しちゃった😭」と伝える必要があるのです。

そしたらデータを加工する処理は条件分岐で、成功したらconst title = response.title、失敗したらリダイレクトとすることがきます。

エラーファーストコールバック

具体例をみてみます

function dummyFetch(path, callback) {
    setTimeout(() => {
        // /success からはじまるパスにはリソースがあるという設定
        if (path.startsWith("/success")) {
            callback(null, { body: `Response body of ${path}` });
        } else {
            callback(new Error("NOT FOUND"));
        }
    }, 1000 * Math.random());
}
// /success/data にリソースが存在するので、`response`にはデータが入る
dummyFetch("/success/data", (error, response) => {
    if (error) {
        // この行は実行されません
    } else {
        console.log(response); // => { body: "Response body of /success/data" }
    }
});
// /failure/data にリソースは存在しないので、`error`にはエラーオブジェクトが入る
dummyFetch("/failure/data", (error, response) => {
    if (error) {
        console.log(error.message); // => "NOT FOUND"
    } else {
        // この行は実行されません
    }
});

分離しなきゃいいじゃん！って思うかもしれませんが、データ加工処理はページ毎などに変わる可能性が高いので、その度にdummyFetch関数を記述しなければいけなくなり、やばいほどに冗長です。

ちなみに、上のコードように、データ加工処理をするコールバック関数の第一引数にエラーオブジェクトを入れて、その中で条件分岐する方法をエラーファーストコールバックと呼ぶそうです

今このような記述をすることはほとんどないと思いますが、過去のコードでガチャガチャするときに必要になると思います。

Promise

エラーファーストコールバックとは異なり、非同期処理（asyncPromiseTask関数）はPromiseインスタンスを返しています。 その返されたPromiseインスタンスに対して、成功と失敗時の処理をそれぞれコールバック関数として渡すという形になります。

// asyncPromiseTask関数はPromiseインスタンスを返す
asyncPromiseTask().then(()=> {
    // 非同期処理が成功したときの処理
}).catch(() => {
    // 非同期処理が失敗したときの処理
});

Promiseインスタンスの生成

イメージとしては、非同期処理を行なう関数をpromiseインスタンスに格納する。

const executor = (resolve, reject) => {
    // 非同期の処理が成功したときはresolveを呼ぶ
    // 非同期の処理が失敗したときはrejectを呼ぶ
};
const promise = new Promise(executor);

条件分岐

thenメソッドで、成功時と失敗時の関数を登録します。

// `Promise`インスタンスを作成
const promise = new Promise((resolve, reject) => {
  if(true) {
    resolve();
  } else {
    reject();
  }
});
const onFulfilled = () => {
    console.log("resolveされたときに呼ばれる");
};
const onRejected = () => {
    console.log("rejectされたときに呼ばれる");
};
// `then`メソッドで成功時と失敗時に呼ばれるコールバック関数を登録
promise.then(onFulfilled, onRejected);

ただ、これだとpromiseインスタンスが一つしかないため、promiseインスタンス工場を作成して、何度呼び出しても、新鮮なPromiseインスタンスを使用することができます。そしてこの例は上の例よりもよく使う形に近い表現で書かれています

function dummyFetch(path) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (path.startsWith("/success")) {
                resolve({ body: `Response body of ${path}` });
            } else {
                reject(new Error("NOT FOUND"));
            }
        }, 1000 * Math.random());
    });
}
// `then`メソッドで成功時と失敗時に呼ばれるコールバック関数を登録
// /success/data のリソースは存在するので成功しonFulfilledが呼ばれる
dummyFetch("/success/data").then(function onFulfilled(response) {
    console.log(response); // => { body: "Response body of /success/data" }
}, function onRejected(error) {
    // この行は実行されません
});

補足ですが、成功時だけ登録したい場合、第二引数を省略すれば良いですが、失敗時だけ登録したい場合は、第一引数にundefinedを書く必要があり、冗長で不恰好なため次のようにcatchで登録することができます

dummyFetch("/failure/data").catch(error => {
    console.log(error.message);
});

ここまで理解できれば多分あとはスラスラいけるのでここからはjs-primerさんに任せます。

続き↓

jsprimer.net

このあと読むと良い記事（ここでもjs-primer）

jsprimer.net

【ロピタルの学習記録 3/4】応用情報とJavascript

Javascript

非同期処理

jsprimer.net

• 非同期処理が終わるのを待たずに、次の処理を実行する
• 非同期処理はtry...catchで非同期に発生した例外をキャッチできない
• 非同期処理の外へ例外を伝える手段が必要
• コールバック関数の第１引数にエラーオブジェクトかnullを入れるルールをエラーファーストコールバックという↓
• 成功時と失敗時のコールバックをそれぞれ渡す方法もある

応用情報

午後問題の復習をしました

セキュリティ

• SSL(Secure Socket Layer)はTLS(Transport Layer Security)の前身である

ネットワーク

• リンク完全性テストはPCをLANケーブルに接続すると、接続されたケーブルが物理レベルで正常に動作するかチェックするために行われる
• オートネゴシエーションは、最大の伝送能力が発揮できる組み合わせから通信が可能か確認する

データベース

• 繰り返し項目を無くすと第一正規形、部分関数従属している部分を分離すると第二正規形、推移関数従属している部分を分離すると第三正規形になる

TDCカレッジ

考えていたビジネスを実際に形にしていくことにしました。多分莫大な利益をうむわけではないと思いますが、ある程度はうんでくれるかなって感じです。

必要な機能やシステムの仕組みや実現方法、運営方法など色々考えながら調べ物をしました。

最初はFirebaseとVueなど作成しようとしましたが、なかなか実装イメージが湧かなかったので色々調べてみたところ、結構原始的な方法の方が管理しやすいことがわかったのでそっちでやっていこうと思います。

下準備も色々とあるのでコツコツと頑張っていきます٩( ᐛ )و

明日

インプット

• 応用情報: 午前過去問
• MOS(Excel): 過去問
• Javascript: js-primer　非同期処理

アウトプット

• TDCカレッジ: VueかNuxtで土台作成
• Poeta: ホットリロードに関するエラーと戦う

明日は結構詰め込みましたがインプットとPoetaだけは最低限やりたいと思います。特に最近はホットリロードがおかしくなっちゃって早く解決しないと進まないので頑張って解決したいと思います！おやすみなさい💤

【ロピタルの学習記録 3/2】食事制限と筋トレを開始するぅ

最近炭水化物取りすぎて少し顔とお腹に脂肪がついた感があるので運動と食事制限をしていこうと思います🍅

まず炭水化物を朝以外は取らないようにして運動はタバタ式を1日1回やるって感じにしようかな

僕はもともと骨格が細いタイプで、前に１回これやりすぎて実家に帰った時におばあちゃんの目から涙がこぼれ落ちたので適度にやりたいと思います☺️

Vue

イベントハンドリング

jp.vuejs.org

• v-onディレクティブを使えばclickイベント時などにJavascriptを式を実行することができる
• 属性値にメソッド名を書くことも、インラインJavascript式で引数を渡すこともできる
• 色々なイベント修飾子が存在する
• event.preventDefault()はeventのデフォルトの挙動を回避する
• キーボードイベントを登録することもできる

「 event.preventDefault()はeventのデフォルトの挙動を回避する」これについては、input要素などでshiftを押すとデフォルトで次の要素にフォーカスしますが、それを避けてインデントすることができるのかな？開発中のアプリでその挙動が欲しいから使えそう

コンポーネントの基本

jp.vuejs.org

• コンポーネントを使用するたびに新しいインスタンスが生成される
• dataは関数でないといけない

ダメな例

data: {
  count: 0
}

良い例

data: function () {
  return {
    count: 0
  }
}

ダメな例の場合、ドラえもんの複数のポケットが全部繋がったスペアポケット的な感じなクラス変数的な感じになるが、良い例の場合、それぞれ独立したポケットが生成される感じ。うん

Javascript

クラス

jsprimer.net

• set, getをつけることで、アクセッサプロパティを定義することができる
• プロパティ名の先頭にアンダーバーをつけることによって読み書きして欲しくない値ということを示している
• 静的メソッドはstaticをメソッド名の前につける
• クラスの静的メソッドにおけるthisはクラス自身を参照する
• staticをつけるとthisが静的（絶対的に自身のクラスを参照する）からクラスメソッドとして使用する
• プロトタイプメソッドよりもインスタンス自身に対して定義したメソッドが優先される
• 継承によって親クラスの構造や機能を引き継ぐことができる
• クラスはプロトタイプオブジェクトの参照先に親と同じ場所を格納することで実現している

例外処理

jsprimer.net

• 例外を投げることができる
• 例外のオブジェクトはErrorを投げる（スタックトレースを得るため）
• パース＝変換
• try...catchは実行時エラーを扱う
• ビルトインエラーを投げることもできる(TypeErrorなど)
• スタックトレースの最初の行が例外が発生した場所

応用情報

今日は午後の問題を初めて試験形式（２時間半）で解きました。結果は丁度６割くらいでした。午前も午後もちょうど６割前後なので１ヶ月ちょっとしっかり対策をすればいけそうな予感（合格が６割）

できれば８割までもっていきたいです。アルゴリズムは今回満点だったので、データベースも満点レベルまで伸ばして他は1〜2問ミスくらいに抑えたいかな

明日

インプット

• Javascript: js-primer
• Vue: 公式ドキュメント
• AWS: 本
• 応用情報復習

アウトプット

• Vue: 作成物を決める

急遽色々あってアプリ開発を進められていないですが、そんなに急ぎではないので、もう一つ自分で何か開発したりしてアウトプットして行こうと思います！おやすみんなさい

【ロピタルの学習記録 2/29】コロナの影響でガイダンスが全然ない2021卒の就活について

コロナの影響で企業説明会やガイダンスなどが減って企業との出会いの場が激減しましたねぇ。

まず予想されるのが、企業の説明やガイダンスが延期され、必然的に採用時期も遅くなるということ。そして2021卒の採用人数も減らすということ。

企業の視点からみても出会いの場が少なく、あまり採用ができずに今年採用人数を減らすという対処と採用時期を遅らせるという対処を取ってくると思います。もしこの状況が落ち着かないようであれば、採用人数を減らすという一択かもしれません。

ガイダンスという受動的な出会いの場はなくなってくるので、もちろん能動的に出会いの場を作るしかありません。そうなってくると活用されるのはインターネットですねぇ。今年は、自分から動いた人は例年に比べても同じくらいの時期に就職できるかもしれませんが、動かなかったらどうなることやら。

そしてドラえもん面白かった。新恐竜早くみたいなぁ...

Javascript

さて、Javascriptですが、もちろん今日もインプット。

jsprimer.net

js-primerの項目をみて思ったのですが、コンストラクタ関数については説明がないっぽい？もうclassがメインなんですかね。classは多分明日やります。あとクロージャーの復習もせねば。

thisが問題となる時の対処法

• applyメソッドは第一引数にthisとなるオブジェクトを、第二引数には関数の引数を配列で渡す
• bindメソッドは第一引数にthisとなるオブジェクトを、第二引数には関数の引数を渡してthisをバインドする
• thisを一時的に変数に格納して、それを参照するという方法もある
• アロー関数は外側のthisを探索する
• アロー関数はthisを静的に決定する
• アロー関数はthisをしていできない(call, apply, bindなどで)

アプリ開発

今日はミドルウェアとフラッシュ機能を作成していきます

ミドルウェア

公式に書いてありました

ja.nuxtjs.org

ミドルウェアの部分丸パクリしたらできました☺️少し変えてこんな感じ

export default {
    middleware({ store, redirect }) {
        if(!store.state.isAuthenticated) {
            redirect('/user/login');
        }
  },
}

簡単にできたのは良いのですが、なぜか名前付きミドルウェアは実装できなかったんですよね。色々やってみてもダメだったのでお預けにします。そして、これだけだと流石に知識がつかないのでミドルウェアについて調べていきます

ja.nuxtjs.org

ページなどがレンダリングされる前に定義・実行する関数みたいですね。つまり、ログインしていなくて、記事を投稿するページなどに行くと、先にログインしているかを判定する関数を実行して、ログインしていなけれなログインページにリダイレクト。ログインしていたらレンダリングみたいな感じらしいです。

フラッシュ機能

この記事を参考に実装しました。

qiita.com

上の記事では、ページ遷移をした後にフラッシュが消えるようになっていますが、僕はボタンを押したらすぐに消えて、ボタンを幼かったらライフサイクルフックのmountedをトリガーに3秒経過後に消すという実装にしました。

そこで躓いたのがthis

 mounted() {
  const self = this
  setTimeout( () => {
    this.$store.dispatch('showFlashMessage',{text: null})
  }, 3000);
}

このように書いたのですが、もちろんエラーが出ます。今回はdispatchプロパティが定義されていませんって出ました。ですがこれはちょうど昨日javascriptの学習でやったところで、thisが原因だとわかり次のように修正しました。

mounted() {
  const self = this
  setTimeout( () => {
    self.$store.dispatch('showFlashMessage',{text: null})
  }, 3000);
}

確認はしてないですが多分これでも行けるかな？

mounted() {
  setTimeout( function() {
    self.$store.dispatch('showFlashMessage',{text: null})
  }.bind(this), 3000);
}

昨日の記事でも書いた気がしますが、arrow functionはbindができないので、functionで関数を宣言し、thisをbindしています。

そしてできあがった全体像がこれ

<template>
<div>
  <notification
    class="mb-3"
    color="info"
    v-if="$store.state.text"
    >
    {{ $store.state.text }}
  </notification>  
  <!-- <button v-on:click="del">隠す</button> -->
</div>
</template>

<script>
import notification from '~/components/material/notification'

  export default {
    components: {
      notification
    },
    methods: {
        del() {
          this.$store.dispatch('showFlashMessage', {text: null})
        }
    },
    mounted() {
      const self = this
      setTimeout( () => {
        self.$store.dispatch('showFlashMessage',{text: null})
      }, 3000);
    }
  }
</script>

ひと段落ついたと思ったらスクロールがずれているとNuxtのデフォルトのページ遷移時のスクロールセーブによって、フラッシュが見えないんですよね。んで公式を参考にやってみたけどなぜかできない。

ja.nuxtjs.org

この記事にあるリンクもたどったりして色々やってみたんですけどできなかったんですよね...😭どなたかヘルプしてください。

今日は他にもやることあるので開発は午前中で終わりにします

応用情報

応用情報ただ単に昨日の復習をしました。結構復習時間がかかるんですよねぇ。復習してみると、マジでちゃんと問題文読めよこのやろうって奴が多かったのでちゃんど問題文は読むようにしたいと思いますぅ

明日

ドラえもん見てたりしたら結構時間たっちゃったので今日はここらへんで終わりにします

インプット

• Javascript: js-primer( classらへん )
• Javascript: パーフェクトJavascript( Websocketらへん )

アウトプット

• Team Poeta会議
• アプリ開発: ユーザ編集画面の作成

今週は結構量が少なめでしたが、開発を結構進められたので満足☺️　明日も力を抜いて少し量は少なめでやりたいと思います。おやすみなし〜

【ロピタルの学習記録 2/28】

今日は応用情報の午前問題を解きました！でもやっぱり時間が空いたのもあってショッキングでした😭まさかの47/80

合格点は48/80ですが１点足りませんでした...ぴえーーーーーーん🥺　まぁ午前はこれからの復習と積み重ねが大事なのでコツコツとやっていきます。午後はなんとかします。

あ、あと久しぶりにカフェで、芯があってめっちゃ綺麗な声のお姉さんに一週間ぶりくらいに合いました。素敵な声なんですよね

アプリ開発

さてアプリ開発ですが、今日は昨日実装できなかったログアウト機能。学校から帰って色々みていると、DELETEリクエストのヘッダにCookieが含まれていませんでした。

試しにこのChrome拡張機能でCookieを含めてDELETEリクエストを送信したら無事ログアウトできたのでサーバに問題があるわけではないっぽいです

chrome.google.com

色々headerにデータを含める方法を探してたらこんな感じでできるっぽいのでやってみたところすんなりできました。

axios.delete('URL', { headers: { "access-token": "AS6JA3O43qRSr"} })

ふぅ...あとはフラッシュ（ログインしたら「ログインしました」とか出るやつ）とかも作らねば。でも今日は開発終わります😚

Vue

今回の節はほとんど知っていましたが、属性値が動的に変更できるのは初めて知りました。

jp.vuejs.org

Javascript

thisについて

jsprimer.net

コンテキストによる違い

• トップレベルスコープのthisはグローバルオブジェクトとなる(windowなど)
• 実行コンテキストがScriptの場合、ブラウザならwindowオブジェクト
• 実行コンテキストがModuleの場合、undefined
• グローバルオブジェクトを参照する場合、thisは使わない

関数宣言による違い

• thisは基本的にベースオブジェクトとなる
• ベースオブジェクトがない場合はundefinedとなる
• callメソッドでベースオブジェクトを指定できる

const person1 = {
  fullName: "Ropital Johnson",
  sayName() {
    return this.fullName;
  }
};

let say = person1.say;

say.call(person1); 
// => "Ropital Johnsin"

今日は半分すすめたところで終わります。飽きたので

明日

インプット

• 応用情報　復習
• Javascript: js-primer

アウトプット

• ITDカレッジのWebサイトデザイン
• アプリ開発　ミドルウェアの作成 + フラッシュの作成
• Paypalの設定

最近思ったんですけど、インプット飽きてきました笑　今開発で必要なやつだったら必死に理解してインプットするんですけど、だた単にインプットするのは苦手ですね^^;　

Javascriptのjs-primerは最低限やらないといけないですが、Vueはまた開発で必要になった時にアウトプットしながら理解していきます！今日も1日お疲れ様です、おやすみんっ😴

【ロピタルの学習記録 2/27】応用情報の対策授業が始まる...

今日は勉強は半日くらいだった気がします。今日もカフェに行ったのですが、12時過ぎに行ったので仕事の休憩中の人が結構並んでて12時を境目に結構差が激しいなと感じました。

んでそのあとはYoutubeとかテレビみて休憩してました。ちなみにYoutubeはオウム真理教のやつみてました。なんかああいうのってみたくなりますよね

そして、明日から学校で資格対策の授業が始まるので頑張っていきます☺️大体２ヶ月間ですかね。そろそろ自分でもやらないと厳しそうなのですが、アプリ開発とプログラミングの勉強と資格の勉強全部できるかどうか...　

まぁ僕はあまり自分を追い込まないタイプで、好きな時に好きなことをやるタイプなので多分病むことはないでしょう笑

アプリ開発

フォームバリデーション

公式に書いてあったので、これを参考に作成しました

jp.vuejs.org

結果的にこんな感じで実装しました（一部抜粋）↓

watch: {
        email: function(e) {
            if ( this.email&&this.password&&this.password.length>=8 ) {
                this.isNotValid = false;
            }else {
                this.isNotValid = true;
            }
        },
        password: function(e) {
            if ( this.email&&this.password&&this.password.length>=8 ) {
                this.isNotValid = false;
            }else {
                this.isNotValid = true;
            }
        }
    }

なにをしたかというと、emailとpasswordの値の変更をトリガーにisNotValid(有効ではない)フラグを切り替えます。

isNotValidがfalseのときは有効なので、ボタンが押せるようにし、trueの時は、ボタンを押せなくしています。そのボタン部分のコードはこんな感じです

<v-btn v-bind:disabled="isNotValid" v-on:click="login" class="info" large block>ログイン</v-btn>

今日はこれで終わりましたが、まだ完成していなくて、値を送信した時に認証されなかった時のエラー表示ができていません。これは実装しようとしたのですが、サーバで実行する時とブラウザで実行する時の値が違うという警告が出るのでまたゆっくりトレースして試してみます。

あと、ウォッチャは特定の値の変更をトリガーにして指定したメソッドを実行するのですが、算出プロパティでもっと短くかけそうなきが...でも算出プロパティはデフォルトがgetterで確かreturnで値を返さないと確かエラーが出るので少々工夫する必要がありそうです。

権限

このことをなんていうのかよくわかりませんが、ログインしていなかったら特定のページにはアクセスできませんよ的なやつですね。

んで、今日これも実装しようと思ったのですが、ログアウト機能も必要なことに気づいて、DELETEでリクエスト投げて、Cookie削除して、Storeも削除してってやろうと思ったんですけど、なぜかNot Foundになるんですよね。どっかにケアレスミスしてるのかもしれないのでまたゆっくりみてみます

情報収集

今日は気になっているGraphQLの記事と、そこから見つけたOpenAPIについての記事を読みました。今ちょうどマイクロサービスアーキテクチャでWebアプリを作成していて、クライアントサイドとサーバサイドの連携が難しくて少しづつ工夫していましたが、OpenAPIを使えばスムーズになりそうです。

一つ目の記事は、Web開発のトレンドなどの全体像が掴めるし、GraphQLについてもわかり易いしかなり良い記事ですね。しかもちょうど今チームで開発しているサービスで使っているRailsとNuxtで実装する例が扱われていてイメージがわきやすかったです。

簡単にまとめると、GraphQLを使うとWeb、iOS、Androidなどそれぞれのクライアントから要求するデータが異なってもエンドポイントが一つで済むって感じですかね。

qiita.com

future-architect.github.io

今開発中のアプリが一通り終わったら、アプリの改善をしながら、GraphQL、Apollo Clientを使用したアプリを開発してみたいですね

明日

インプット

• 資格対策(学校)
• Javascript

アウトプット

• アプリ開発（ログアウト機能）

明日から資格対策で帰ったら気が向いたら復習もしないといけないのでJavascriptできないかもですがまぁゆっくりやっていきます。おやすみなさい〜(^^)／~~~