tekitoumemo’s diary

思ったことを書くだけ。長文版Twitter

トップ > NuxtJS > NuxtJS勉強用にプロフィールサイトを作ってみてる

NuxtJS勉強用にプロフィールサイトを作ってみてる

NuxtJS Vue

次の案件でNuxtJSを使うためプロフィールサイトを作りました（まだ途中）
チュートリアルを一通り終えて、なんとなく理解したものの消化不良感が否めなかったので、フロント、サーバー間を通じて一つのサイトを作れば、それなりの力がつくはずなのでこの冬休みになんとか完成形まで持っていければと思ってます。

早速ですが、作ったサイトはこれです（まだ途中（２度目））。

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分に１回アクセスしてスリープさせないようにしてます。

あとはゆっくり開発

なんだかんだ去年のクリスマスあたりから１日１時間ぐらいやってますが、あと１週間ぐらいかかりそう。気にしない、どうせ勉強だし。こういうサイト作るあるあるで、大抵cssで消耗するので苦手な人はやらない方が良いかも、レスポンシブにしないとかっこ悪すぎるし。

やってみて

かなり理解が深まった。新しい職場での恐怖心がほとんどなくなった。Angular、Reactは使っていたけどVueは尖っていないというか一番わかりやすい。AngularはObservableがまじむずいし、Reactはjsxが気持ち悪い。AngularはフルスタックでNuxtJSみたいなフレームワークがない？ので「newしてcomponent、serviceどーん！はい！作って！！DI！Module！」って感じなので設計から考えるのが難しかったな。微妙なangularのasync pipeやReact.Fragmentなどvueだとそこらへんの不満がないので「vue最高！」ってなりそうだったけど、まだAngularが好きかなぁ。