Nuxt.jsを使った電子書籍販売サービスの構築 #ヤフー名古屋
1K Views
August 09, 19
スライド概要
2019年8月6日に開催されたヤフー名古屋Tech Meetup #3の内容です。
#3 は「Webフロントエンドを支えるノウハウ」をテーマに開催しました。
2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp
関連スライド
各ページのテキスト
Nuxt.jsを使った 電子書籍販売サービスの構築 2019年8月6日 ヤフー株式会社 / 沢田 晃一 1 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.
自己紹介 沢田 晃一 Koichi Sawada ヤフー株式会社 フロントエンドエンジニア 2008年新卒入社 防災速報、ニュース、地図などの担当を経て 現在はebookjapan担当 2 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.
サービス紹介 3 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.
ebookjapanとは 4 2016年10月 ヤフー株式会社と資本業務提携契約を締結 2017年冬 新サイト開発開始！ 2018年10月 新サイトリリース！ Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.
ebookjapanとは • 取り扱い冊数がマンガを中心に60万冊以上 • 常時2,000冊を超える無料マンガ • 全巻読み放題等の独自施策の実施 • PayPay残高で支払い、獲得できる iOSアプリ、Androidアプリもあります！ 5 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.
利用している主な技術 Client Side Server Side Dexie.js fetchr (あまりなかった、、) 6 axios Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.
Nuxt.jsの選定理由 • SPAだけでなくSSRもしたい • JSXよりVueテンプレートのほうが 分かりやすそう • 必要なライブラリがほとんど含まれている • 決められた場所にファイルを置くと自動で ルーティング等やってくれる • 日本語ドキュメントが豊富 7 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.
Nuxt.jsに含まれているもの Vue 2 Vuex Vue Router Vue Server Renderer 8 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. vue-meta
Nuxt.jsのディレクトリ構造 layouts pages components store ページの外観を変更するためのコンポーネン トをおく。 各ページのルートとなるコンポーネントをお く。Nuxt.jsが自動でpages以下におかれた *.vue ファイルを読込みルーターを作成する 部品となるコンポーネントをおく。 Vuexのストアファイルをおく。index.jsを作 成するとストアが有効になる。 その他、assets、middleware、plugins、staticディレクトリなどがあります 9 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.
Nuxt.jsのコンポーネント基本構造 layouts components pages components 10 components Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.
Atomic Designへの挑戦 Atomic Designとは? 画面を構成する要素を原子、分子、 生体、テンプレート、ページの5つ に分けUIをデザインしていく手法。 UIの一貫性を保ち、デザインの変化 にも強いシステムにしたかった。 (引用元: Atomic Design Chapter2 ) 11 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.
Atomic Designへの挑戦 Atomic Designとは? 画面を構成する要素を原子、分子、 生体、テンプレート、ページの5つ に分けUIをデザインしていく手法。 UIの一貫性を保ち、デザインの変化 にも強いシステムにしたかった。 うまくいかず。。 12 (引用元: Atomic Design Chapter2 ) Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.
Atomic Designへの挑戦 うまくいかなかった原因1 エンジニアだけでできるとあまく考えていた コーダー エンジニア ATOMSなどに 分解する作業 HTML/CSS 13 コーダーにHTML/CSSを作ってもらい、エンジニアが Atomic Designに沿って分割する作業をしていたが、 テンプレートの修正が多くついていけなくなった。 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.
Atomic Designへの挑戦 うまくいかなかった原因2 成果物が共通化よりも、とにかく動くものが優先された ATOMSなどに 分解する作業 エンジニア 14 見せられるもの 動くもの スクラムで開発を進めており 成果物がHTMLの分割では開発が 進んでいるのか伝わりづらかった。 結果、動くものを作ることを優先 してしまい、共通化が後回しになった Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.
Atomic Designへの挑戦 どうするべきだったか コーダー、エンジニアで成果物の認識をあわせ協力しあって Atomic Designを導入する コーダー エンジニア 15 Atomic Designに 沿ったパーツ 動くもの デザインをどう分割すると実装 しやすいか、コーダーとエンジニア でしっかり認識をあわせる。 成果物を一緒にすることで、修正が 入っても手間を減らせる。 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.
コンポーネント設計 ebookjapanでは、PCとSPでUIが違うため コンポーネントとCSSを分ける必要があった SP版 16 PC版 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.
コンポーネント設計 デバイスによるUI変更 pagesコンポーネントでデバイスを 判定し、コンポーネントやレイアウト を出し分けるようにした。 CSSもpagesコンポーネントのheadで 出し分ければいいと考えたが、なぜか うまくいかず。。 17 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.
コンポーネント設計 デバイスによるCSS変更 いろいろ試行錯誤したところ、、 nuxt.config.jsのheadオブジェクトを 関数化することにより解決。 18 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.
コンポーネント設計 PCとSPの処理共通化 PCとSPでテンプレートは違うが 処理はほぼ一緒のためmixinsを利用し 処理を共通化した pc/a.vue sp/a.vue mixins/a.js 19 mixins化したことにより コンポーネント内の処理がシンプルに! Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.
ストアの設計 Vuexとは Vue.jsアプリケーションのための状態管理 ライブラリ。複数のコンポーネント間で、 同一の状態を持ちたい時に利用すると状態 の管理が楽になる。 (引用元: Vuexとは何か？) 20 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.
ストアの設計 Nuxt.jsではストアの持ち方として2つのやり方がある • クラシックモード store/index.js がストアインスタンスを返す ( Nuxt.js 3.0 ? で廃止予定 ) • モジュールモード store ディレクトリ以下のJSファイルが名前付きモジュールに 自動的に変換される 21 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.
ストアの設計 Nuxt.jsではストアの持ち方として2つのやり方がある クラシックモード モジュールモード コード量が少ない！ 22 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.
ストアの設計 stateを書く際の注意点 ダメな書き方 23 正しい書き方 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.
ストアの設計 stateを書く際の注意点 ダメな書き方 24 正しい書き方 stateの値は常に function で返さないと サーバ内で値が共有状態になってしまう Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.
ストアの設計 ebookjapanでのストアの持ち方 TOPページ 25 ランキングページ 書誌ページ マイページ state state state state mutations mutations mutations mutations actions actions actions actions getters getters getters getters 基本はページごとに モジュールを管理 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.
ストアの設計 ebookjapanでのストアの持ち方 TOPページ 26 ランキングページ 書誌ページ マイページ state state state state mutations mutations mutations mutations actions actions actions actions getters getters getters getters ユーザ情報 買い物かご情報 state state mutations mutations actions actions getters getters 基本はページごとに モジュールを管理 各ページで共通で利用するものは 機能単位で管理 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.
ストアの設計 各モジュールの基本構成 基本的にページ単位で必要な情報を 取得しているため、返ってきた値を state.response にまとめていれて いる。 27 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.
ストアの設計 各モジュールの基本構成 state.responseの中身を取得する 場合は、gettersを使いその中で加工 等をおこなう。 Vueテンプレート側では、mapGetters を使い取得している。 28 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.
最後に ちょっとしたTips Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.
Tips Nuxt.jsのビルドが遅い場合 hard-source-webpack-pluginを nuxt.config.js 使いましょう。 Nuxt.jsでは、標準で入っており nuxt.config.jsに設定を追加することで 有効になります。 1回目は遅いですが、2回目以降はかなり はやくなります! 30 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.
Tips JSファイルが肥大化してしまった nuxt.config.js Webpack Bundle Analyzerを使って バンドルファイルに何が含まれているか 確認しましょう。nuxt.config.jsに設定を 追加することで有効になります。 ebookjapanでは、改善後 60%程度削減できた 31 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.
まとめ • Nuxt.jsは必要なライブラリがほぼ含まれていて 開発に集中できる • AtomicDesignを採用する場合は、しっかりコーダーと コミュニケーションを取る！ • mixinsを使うとコンポーネントの処理を共通化できる • stateは必ず関数に！ 32 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.
ご静聴 ありがとうございました！ Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.