フロントエンドを開発する時に、気づいたこと
フロントアプリコードのフォルダー構成
vue router, model, vue component, vue page, vue template, style, api ... ってのファイルがありますけど、どうやって管理するか、どういうフォルダー構成にした方が良いか、答えがないです。 つまり良い構成がないです。 メンバーと相談して、フォルダー構成を決めましたが、人によって違いますので、相談しにくい
VueXの使い方
ある場合、Vuexが便利ですが、ある場合Vuexはちょっと面倒です。 vuexはどの場合使うか使わないか分からないです。
フロントの最初の設定
vue, vuex, vue router, lintのライブラリーをインストールしれば良いですが、一括で出来れば良い
プロジェクトが大きくになると、リファクタリング必要になります。
ちゃんと設計しないと、毎回リファクタリング必要になるかもしれません
Build/デプロイ手順
webpackやVue CLIなど使えば、Build/デプロイは簡単ですが、プロジェクトによって、なにか修正しないといけないことが必要になるかもしれません。
自動作成と自動インポートがないです
新しい機能を開発する時に、色々なコード書かないといけないです。例えば
- vuexモジュール準備
- vue router準備
- vue component準備
- api/model準備
全部出来たら、インポートが必要になるかもしれません
まとめて
バックエンドの話ですが、railsを使った時、ファイル生成とか、router・controller・htmlは名前が同じなら、自動連携されます。プロジェクト作成もめっちゃ簡単です、rails new実行するだけです。
フロントエンドでもそういうことができれば良いなと思います。
NuxtJS はじめ
Nuxtとは?
Vue.js アプリケーションを構築するためのフレームワークです
- Vuejs
- vuex
- vuerouter
→ Nuxtに入ります。
Nuxtのメリット
- Vue ファイルで記述できること（*.vue）
- コードを自動的に分割すること
- サーバーサイドレンダリング
- 非同期データをハンドリングするパワフルなルーティング
- 静的ファイルの配信
- ES2015+ のトランスパイレーション
- JS と CSS のバンドル及びミニファイ化
- 要素（、 など）の管理
- 開発モードにおけるホットリローディング
- プリプロセッサ: Sass, Less, Stylus など
- HTTP/2 push headers ready
- モジュール構造で拡張できること
Nuxtでフォルダー構成が決まった。 ページとrouterがちゃんとマッチングされます。
Nuxtフォルダーはこんな感じ
Nuxt使う時に、ルールが決まりました。
基本のルールが決まったので、コードの書き方が一緒になります。
簡単にページ追加されます。
SEOもう出来ます。
Nuxt Typescript
まとめ
フロントエンドを開発する時に、たくさん書き方がありますが、自由に決めるといつかいくつか違和感があると思います。ですので、安全のためフレームワークを使った方がいいと思います。 Nuxtは良いフレームワークですので、是非お試してくださいませ。