NuxtJSでVeeValidate 3.x系を使う
前回の記事で書いたプロフィールサイトでお問い合わせ画面を作ってます。
どうせ作るんならフォームバリデーションを追加してみることにします。なのでVeeValidateを使ってみます。
tekitoumemo.hatenablog.com
Nuxtの設定は以下をほぼパクリました設定から「こんぐらい使えれば一通り大丈夫だよね」ってところまで書きます。
Available Rules | VeeValidate
設定
pluginsに以下作成
plugins/vee-validate.js
import { extend } from 'vee-validate' import { required, email } from 'vee-validate/dist/rules' // No message specified. extend('email', email) // Override the default message. extend('required', { ...required, message: 'This field is required' })
nuxt.config.jsに以下追加
plugins: ['~/plugins/vee-validate.js'],
で起動すると以下のエラー
これはvee-validate/dist/rules
がES6なのでBabel で変換しないといけません。
なのでbuild. transpileに以下を追加します。
build: { transpile: ['vee-validate/dist/rules'], extend(config, ctx) {} ... }
これでVeeValidateの準備が出来ました。
あとはこんな感じ(いきなり雑)
<ValidationProvider v-slot="{ errors }" rules="required"> <input v-model="value" type="text"> <span>{{ errors[0] }}</span> </ValidationProvider> import { ValidationProvider } from 'vee-validate' export default { components: { ValidationProvider }, }
こんな感じになります。
emailなど、空白+アドレスの形式確認みたいな複数条件の場合はパイプでつなげばどちらのバリデーションが有効になります。
rules="required|email"
独自のエラーメッセージを入力したい場合は{_field_}
プレースホルダーを使います。
// Override the default message. extend('required', { ...required, message: '{_field_}は必須項目です。' })
こんな感じになります。
カスタムバリデーション
カスタムバリデーションに引数を渡すことも可能です。rules="max:10"
は10文字以上入力された場合、エラーにします。
extend('max', { validate: (value, args) => { return value.length <= args.length }, message: '{_field_}長すぎやろ', params: ['length'] })
どれか1つでもエラーの場合はボタンをdisableにする
ValidationObserver
を使います。invalidはどれか1つでも無効の場合にtrueになります。いろいろあるのでここ参考に
<ValidationObserver v-slot="{ invalid }" slim> <ValidationProvider v-slot="{ errors }" name="メールアドレス" rules="required|email" > </ValidationProvider> .... </ValidationObserver>
ここまでできればformについては大体まかなえそう。
まとめ
Angularはreactive-formsがあるからform強いなーと思ってたけど、VeeValidate相当使いやすい。2系は設定がちょっとだるいらしいのでシンプルでよかった。
2019年振り返って
去年もやったので振り返る
仕事のこと
最悪な会社へ
昨年はAngular5と.Net Coreをやっていたが、Angularが出来なくなってきたので今年からAngularたまにReactみたいな現場に移動。ガチモンのスペシャリストがいて自分の書いたコードをレビューしてくれるっていう神現場だった。技術的な面で仕事を選んでいたので、多重派遣の会社とは知らずに働くことになり、毎日の報告書や打ち合わせの多さ、身を隠さなきゃいけない辛さなど最悪なことが多すぎた。すんなり辞められるかと思いきや、すげーめんどくさいことになった。最後は揉めて終了。ただ単価は高かった。いい勉強になった。
エージェント介さずに仕事を見つける
なんやかんやあってエージェントも終わってる求人出すことがわかったので、興味のある分野で仕事を探すことに。なんか1社目で決まっちゃった。技術的にもNuxtJSで満足してるし、なんにせよ好きだった店のサービスを運用出来ることが良かった。ダメなパターンが多いかもしれないけど、意外とイケることがわかったのが大きな収穫。直接だとやはり単価は高いがプレッシャーがヤバい。
個人サービスは継続中
一昨年作ったみんなの洋楽ランキングは継続して運用してる。今年はあまり手を付けてないけど大きなところでパフォーマンス改善、React .Net Coreバージョンアップ、レビュー機能追加ぐらい。今年はとにかく流入が良くて平均1万ユーザーの3〜4万PVだった。同時にアドセンスで2万ぐらい売上出た。もうちょいでトントンになるから今年は期待。新卒の頃(7年前)に作ったITunEsTooLが年間10万程度売上出る。1ミリも手を付けてないので、みんなの洋楽ランキングもこの程度になれば御の字。
CSSの技量が上がった
もうほとんど怖くないレベルまで達した。
MacBook Pro買った
30万ぐらいした。ASUSとか買ってubuntu入れれば良いやと思ってたけどMacBookのキーボードの良さやairdropやらいろいろ考えて後悔しないと踏んで購入した。こんな大きな買い物したの車以来。
結構休んだ
一年で3ヶ月ぐらい休んだ。 本当はこんな休む予定じゃなかったけど、最悪な会社と揉めたことによって少し空いてしまった。育児もたんまり出来たし、幸せっちゃ幸せな休暇だったな。
仕事のモチベが上がった
前の現場はインフラ、サーバ、フロントもそのジャンルのプロフェッショナルが多かったのでなかなか介在しづらく、その分野ならプロフェッショナルな人間と仕事できる反面、やりづらさを感じていた。少なからず、フルスタックな感じで働いていたいと思った。アジャイルとかいうならどっちもやりたいよなぁ。
フリーランスの終わりを考えるようのなった
今年で30になり、フリーランスを続けるか正社員に戻るか考えるようになった。年齢的な意味合いと社会人になってほとんど事業会社にいるので業務委託だと入り込みにくい領域が存在することがわかった。フリーランスでいることは技術も向上するし収入も上がるからいいことなのだが、結構な頻度で虚無感が襲ってくる。ビジネス用件でくる仕様って基本同じことの繰り返しだからプロダクトに情熱がないとつまんねぇなぁって感じになる。今は好きな分野なので、そこに情熱が持てるか、やはり正社員でないと入り込めない領域があり虚無感を感じるかを判断したい。
やっぱりRuby on railsは多い
なんとなく感じてたけど、やはりRoRは多い。人数がめちゃくちゃ多いので強強マンじゃない限り参入は厳しそう。機会が少ないけどやるならGoか.Net Core、強いて言うならJavaぐらいかなぁと感じてる。
プライベート
子どもが生まれた
まじで可愛い。本当に宝。産まれる前まで自分の将来ばっか考えてたけど娘が幸せならなんでもいーやって感じになった。さっき虚無感を感じるって書いたけど、娘が幸せならそんなもん我慢して仕事する。
引っ越した
1LDKに住んでいたけど、家族が増えるを機に3LDKに引っ越し。3人でも広すぎるぐらいだけど、家はデカイに越したことないなと思った。
ライターの記事を読むようになった
はてブなど技術系の記事ばっか読んでいたけど、ライターが書いた記事を読むようになった。これは洋楽のバズマーケティングによる時代の傾向を考察した記事になるが、数万文字を超える大作にもかかわらず、すぐ読めてしまった。
これもめちゃくちゃ面白かった
最近小説読んでなかったから忘れてたけど、やっぱはてブとかQuitaは素人なんだなぁと感じた。
車好きになった
年々好きになっててウケる。働くモチベはここもデカイ。今年は絶対ベンツ買ってやる
生活が豊かになるアイテムを揃えた
まずは食洗機
原チャ
あとはダイニングテーブルとかソファとか。新婚とはまた違う、大人になった感ヤバい
健康
太りすぎた
いよいよヤバくなってきた。腹出てるどころじゃない。今年は痩せる
ヘルニアになった
太りすぎたせい。なんにもいいことない
睡眠時間減った
定時に帰れてるのに睡眠時間少ない。これは直さないと
入院した
ぶっ倒れた。二週間ぐらい入院した。これを機に完全に健康を意識した生活を始めた。
タバコをやめた
入院して吸えなかったことをいいことにタバコを完全にやめた。めっちゃ吸ってたのにもう二ヶ月も吸ってない。
総括
正直、娘が生まれたこと以外は心技体すべて消耗した年だった。ただ、このつらい経験を踏まえて新しい環境に身を置くことが出来たので去年より悪いことはないだろう。もう12年も吸ってたタバコをやめて、体調もすこぶる良いし健康を意識した生活も出来るだろう。フリーランスになって2年目で辛い状況になったが、不況になったらこんなもんじゃないだろう。今年はとにかく真面目に誠実に生きていくことを目標にしよう。
NuxtJS勉強用にプロフィールサイトを作ってみてる
次の案件でNuxtJSを使うためプロフィールサイトを作りました(まだ途中)
チュートリアルを一通り終えて、なんとなく理解したものの消化不良感が否めなかったので、フロント、サーバー間を通じて一つのサイトを作れば、それなりの力がつくはずなのでこの冬休みになんとか完成形まで持っていければと思ってます。
早速ですが、作ったサイトはこれです(まだ途中(2度目))。
festive-yonath-a04e1e.netlify.com
必須条件を決める
ただのプロフィールサイトを作っても、ペライチのHTMLで作れてしまうので必須条件を決めました。
フロント、サーバー間で通信する
これがないと基本的なサービスは作れないと思います。なのでmockサーバーをherokuで立てました。私は.net coreが好き(というか他知らない)なので、.net coreをdockerコンテナ化してherokuで運用しています。herokuはクレジットカードを登録すると1000 時間使えますのでmockとしては十分でしょう。こんな感じで作りました。
$curl https://isaito-mock.herokuapp.com/api/profile/socials | python -mjson.tool % Total % Received % Xferd Average Speed Time Time Time Current Dload Upload Total Spent Left Speed 100 702 0 702 0 0 981 0 --:--:-- --:--:-- --:--:-- 981 [ { "fontawesome": { "iconName": "fa-github", "name": "github", "prefix": "fab" }, "id": 5, "name": "Github", "url": "https://github.com/ikuosaito1989" }, ... ]
Vuexを使う
フロントエンドではディファクトスタンダードになってきたFluxアーキテクチャを使います。Flux知らないときついですが、慣れてしまえばちょっと書く行数が多くなるぐらいの感覚になるので慣れるまでやりましょう。Angularでガッツリngrxやってたので苦戦しなかったけど、名前が違ったので戸惑った。
テストカバレッジ100%は絶対
実務でテストは書くと思うので、思い切ってカバレッジ100%にしましょう。フレームワークはJestを使いました。AngularではJasmineを使っていて、同じくカバレッジ100%にしていたのですがtemplateのカバレッジまでチェック出来なかった(できるかもしれないけど)のでJestめんどくせぇなすごいな、って思いました。
Storybookもちゃんと作る
Storybookもちゃんと作りました。
quirky-hoover-d5f9da.netlify.com
これもめんどいのですが、デザイナと連携することを意識して作っています。knobsはpropsをそのまま入力できるようにするだけだとほかの人が直感的にわかりづらいので、誰でも使えるようにしています。例えば、アイコンであれば「Twitter」を選択するとTwitterのアイコンが出るようにするとか(fontawesomeのclassとか普通知らないしね)Storybookに苦戦すると「なんでこんなことで消耗しなきゃいけんの?」ってなる
ツール系は一通り入れる
ESLint、Stylelint、Prettierを一通り入れました。ここらへんは絶対入れるべきですが、入れてない現場とかいくとストレスがたまるだけなのでまぁとりあえずって感じで入れました。
拡張機能も一通り入れる
エディタはvscodeを使っているのですが、拡張機能は必ず入れましょう。「vue vscode」とか調べるといっぱい出てくるので同じ様に入れとけば間違えないっす。vuex使うならVueJs devtoolは絶対に入れましょう。
お金は一切かけない
github pagesとかherokuとかフロントなら無料で出来ることが多いので、プロフィールサイト程度はお金をかけないようにしました。ネットのエンジニアはgithub pagesが多いですが、netlifyにしました(使ってみたかっただけ)サーバ側もherokuのdynoで20分に1回アクセスしてスリープさせないようにしてます。
あとはゆっくり開発
なんだかんだ去年のクリスマスあたりから1日1時間ぐらいやってますが、あと1週間ぐらいかかりそう。気にしない、どうせ勉強だし。こういうサイト作るあるあるで、大抵cssで消耗するので苦手な人はやらない方が良いかも、レスポンシブにしないとかっこ悪すぎるし。
やってみて
かなり理解が深まった。新しい職場での恐怖心がほとんどなくなった。Angular、Reactは使っていたけどVueは尖っていないというか一番わかりやすい。AngularはObservableがまじむずいし、Reactはjsxが気持ち悪い。AngularはフルスタックでNuxtJSみたいなフレームワークがない?ので「newしてcomponent、serviceどーん!はい!作って!!DI!Module!」って感じなので設計から考えるのが難しかったな。微妙なangularのasync pipeやReact.Fragmentなどvueだとそこらへんの不満がないので「vue最高!」ってなりそうだったけど、まだAngularが好きかなぁ。
車買い替えたいから候補を挙げてく
完全自己満日記。次の車検までに車を買い替えたい。
今乗ってる車
ホンダ フィット G・スマートセレクション
多分今なら50あれば上等なやつ買える。18からずっと実家の車乗ってて一人暮らししたときの不便に耐えきれず、ふらっと寄った中古車屋でノリで買ってしまった車。当時ハマってたボードも乗るし、なんなら車中泊も出来ると言われ購入。wikiに書いてある車の定義で考えると完璧な車(以下参照)
荷物や人を運べるようにした道具
車体安い、燃費平均16L、五人乗り、車内広い、運転しやすい、パーツ安いとコスパ最強な車。金掛けても田舎のヤンキーみたいな車になって金掛けたくない面白くない車。しかも壊れない壊れない。つまんね。
車好きとしては、これに乗ってられないので次はちゃんとした車に乗ろうと決意したので、候補を挙げてく。ただ、子どもいるし五人は乗れないとダメ+高い車はコスパ悪くて嫌いなのでノリで買える車に限定する。僕は自分で車検行くので攻めた車でもおけ。
5位 日産ムラーノ 初代
SUV好きじゃないんだけど丸っこい感じが好き。ちょうど免許取りたてのときによく走ってて好きだった。未だにカッコいいと思えるからやっぱりデザイン良かったなぁ。2代目になってお決まりの日産顔になっちゃったのが残念。まぁ、80あればそこそこなものを買える。
4位 スバル インプレッサ G4 初代
ハッチバックが好きじゃなくてセダンのスポーツ感が出るのが好き。カスタムするのが楽しそう。安定のインプだから外れがない無難な車な気がする。値段も120ぐらいあればまぁ買えそう。
3位 日産スカイライン
2010年ぐらいのやつ。カッコいいし、カスタムしても楽しそうだし、乗り心地が良いよね。なんとなくスカイラインは赤ってイメージ。クラウンより手頃なのが多くてラグジュアリー感味わえるからいいなと。100前後で結構ゴロゴロあるイメージ。
2位 BMW 3シリーズ
やっぱりいい。バケットシートっぽいところからスポーツ走行するために前後重量配分が50:50になっていて乗って楽しい、見て楽しい車だと思う。一歩間違うとDQNになるけど、安定していいなー。型落ち中古だと100前後で買える。もうちょい出せるなら5シリーズがいいかも。電子制御サスとかいろいろやりすぎ感が出てて最高だった。
1位 メルセデスベンツ Cクラス
ベンツとか全然好きじゃなかったんだけど、乗ったら一気に変わった。ベンツは腐ってもベンツ。スポーツ走行って感じではないけど、1.8Lのスーチャかターボで俺みたいなあまり詳しくないやつでも問題なしで、見た目も乗り心地も申し分なし。ベンツのプレスラインは本当に綺麗。ボンネット内も綺麗に塗装してあって、丁寧な車だなぁと感じる。100前後あれば買える。後期のフォグがカッコいい。ミラーのウィンカーもカッコいい。クラウンとかホンダレジェンドとか比べてやっぱ全然違う。最高アンド最高。
macでAzure CLI入れてApp Serviceにsshするまで
App ServiceはPaasなのでsshを使う意味はほとんどありませんが、検証する際にたまーに必要になったりします。Azure portalから簡易的なsshが使えるので、必要はないのですが、芸がないので一応やってみることにしました。
HomebrewでAzure Cliをインストール
brew update && brew install azure-cli
バージョン確認
az --version azure-cli 2.0.77 command-modules-nspkg 2.0.3 core 2.0.77 nspkg 3.0.4 telemetry 1.0.4 Python location '/usr/local/Cellar/azure-cli/2.0.77/libexec/bin/python' Extensions directory '/Users/saitouikuo/.azure/cliextensions' Python (Darwin) 3.7.5 (default, Nov 1 2019, 02:16:23) [Clang 11.0.0 (clang-1100.0.33.8)] Legal docs and information: aka.ms/AzureCliLegal Your CLI is up-to-date.
ログイン
az login
するとブラウザが立ち上がってログイン画面が開くのでazure portalに入るIDとパスを入力して下さい。
az login You have logged in. Now let us find all the subscriptions to which you have access... [ { "cloudName": "AzureCloud", "id": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", "isDefault": true, "name": "xx課金", "state": "Enabled", "tenantId": "xxxxxxx", "user": { "name": "hoge@hoge.com", "type": "user" } } ]
アプリへのリモート接続を開く
subscription-id
はログイン時に表示されたidの値、resource-group-nameは接続したいAppServiceのリソースグループ名、app-nameはAppService名です。
az webapp create-remote-connection --subscription <subscription-id> --resource-group <resource-group-name> -n <app-name> & Port 21382 is open SSH is available { username: root, password: Docker! } Start your favorite client and connect to port 21382
そうするとポート21382で接続する準備が出来ました。
sshセッションを開く
先ほど表示されたポート番号を指定します。
ssh root@127.0.0.1 -p 21382 The authenticity of host '[127.0.0.1]:21382 ([127.0.0.1]:21382)' can't be established. ECDSA key fingerprint is xxxxxxxxxxxxxxxx Are you sure you want to continue connecting (yes/no)?
ここまで表示されたらyes
を入力し、先ほど表示されたパスワードDocker!
を入力します。
_____ / _ \ __________ _________ ____ / /_\ \___ / | \_ __ \_/ __ \ / | \/ /| | /| | \/\ ___/ \____|__ /_____ \____/ |__| \___ > \/ \/ \/ A P P S E R V I C E O N L I N U X Documentation: http://aka.ms/webapp-linux Dotnet quickstart: https://aka.ms/dotnet-qs
完了。
Azure App Serviceでは.NET Coreの拡張子なしの静的ファイルにアクセス出来ない?
誰の役に立つか不明だが一応。
個人的な都合でLet's Encryptの発行をubuntu機で行っていました。ちょうど入院(え?)したこの機会にmacで発行しようといろいろ試した備忘録です。
いままではLet's EncryptをDNS認証で行っていましたが、今回はACMEのチェレンジで試してみました。このチェレンジをするにあたって拡張子なしの静的ファイルにアクセスしなければいけないのでいろいろ思考錯誤しました。
発行申請を出す
sudo certbot certonly --manual --domain example.com ... Create a file containing just this data: xxxxxxxxxxxx And make it available on your web server at this URL: http://example.com/.well-known/acme-challenge/yyyyy
.well-known/acme-challenge/yyyyy
にxxxxxxxxxxxx
という内容でファイルを置く必要があります。.NET Coreだとセキュリティ上、静的ファイルを気軽に置けません。.NET Coreでは管理外のMINEタイプにアクセスすると404を返す仕様になっています。なので、特定のファイルでもアクセスできるように設定しなければいけません。
StaticFileOptionsのServeUnknownFileTypesプロパティを有効にする
これはすべての静的ファイルが有効になるので非常に危険です。まずやらないほうが良いです。
app.UseStaticFiles(new StaticFileOptions { ServeUnknownFileTypes = true, });
ローカルでは静的ファイルを返すようになりました。ちなみにホスティングにApp Serviceを使っているのでデプロイしたら静的ファイルにアクセス出来ませんでした。
特定のパスだけOKにする
StaticFilesがファイルの種類を取得する場合にIContentTypeProviderを使っているのでIContentTypeProviderを実装して特定のパスだけOKにする方法。
public class LetsEncryptWellKnownContentTypeProvider : IContentTypeProvider { private IContentTypeProvider _baseProvider; public LetsEncryptWellKnownContentTypeProvider() : this(new FileExtensionContentTypeProvider()) { } public LetsEncryptWellKnownContentTypeProvider(IContentTypeProvider baseProvider) { _baseProvider = baseProvider; } public bool TryGetContentType(string subpath, out string contentType) { if (subpath.StartsWith("/.well-known/acme-challenge/")) { return true; } return _baseProvider.TryGetContentType(subpath, out contentType); } }
で実装後は登録。
app.UseStaticFiles(new StaticFileOptions { ContentTypeProvider = new LetsEncryptWellKnownContentTypeProvider() });
ローカルは静的ファイルにアクセス出来たのに、App Serviceでは相変わらずだめでした。
Azure App ServiceではCore上の静的ファイルにアクセス出来ない!?
よくわかりませんが、あえてやる必要もないので諦めました。
stackoverflow.com