2020-02-26

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

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

それでは学習記録へ

Javascript
- ラッパーオブジェクト
- 関数とスコープ
Vue
アプリ開発
教養
明日
- インプット
- アウトプット

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

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: 公式ドキュメント

アウトプット

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

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

2020-02-25

【ロピタルの学習記録　2/25】RailsとNuxtでユーザ管理機能

今日は学校でプレゼン大会がありましたが思った以上に面白いテーマで楽しませてもらいました！そして明日、明後日はガイダンスの予定だったのですが、中止になりました＼(^o^)／

しっかりとなにやるかだけ決めておこう。晴れてたら宮島にでも行こうかな〜🍁

Nuxt
Vue
明日
- インプット
- アウトプット

Nuxt

さて、Nuxtですが、今日は開発中のWebアプリでフロントからRailsAPIを叩き、ユーザ管理をするシステムの初歩部分ができました。簡単に、何をやったか説明すると、

新規登録画面からRailsAPIにフォーム入力したものを投げる
成功したら、メール確認画面へリダイレクト
ログイン画面へ
ログイン画面からログインしたらマイページでユーザ情報表示

みたいな感じです。具体的なコードはこんな感じ

store/index.js↓

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

export const state = () => {
  return {
    access_token: null,
    uid: null,
    id: ''
  }
}
export const mutations = {
  setUser (state, res) {
    state.access_token = res.headers['access-token']
    state.uid = res.data.data.uid
    state.id = res.data.data.id
    // state.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
      }
    },
  
  }

pages/user/login.vueのscript部分下

data: () => ({
        showPassword: false,
        password: "",
        email: "",
        rules: {
          required: value => { return !!value || 'Required.'  },
          min: value => { return value.length >= 8 || 'Min 8 characters'} ,
        }
    }),
    methods: {
        async login() {
            try {
                console.log("vrav")
                await this.$store.dispatch('login', {
                  email: this.email,
                  password: this.password
                })
                Cookie.set("access-token", this.$store.state.access_token)
                this.$router.push(`/user/${this.$store.state.id}`)
            } catch (e) {
                this.formError = e.message
                console.log(this.formError)
            }
        },
  }

でもまだ、全然問題点ばかりで、その回避の方法もわかっていないので手探りしながらインプットをしないといけない状態です。現在見つかっている問題点は、ページをリロードすると404エラーが出るという問題です。

これは、Nuxtのユニバーサルアプリケーションの場合に起きるエラーです。

Nuxtで作成できるアプリは３つあります。静的ページとSPAとユニバーサルです。

ja.nuxtjs.org

ユニバーサルは初回アクセス時はサーバ上でAPIからデータを取ってきたりして、一つのページを生成します。そしてリンクを踏んで移動する時は、ブラウザからAPIを叩き、データを取ってきます。こんな動作をするユニバーサルアプリですが、初回アクセス時は、動的ルートが生成されないみたいです。具体的にはuser/_id.vueなどのファイルです

Nuxtのドキュメントを読んだ感じ、generateの設定にルートをあらかじめ設定して生成するようにしておけば良いみたいですが、このやり方だと、レスポンスタイムが遅くなる気がして、まだ実装していません。動的ルートを使うアプリケーションは多いはずなのに検索してみた感じ解決策もあまり見つからないので、現在模索中です

あと、バリデーションと認可、そしてリクエストヘッダにaccess-tokenに加えあと二つの情報を付加する必要もあります。多分他に色々出てきそう...ぴょえん

Vue

今日はVueの基本的な部分をドキュメントで見直しました。Vueの特性、目的、基本的なディレクティブ、コンポーネントあたりです。偏頭痛が途中からひどくなってきてリタイアしました

jp.vuejs.org

明日

インプット

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

アウトプット

Nuxt: ユーザ管理機能中盤

早くユーザ管理機能を完璧に実装したい！コツコツと完成させていきます。できれば今週中に終わらせたい... おやすみなさい😴

2020-02-23

【ロピタルの学習記録　2/23】Nuxtの理解を深める。AsyncDataについて

今日はTeam Poetaのミーティングがありました（Poetaはそのミーティングで決まりました！可愛いでしょ？）

チームは３人でやっていて、僕は主にフロントエンドを担当しています。元々サーバサイドやってましたが追い出されました☺️でもめっちゃいい機会でしたね！まだフロント歴１ヶ月くらいですが、１つ開発したいアプリを決めて勉強するとかなり早く習得できますね

このままフロントエンドエンジニアになるのも全然ありかな〜？って思い始めてます

Nuxt

今日はAsyncDataの必要性が疑問だったので考えたり調べたりしてみました

AsyncDataとは

まずこいつは初回のレンダリング時とページ遷移時に呼び出されるみたいです。そして、初回レンダリング時はサーバ側で実行されて（SSR）、ページ遷移時はクライアントで実行される（CSR）って感じらしいです。

んで、この二つのタイミングで実行する際にデータを取得するためにAxiosで通信します。初回はサーバ側で、２回目以降はブラウザ上で実行されるのでそもそも環境が違いますが、AxiosのisomorphicによってNode.js（サーバ上で動くJavascript）でもブラウザ環境でも動作するので心配はご無用って感じです

つまり、AsyncDataとAxiosの組み合わせによって、初回レンダリング時にはサーバ側で実行し、それ以降はブラウザ上で実行するということが可能になるというわけです

AsyncDataはなぜ変な挙動をするのか

※SPAという前提の話になります

じゃあ、なんでこんな面倒な挙動をするのか。だって、HTMLとCSSとJavascriptをブラウザ上にダウンロードしてからJavascriptを実行してサーバにデータを取りに行った方がブラウザからは部分的な表示は早くなります。

なぜ面倒な挙動をするのかというと、SEO対策です。クローラはそのサイトにどんなこと書いてあるのか分析して検索結果の上位に表示したりしますが、クローラはJavascriptが実行されるのをまたずに次に行ってしまいます。

なので、サーバ側でJavascriptを先に実行してからページを返すことによって、SEO対策になるのですぅ

Javascript

文字列の部分は眠たかったのでぶっとばしました☺️

jsprimer.net

アプリ開発

ログイン画面を作成して、NuxtのAuth-Moduleを使用してRailsAPIを叩き、ログインできるようにしました。

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

とりあえずって感じのUIですが、試作した大枠に合わせて改善していきます（位置もずれてるし）

ただ、ログイン後の状態を維持するにはVuexが必要みたいなので勉強します。というかNuxt使うなら必須みたいですね

明日はNuxtのドキュメントとVuexのドキュメントを丁寧に読むことにします。おやすみなさい

2020-02-23

【ロピタルの学習記録　2/22】Nuxt.jsで認証機能を実現したいんじゃあ

認証機能

認証機能

qiita.com

いきなり認証機能を実装しようとするのは無理がありました(//∇//)\

SSR(Server Side Rendering) についてや、その処理の中で使用する技術（AsyncData)など色々知らないと理解できないっぽいので学習を切り替えます

SSR・CSR

SSRや非同期通信については NuxtガイドやVueガイドなどでインプットしていきます

nazo.hatenablog.com

omiend.hatenablog.jp

asyncData

ja.nuxtjs.org

このメソッドは、ブラウザからサーバにアクセスした時とページ遷移をするときに呼び出されるみたいです。ページ遷移をするときに呼び出されるということは、サーバに送られるHTTPリクエストにログイントークンが存在すればこのユーザはログイン済みみたいなことも可能なのかな...？

ただし、このメソッドはコンポーネントがロードされる前に実行されるみたいなのでコンポーネントのdataオブジェクトにあるプロパティにはアクセスできないということに注意しなければならないみたいです。

このメソッドはただ単に非同期を実現するためではなく、データを引数にとって処理をしてくれるらしい。つまり、このメソッドにパラメータを渡し、axiosを用いてHTTP通信をするみたい。あれ、でもAxiosもPromiseベースに作成されたモジュールだから非同期処理できなかったっけ？って思ったので忘れかけてたPromiseについて調べてみます

qiita.com

わかりやすかった！とりあえずプロミスについては理解できました。ですが、PromiseベースのAxiosとの違いがよくわからないのでAxiosについてみてみることに

jp.vuejs.org

AxiosはPromiseのHTTP通信特化型みたいなイメージで大丈夫ですかね？Promiseは非同期全般で、AxiosはHTTP通信のための非同期みたいな？かんじ？（わかる方はもしよろしければコメントでこの解釈があっているか教えていただけると助かります🙇‍♀️）

でも、それだったらAxiosでthis.emailとthis.passwordとかでHTTPリクエストに入れて運べば別にAsyncDataは必要ない気がしますがなぜ必要なのでしょうか？

多分これは認証のために使うのではなく、ユーザIDをパラメータに渡し、マイページの名前や、項目を取得するために使うのが一般的なのかな？

とりあえず動作については理解できたので、実際にアプリで使う場面をイメージしてみます

マイページ

asyncData( { id: 3 } ) みたいな感じでパラメータを渡す
Axiosでアクセス（ID3のユーザのマイページなど: example.com/user/3）
レスポンスオブジェクトからプロパティ抽出してレンダリング
失敗したらエラー表示

まだまだ抽象的だけどこんな感じかな？

Authモジュールの発掘成功

そんなこんなしてたらAuthモジュールを発掘。わーい、わーい

ja.nuxtjs.org

qiita.com

ですが

Axiosの使い方
JWTとは
Authモジュールの使い方

について学習しないと読み解けそうにないんでやっていきまーーーーしゅ

f:id:ropitaru:20200222122142p:plain — しゅ

参考にした記事

qiita.com

ちょっと長くなったので今日はここらへんでブチ切ります。おやすみなさい

2020-02-21

【ロピタルの学習記録　2/21】カフェは美女が多い

木金土日月と５連休なのでJavascriptのインプットとチーム開発のためのインプットや実際に開発をしていきたいところです

最近はカフェでJavascriptのインプットをしていますが、やはり家よりかなり捗りますね。逆にアドレナリンでまくりの開発は家でやるのが絶対に効率が良いと感じました

てかカフェってなぜか美男美女が多いんですよね。だから僕は美女を見に行くついでに勉強しています

Nuxt
- Vuetify
Javascript
明日
- インプット
- アウトプット

Nuxt

Vuetify

Vuetifyで遊びながらアプリ開発を進めました。最初はかなり苦戦しましたがある程度慣れてきていい感じぃ😎

大まかな機能も掴めて、Nuxtでの開発にも慣れてきました

Javascript

Javascriptは今日もこちらのサイトでインプットを進めました

jsprimer.net

ほとんど全てのオブジェクトはObject.prototypeプロパティに定義されたprototypeオブジェクトを継承している
Object.prototype.toString = Object#toString
Object#hasOwnPropertyはカスタムオブジェクト自身が所持しているプロパティの場合true
Object.createメソッドで引数に指定したオブジェクトを継承してオブジェクトを作成することができる
配列中の参照型のオブジェクトはArray#findIndexで検索できる
配列にある値が存在するかを確認する場合はindexOfではなくincludeメソッドで確認する(可読性)
配列を結合したりする場合はSpread構文かArray#concatメソッドを使用する
配列をフラットにするにはArray#flatメソッドを使用する
破壊的なメソッドにはコメントを明示的に記述する
配列には加工するための様々な高階関数が存在する

量が多くてなかなか進みませんね（ ; ; ）でも着実に理解していますね。

表現の仕方がわかりやすいのか、この記事だと今まで理解できなかったところがスラスラ頭に入ってきます💃あと、ところどころ復習要素も入っているので本当にこのサイトはおすすめです。無料っていうのが信じられないでごじゃる

明日

明日はNuxtのログイン周りの知識を増やしていきたいですね！今日もこの二つの記事少し見てみたんですけど、ややややこしい感じですね

hisasann.github.io

github.com

インプット

Javascript
Nuxtログイン周りの知識

アウトプット

ログイン機能実験（アプリ開発）

そういえば、応用情報の勉強もせんとや。

2020-02-20

【ロピタルの学習記録　2/20】若年者ものづくり競技大会出場！？（DB, Java）

午後16時13分　学校から一本の電話が入った。なにかやらかしたのかと思いながら電話に出た。相手は担任の先生。

要件は「若年者ものづくり競技大会に出ないか」ということでした....ひえぇ

若年者ものづくり競技大会
- 課題
NuxtJS
Javascript
明日

若年者ものづくり競技大会

業務用ITソフトウェア・ソリューションズという部門に出場してほしいみたいなので、調べてみることにしました。

課題

仮想の業務で発生した問題に対して，データベース管理システムやプログラミングを用いてそれを解決する．基本的なコンピュータの管理・操作スキル以外に，本競技課題に取り組むために必要な知識・技能は，次の通りである

（１）開発環境の構築と障害の対処

（２）リレーショナルデータベース

（３）Java プログラミング

（４）プレゼンテーション/デモンストレーション

若年者ものづくり競技大会「業務用 IT ソフトウェア･ソリューションズ」職種競技課題概要 - 引用

基本的な障害への対処やデータベース設計、プログラミングなどが課題になってくるみたいですね。

そして大会の時期は7月みたいなのでまだ時間はありますが、今やってるフロントエンドの開発を終わったらガチでデータベース設計からJava GUI

フレームワークはSwing, JavaFX, AWTなどが使えるらしいのですが、Swingが今のところ一番使われているらしいのでできればSwingを使いたいと思います。でも学校ではJavaFXを使用しているのでJavaFXを使えって言われるかもしれないのであまり固執しないようにしておこうと思います。

SQLは使えますがDB設計はやったことがないので書籍を購入して１ヶ月くらいでマスターしたいですね！あとはJavaのツールなども把握しないと💦

まぁ、出場が決定したら全力で頑張ります！