【ロピタルの学習記録　2/26】朝カフェはショートカット美女が多い

今日は朝カフェ久しぶりに行ったのですが、やはり人が少なくて快適でした。晴れてたのも良かった🌞あと、なぜか朝はショートカット美女の確率が高かった。良い勉強になりました

それでは学習記録へ

Javascript

相変わらずのjs-primerでインプット。結構１セクションが長くなってきましたが、コツコツやっていきます

ラッパーオブジェクト

  • プリミティブ型がなぜメソッド呼び出しできるのか
  • プリミティブ型の値に対してプロパティアクセスする際に、自動的にラッパーオブジェクトに変換される
  • インスタンス化するのは冗長なためリテラル表現でプリミティブ型で定義するようにする

関数とスコープ

  • スコープ内では同じ名前の変数は定義できない(varは例外)
  • 内側のブロックスコープから変数を探す（スコープチェーン）
  • グローバススコープで定義した変数はグローバル変数となる
  • グローバルスコープにはビルトインオブジェクトが自動的に定義される
  • 変数の参照できる範囲を小さくする（関数など）
  • 関数宣言とvarは巻き上げが起きる
  • varで宣言するときは、即時実行関数によってグローバルスコープの汚染を避ける
  • Javascriptは静的スコープ
  • クロージャー
function createCounter() {
  let count = 0;
  return function increment() {
    count += 1;
    return count;
  }
}

const counter1 = createCounter();
console.log(counter1) // => 1
console.log(counter1) // => 2

const counter2 = createCounter();
console.log(counter2) // => 1
console.log(counter2) // => 2

クロージャーが静的スコープとメモリ管理の特性を活かして成り立っているのは理解できましたが、最後の方は曖昧なのでまた今度復習します

Vue

今日もVueはインプットです。

jp.vuejs.org

  • dataプロパティに追加した値は全てリアクティブに追加される
  • 値を変更すると、ビューが再レンダリングされる
  • Vueインスタンスはあらかじめ便利なプロパティやメソッドを保持しており、それらには$が付いている
  • 初期化の過程でフックされるライフサイクルフックが存在する
  • 全てのライフサイクルフックはthisがvueインスタンスを示す
  • アロー関数はthisを持たないため、インスタンスプロパティでは使用してはいけない

アプリ開発

SSRが発生した時に、Cookieを扱えないという問題点

参考にした記事はこの子たち

qiita.com

qiita.com

ja.nuxtjs.org

また、リクエストヘッダーにaccess-token以外も含めたかったため、以下の記事を参考にしました

qiita.com

そして思ったんだけど、storeにCookieとか保存するのセキュリティ的にやばいですよね？しかも、書き方かなり冗長だしわかりにくいしこんなの仕事で書いたらレビューでボコボコにされそう...(•'-'•)

import axios from 'axios'
const cookieparser = process.server ? require('cookieparser') : undefined

export const state = () => {
  return {
    access_token: '',
    uid: '',
    client: '',
    id: ''
  }
}
export const mutations = {
  setUser (state, res) {
    state.access_token = res.headers['access-token']
    state.uid = res.headers['uid']
    state.client = res.headers['client']
    state.id = res.data.data.id
  },
  setHeader (state, header) {
    state.access_token = header['access-token']
    state.uid = header['uid']
    state.client = header['client']
  }
}

export const actions = {
    async login ({ commit }, { email, password }) {
      try {
        await axios.post('http://localhost:3000/api/v1/auth/sign_in', { email, password }
        ).then(res => {
            console.log(res)
            console.log(res.data.data.uid)
            commit('setUser', res)
        })
      } catch (error) {
        if (error.response && error.response.status === 401) {
          throw new Error('Bad credentials')
        }
        throw error
      }
    },
    nuxtServerInit ({ commit }, { req }) {
      if (req.headers.cookie) {
        const parsed = cookieparser.parse(req.headers.cookie)
        try {
          console.log(parsed)
          commit('setHeader', parsed)
        } catch (err) {
          // No valid cookie found
        }
      }
    }
  }

レイアウトの作成

全体のレイアウトを作成しました。こんな感じ↓

f:id:ropitaru:20200226213431p:plain
ログイン画面

assetsの管理

common.scssというスタイルシートをどのコンポーネントでも反映できるようにしました。ですが、謎にvariable.scssは反映されないのでまた今度やってみます

qiita.com

教養

今日は今後アプリに必要になってくるので、OAuthについて調べました。この記事がわかりやすかったです

qiita.com

明日

インプット

  • Javascript: js-primer
  • Vue: 公式ドキュメント

アウトプット

  • ユーザ管理機能の実装（バリデーション、認可）

今日は色々知識を得られて満足です☺️明日も頑張りましょう。お休みなさい〜