1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Vue Storefront】ことはじめ

Posted at

#はじめに
業務で Vue StoreFront を使うかもしれないから、と使えるようになることを指示されました。日本語のドキュメントが少なくて苦労したので、この記事の作成に至りました。基本的に公式ドキュメントの日本語訳です。

※誤った情報を記載している、訳が間違っている、可能性がございます。予めご了承ください。

##参考
公式ドキュメント:https://docs.vuestorefront.io/v2/
公式 Github:https://github.com/vuestorefront/vue-storefront

##Vue Storefront とは
EC向けのPWAフロントエンドフレームワーク

EC:electronic commerce(電子商取引)の略称で、ネット上でのモノやサービスの売買の総称
PWA:Progressive Web Apps の略称で、ネイティブアプリ(スマホにインストールするようなアプリ)のような見た目や動きを持つWEBサイトのこと
フレームワーク:雛形のこと

##重要な概念

###Progressive technology(革新的技術)
Vue Storefront の多くが Vue 関連の技術をもとに作られている。いちばん重要なのは、Vue.js 上に構築された Nuxt.jsである。Vue.js は UI やテンプレート作成ツールを提供し、Nuxt.js はサーバーサイドレンダリング、ルーティング、i18n(国際化)を処理する。

###Reusability(再利用性)
拡張性と保守性を高めるために、Vue Storefront は Composables を提供している。Composables は多くの場合、唯一の主要な公開APIであり、アプリケーションのほとんどのビジネスロジックを実装するマイクロアプリケーションとして扱われる。

###Extendability and custom integrations(拡張性とカスタムインテグレーション)
Server Middleware を拡張することによって、どんなバックエンドのプラットフォームとも統合できる。

###Easy configuration(簡単な設定)
できるだけシンプルで直感的な設定となっているため、以下の2つのファイルだけで設定ができる。
nuxt.config.jsNuxt App とフロントエンド関連の設定に使われる。
middleware.config.js:Server Middleware の追加、設定、拡張するために使われる。

###Backend-agnostic(バックエンドに依存しない)
バックエンドにどんなサービスを使っていても常に同じ Getters と Composables を使うことができる。使うプラットフォームによって少し違うところがあるみたいなのですが、その違いについては理解ができませんでした。

##インストール手順
公式に載っている手順では解決でいそうにないエラーが出力されたので、公式のGithubからRepositoryを直接インストールしました。(こういう時は Fork を使うのかな、、?)

$ git clone https://github.com/vuestorefront/vue-storefront.git
$ cd vue-storefront
$ yarn install
$ yarn build:ct:tools
$ yarn dev:ct

この手順通りにやると、最後にパスが通っていないとお叱りを受けます。
package.json > scripts > build:core > cd -cd ..に書き換えて、セーブ。もう一度コマンドを実行すると、通るようになると思います。

##まとめ
公式の記事は回りくどく、難しく書かれている印象がずっとあり、敬遠していました。しかし今回、必要に迫られて呼んでみたところ、なんとわかりやすいことか。まだまだ公式ドキュメントを読む習慣がないので、なにか困った時は積極的に公式の力をお借りしようと思います。

##??次回予告??
次回は Vue Storefront の具体的な使い方についての記事を書くつもりをしております。

##お願い
冒頭にも記載しましたが、誤った情報を記載している、訳が間違っている、可能性がございます。なにか間違いにお気づきの方がいらっしゃいましたらコメントで教えていただけましたらと思います。

よろしくお願いします。

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?