【ロピタルの学習記録　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

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

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

応用情報

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

明日

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

インプット

アウトプット

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