目次はじめに前提条件Nuxtってなに?Nuxtの主な機能Nuxt.jsやってみるNuxt.jsのインストールNuxt.jsでアプリ作成nuxt.config.jsによる設定いろいろNuxtの構成Nuxtでアプリ実行ポート(3000の部分)を変更したい場合アプリの説明/解説レイアウト・コンポーネントの作成レイアウト(layouts)ページ(pages)コンポーネント(components)データの扱い/保存firebasefirebaseでdatabase作成firebaseで認証設定store(Vuex)デバッグビルドherokuにデプロイやってみてはじめにこんにちは!11月にLiBに入社したアベと申します。アラサー子持ちのエンジニア(エンジニアと名乗るのは憚れる...)です。器用貧乏な状態です(実際は器用ではなく広く浅くやってる感じ)。転職する際、フロントエンドエンジニアとして動いていたのですが、とある企業からは「jsフレームワークやっていないとフロントエンドエンジニアとしての技術が低い」と言われ、jsフレームワークを経験していないとフロントエンドエンジニアと名乗ってはいけないのか...と思った次第です。インストール済み(brewでのインストールが望ましい)vue.jsがどんなものか知っている黒い画面(ターミナル)がほんの少し使えるnpmを使用Nuxtってなに?Vueアプリケーションを作成するフレームワークです。サーバーサイドレンダリング、SPA、静的ファイルの生成等で作成することができます。Vue-Router,Vuex,vue-loader等も入っているのでvueで使うようなモジュールがすでに組み込まれているという認識で問題ないかと思います。webpackやbabelも含まれています。環境構築も特に必要はなく、後述するnuxtのコマンドで一発でOKです。個人的に楽に感じたのはルーティングの設定をこちらでする必要がないという点ですね〜pageフォルダにファイルを追加していけば勝手にルーティングを設定してくれます。公式サイトからまま引用います。Nuxt.jsNuxt.jsやってみるNuxt.jsのインストールまずはNuxt.jsをインストールします。自分がNuxtのアプリを作成したいディレクトリに移動して以下を実行します。appNameなんかいろいろ聞かれるので以下のように答えます。これで少しまてば初期設定状態のアプリが作成されました。下の方に以下のような表示がされてるはずですが、こちら後ほど使用しますので頭の片隅に入れておいてください。UIライブラリーで、CSSやJS(モーダル,ツールチップ等々)が用意されています。綺麗に作れるのでオススメで今回のアプリでも使用しています。axiosは、いわゆるAPIをajax通信で使用するためのライブラリみたいな認識で良いかと思います。(jQueryのajax,getJsonとかその辺の代わりです)今回はfirebaseを使用していますのでそのデータの扱いのためaxiosを使用するためyesとしました。nuxt.config.jsによる設定いろいろnuxt.config.jsが直下にあると思いますのでまずはそれをみてみましょう。}}element-uiがpluginsとcssに、axiosがmodulesに記述されていますね。(axiosという項目もありますがこれは後述します)cssの'element-ui/lib/theme-chalk/index.css'は、node_moduleフォルダの中にあります。pluginsの'@/plugins/element-ui'はappName直下のpluginsにjsがありそこからさらに必要なファイルを読み込んでいます。@は、ソースディレクトリを指しており、今回でいえばappNameまでになります。'@/plugins/element-ui'は'appName/plugins/element-ui.js'ということになります。ちなみにpluginには外部のjsプラグインや自作のプラグインを読み込む時に書きます。個人的にはNuxt側ですでに用意してあるモジュールを使用する時にここに記述するというイメージです。pkg.nameを変更してください。meta部分でdescription,keywordを追加したり、link部分で,googleフォントとかを読み込んだりすることができます。Nuxtの構成pagesビュー及びルーティングファイルを入れます。ここにファイルを入れると自動的にルーティングが作られます。ルールはこちらlayoutsアプリケーションのレイアウトファイルを入れます。初期でdefault.vueが入っており、大きくレイアウトを変更する場合は別に作った方が良いです。componentsVueのコンポーネントファイルを入れます。(header.vue,footer.vueなど汎用的に使えるコンポーネント)assetscssやjs,images等のファイルを入れますmiddlewareアプリケーションのミドルウェアを入れます。ミドルウェアを使って、ページやページグループ(レイアウト)をレンダリングするよりも前に実行される処理をしたい時に使います。プラグインを入れます。(公式サイトの文のままです)static静的ファイルを入れます。デフォルトでicoファイルが入っており、robot.txt等を入れたりするそうです。ストアを実行させるためのファイルを入れます。基本はindex.jsを入れることから始まり、規模が大きくなってきたら別々のファイルに分離していく形になります。devlocalhost:3000で開きます。(他の件で3000を使用している場合は開けないのでご注意ください)(エラーがおきてしまう場合は、nodeを最新状態にしてみてください)以下のような画面で表示されたらOKです!結局、4行ぐらいの実行で初期状態の表示をすることができましたね。素晴らしいですね、Nuxt.js。あとは自由にアプリを作るのみです。ポート(3000の部分)を変更したい場合3000はよく被るので変更したいという場合は、package.jsonに、下記を追加すればOKです。}},これでlocalhost:3333で表示できます。今回作成した簡易メモ帳の制作背景としては、なにか調べていたり、コードをちょっと保存し、その後にまとめたりする必要がある時に、とりあえず記述できるものが欲しいと思ったのがきっかけです。後々共有するためにmarkdownで記載する必要があるのでその機能だけはつけようと思って作っていたら、どんどんいろいろつけたくなったという感じです。大まかな機能/概要は以下になります。実際に作成したファイルをgistから貼ります。その前に、nuxt.config.jsを貼ります。fontと、highlightのためのcss、axiosのベースとなるURLです。</div></template>ページ(pages)今回UIを作るのに、element-uiを使用しています。Elementel-から始まるタグを使用することでそれに対応したhtmlを生成してくれます。cssを追加したい場合はインラインで追記することができます。例がけっこうあるのですぐ慣れると思います。今回はモーダルを一緒にしてしまいました。npmでインストールしておきます。highlight.jsmarkdownのcssは、下記から拝借させていただきました。firebaseでデータを保存し、そのデータを主にVuexで扱っています。Database)、認証機能を利用しています。僕みたいなバックエンドようわからんというフロントの方々からすると、DB用意する必要もないうえに、json形式で保存でき、取得できるので非常にやりやすいです。実案件として使用されることはあまりないですが、ちょっと試しに作ってみるという点では非常にオススメです。「コンソールへ移動」で移動します。「プロジェクトを追加」をクリックしてください。すると、ポップアップが表示されるので、プロジェクト名を任意のものにして作成してください。作成すると、そのプロジェクトの管理画面に入ります。Databaseのデータベースを作成するボタンが出てきます。取り急ぎテストモードで開始してください。作成できたら以下のような画面に遷移します。今回は今後を鑑みてそれを使わずにaxiosでAPIとして扱うようにしました。nuxt.config.jsのaxiosの箇所に、先ほどの画面で発行されているURLを記述します。firebaseをプラグインとして使用するので、plugins配下にfirebase.jsを作成し、下記のように記述します。それぞれ情報が表示されるのでコピペしてください。firebaseで認証設定firebaseでは認証機能を簡単に実装できるAuthenticationがあります。メールでのログインをはじめ、Google,facebook,Twitter等のアカウントも扱うことができます。設定をする必要があります。Googleの箇所を有効にします。ライブラリ」ということで、Fluxという概念のvue版みたいな感じです。基本、親子のコンポーネントだと値を引き継がせるのですが、あまりにもコンポーネントが多くなると複雑でわけわからなくなるので、どこかで管理しようというのが狙いです。Vuexの場合その管理する場所がstoreになります。多くのコンポーネント、ページで使われるデータ(今回はメモ情報とユーザー情報)は、storeで管理するのが良いです。適切な管理をすることにより、適切な構造、保守性が担保されるとのことです。概念としては、以下の図のようになります。試しに使用してみました。index.jsを作成します。state(ステート)上述してあるstoreで管理すると言っていた情報が、ここのステートにあります。アプリで共通で持たせたい情報がここにすべて集約しているというイメージです。ストアの状態を変更できる唯一の方法は、ミューテーションをコミットすることで、ミューテーションはコンポーネントから呼び出すことはできず、アクションからのみの呼び出しになります。非同期処理をすることも禁じられています。actions(アクション)アクションは、状態を変更するのではなく、ミューテーションをコミットします。ミューテーションとは違い、任意の非同期処理を含むことができます。コンポーネントから受けた値を加工してミューテーションに投げるみたいな認識かと思います。今回では、ユーザーのログイン有無により、firebaseかlocalstorageを分けています。コンポーネントからアクションを呼び出す方法this.$store.dispatch('xxxxxxxx',値);//例this.$store.dispatch('init');this.$store.dispatch('editMemo',this.memos[this.memoIndex]);getters(ゲッター)stateのデータを変更(フィルタリング,カウント)して取得したい場合、ゲッターを利用します。今回ではメモ情報がステートにfirebaseで取得したデータが入っているので、ログイン中のユーザーの情報にフィルタリングしています。Chromeの拡張機能で便利なデバッガーがあります。こちらで以下のように確認することができます。ビルドアプリが完成した、もしくはどこかにアップしたいと思ったらビルドしてみましょう。通常のビルドは以下になります。generateするとdistというフォルダにファイル等が生成されます。※上記は初期状態のアプリをビルドした場合です。表示することができます。今回はherokuにアップしてみたいと思います!herokuにデプロイ昔からよくheroku,herokuと聞いてきたのですが、一度も利用したことがありませんでした。今回試しということでherokuを利用してみました。CLIをダウンロードします。CenterMacであれば以下コマンドでもインストールできます。},最後に以下のコマンドを実行していきます。masterこれでデプロイ完了です!以下を実行すると、ブラウザで開いてくれます。openやってみてすぐ環境諸々作れるのが素晴らしいコンポーネントでhtml,js,css完結できるの素晴らしすぎるただコンポーネントが多すぎると受け渡し面倒くさそう(多いようならvuexで管理した方が良さそう)とはいえまだコンポーネントに切り分けるの慣れない...インラインでcss書くのは今までNGだったがvueでならありと感じてしまったセミコロンつけたりつけなかったりがひどい必要ない処理をすぐ消さないと残りがち(今もあると思います)Nuxt/Vueにまだ慣れておらず、Vuexの扱い方、コンポーネント間の受け渡しがおかしいところもあると思います。その際は優しく教えていただけると幸いです。LiBバックエンドエンジニアの宮澤です。読者になるはてなブログをはじめよう!libincさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。