tekitoumemo’s diary

.NET CoreとVue、Angularなどの技術ブログを書いています。みんなの洋楽ランキングを運営しています。

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%は絶対
f:id:tekitoumemo:20200102222655p:plain
実務でテストは書くと思うので、思い切ってカバレッジ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が好きかなぁ。