2024.10.21
お互い疑心暗鬼になりがちな、経営企画と事業部の壁 組織に「分断」が生まれる要因と打開策
新規サービスにNuxt.jsを採用した話(全1記事)
リンクをコピー
記事をブックマーク
島村崇氏:こんにちは。本日は「新規サービスにNuxt.jsを採用した話」という内容でお話をさせていただこうと思います。よろしくお願いします。
(会場拍手)
まず自己紹介ですが、DMM.comのテクノロジー本部CTO室でエンジニアをしている島村と申します。経歴は、2014年にDMMに入社してこんな感じで、実は一昨年まではマネジメントもやっていました。
では、さっそくなのですが、今回紹介するサービスは、9月リリースに向けて今まさに新規開発しているEC系のサービスになります。開発メンバーですが、エンジニアは5名で、デザイナー、POという構成で、その中にフロント実装するエンジニアが3名います。
アプリケーションの構成はざっくりとこんな感じで、フロントはサービスサイトと管理サイト、両方ともNuxt.jsで実装していて、API側はGo言語で実装しています。
今回、Nuxt.jsを採用した理由をご紹介したいと思います。先ほどご紹介したように複数人でフロントの実装をするので、コードの統一感を担保したいという話があがりました。Nuxt.jsはフレームワークのルールに沿って開発ができるので、コードの統一感が担保できてよいのではないか。ということで、まずこれが採用理由の1つになりました。
もう1つが学習コストを抑えられることです。Nuxt.jsは公式ドキュメントが充実していたり、DMM社内での知見が多かったり、また同じチーム内にもNuxt.jsの経験者がいたので、これらも今回の採用理由になりました。あと、Vue.jsなので、HTML・CSS・JSの基本的な知識があれば、Reactなどに比べて理解しやすいのかなと思って採用しました。
では、実際Nuxt.jsを選んでどうだったのか。
学習コストについては狙いどおりでした。公式ドキュメントを読めばだいたい実装ができたのと、なにかあったときにすぐ聞ける知見が社内にあったのはやはり心強かったです。
あとは、環境構築が楽でした。Nuxt.jsは必要なライブラリが最初からだいたい揃っていて、プラグインも設定ファイルを書くだけで簡単に追加できてしまうので、すごくよかったなと。あと、Vuexやルーティングの設定はNuxt.jsがやってくれるので、ここらへんもかなり楽できたかなと思います。
ただ、Nuxt.jsを導入したときの注意点なのですが、ルールに沿ってとはいっても、やはり設計はいろいろ必要だったなという感想です。例えば、値の保持をどうするか。storeもしっかり設計しないとすぐ肥大化してしまうので、ここらへんの設計周りとか。
やはりコンポーネントの粒度の話ですね。やはりここらへんもしっかり設計しておかないと、componentsディレクトリ配下がぐちゃぐちゃで大変なことになってしまいます。
あとは、今回サーバサイドレンダリングをしたのですが、Nuxt.jsはVue.jsに加えて独自のライフサイクルメソッドがあったり、サーバサイドとクライアントサイドで挙動が変わったりするので、そこをしっかり意識して実装する必要はありました。とくに画面をリロードしたときの挙動はけっこう注意が必要でした。
それとwindowなどのブラウザのAPIですね。今回ローカルストレージも使ったのですが、そういったところにアクセスする際は「クライアントサイドのみ」という分岐処理を書く必要もありました。
では、今回、開発に伴って工夫したことをいくつか紹介したいと思います。
まずパフォーマンスチューニングなのですが、1つがコンポーネントのキャッシュです。propsの値で一意の描画結果が決まるものは、サーバ側でコンポーネントをキャッシュしました。v-forなどで何度も繰り返すようなコンポーネントには、キャッシュ処理は有効だったかなと思います。
ソースコードだとこんな感じです。このserverCacheKey というメソッドを実装して、propsをもとにキャッシュするためのキーを文字列でリターンしてあげると、サーバ側でコンポーネントをキャッシュすることができます。別途モジュールのインストールは必要なのですが、実装としてはこんな感じになります。
もう1つパフォーマンスチューニングとして、非同期コンポーネントがあげられます。v-ifなどで必要なタイミングで表示するコンポーネントの場合は、非同期コンポーネントにするとJSのbundleに含まれなくなるので、初期表示にかかる時間の削減が期待できます。
ソースコードだとこんな感じです。コンポーネント設定するところをこういったかたちでダイナミックインポートすると、非同期で必要なコンポーネントを必要なタイミングで読むようになります。
あと最後に、今回はCSS設計に「RSCSS」という手法を採用しました。Vue.jsなのでしっかりとしたCSS設計は不要だったのですが、複数人で開発するのに何もルールがなのはやはり可読性が悪くなるので、最低限のルールとして採用しました。
コンポーネントベースにマッチしていて、ルールもシンプルで学習コストもけっこう低く、採用してみてよかったので、ご紹介したいと思います。
ソースコードだとこんな感じで、コンポーネント名はkebab-caseで2単語以上というルールがあります。その下のelementsはなるべく子セレクタを使用して定義します。あと、variantではダッシュ・プレフィックスをつけて、こんな感じで書きます。
BEMなど使われている方はわかるかなと思うのですが、それよりもかなりシンプルに書けるので、見通しも良くなってよかったかなと思います。
というわけで、まとめです。Nuxt.jsを導入してみて、学習コストは狙いどおり低めにできたのと、環境構築にかかるコストがかなり削減できたのですごくよかったなと。
ただし、注意としては、細かい設計は必要という点と、サーバサイドとクライアントサイドの処理をしっかり意識する必要があるという点。あとは、CSSはゆるくでもルール設定しておいてよかったな、という感想です。
では、ちょっと最後スポンサーっぽいことを言わせてください。DMM.comでは共に働くエンジニアを募集しています。ということで、本日はどうもありがとうございました。
(会場拍手)
2024.11.13
週3日働いて年収2,000万稼ぐ元印刷屋のおじさん 好きなことだけして楽に稼ぐ3つのパターン
2024.11.21
40代〜50代の管理職が「部下を承認する」のに苦戦するわけ 職場での「傷つき」をこじらせた世代に必要なこと
2024.11.20
成果が目立つ「攻めのタイプ」ばかり採用しがちな職場 「優秀な人材」を求める人がスルーしているもの
2024.11.20
「元エースの管理職」が若手営業を育てる時に陥りがちな罠 順調なチーム・苦戦するチームの違いから見る、育成のポイント
2023.03.21
民間宇宙開発で高まる「飛行機とロケットの衝突」の危機...どうやって回避する?
2024.11.19
がんばっているのに伸び悩む営業・成果を出す営業の違い 『無敗営業』著者が教える、つい陥りがちな「思い込み」の罠
2024.11.18
20名の会社でGoogleの採用を真似するのはもったいない 人手不足の時代における「脱能力主義」のヒント
2024.11.11
自分の「本質的な才能」が見つかる一番簡単な質問 他者から「すごい」と思われても意外と気づかないのが才能
2024.11.13
“退職者が出た時の会社の対応”を従業員は見ている 離職防止策の前に見つめ直したい、部下との向き合い方
2024.11.11
「退職代行」を使われた管理職の本音と葛藤 メディアで話題、利用者が右肩上がり…企業が置かれている現状とは