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

GraphQL Javacsript Vue Nuxt バリデーション 応用情報

今日は勉強は半日くらいだった気がします。今日もカフェに行ったのですが、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できないかもですがまぁゆっくりやっていきます。おやすみなさい〜(^^)／~~~