Go to Qiita Advent Calendar 2024 Top
LoginSignup
24
17

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.

@yabish(yabish)inGLEAP

🔰【初心者】Nuxt.js ずFirebaseを䜿っおログむン機胜を実装する。 その

Last updated at Posted at 2020-01-20

Qiita初投皿です。

Nuxt.jsに觊れる機䌚があったので、備忘録ずしお投皿させおもらいたす。

##Nuxt.jsずは
Nuxt.jsずは、Vue.jsのフレヌムワヌクの぀です。

䞻な特城ずしお、

  • Vue-router　:　アプリケヌション内のペヌゞ遷移ルヌティングを管理するパッケヌゞ
  • vuex　:　アプリケヌション内のデヌタや状態の管理を行うパッケヌゞ

などが挙げられたす。

この他にも、デフォルトでSSRが行えたりず初心者にもわかりやすく非垞に䟿利です。
SSRずは、芁は
「埓来のクラむアント・サヌバヌ間の凊理の倧郚分をサヌバヌが担っおくれるため、凊理が非垞に早くなる仕組み」
皋床で考えおもらっおいいず思いたす。

ちなみに、SSRなどの抂念はこの蚘事が非垞にわかりやすかったです。

Nuxtアプリケヌションの生成

では早速、Nuxtフォルダの実装を行っおいきたす。

yarnのむンストヌルが出来おいなければたず最初にこのコマンドを行なっおください。

sudo npm install -g yarn

yarnが既に入っおいる人は、Nuxtアプリケヌションを生成したしょう。

yarn create nuxt-app 生成フォルダ名

　
　
コマンドを実行するず、めちゃくちゃ質問されたす。

アプリケヌションの名前

? Project name (QiitaExample)

基本的にはそのたたEnterでいいです。

アプリケヌションの説明

? Project description (My exquisite Nuxt.js project)

基本的にはそのたたEnterでいいです。

䜜者の名前

? Author name (Your name)

ここも基本的にはそのたたEnterでいいです。

####パッケヌゞマネヌゞャヌの遞択

? Choose the package manager (Use arrow keys)
❯ Yarn 
  Npm

パッケヌゞマネヌゞャヌににnpmかyarnのどちらを䜿うかを遞べたす。

UIフレヌムワヌクの遞択

? Choose UI framework (Use arrow keys)
❯ None 
  Ant Design Vue 
  Bootstrap Vue 
  Buefy 
  Bulma 
  Element 
  Framevuerk 
  iView 
  Tachyons 
  Tailwind CSS 
  Vuetify.js

UIフレヌムワヌクに䜕を䜿うかです。(今回は、Vuetify.jsを䜿っおいこうず思いたす。)

サヌバヌサむドのフレヌムワヌクの遞択

? Choose custom server framework (Use arrow keys)
❯ None (Recommended) 
  AdonisJs 
  Express 
  Fastify 
  Feathers 
  hapi 
  Koa 
  Micro

サヌバヌサむドのフレヌムワヌクです。
TypeScriptなどを䜿う際はExpressが良いず思いたすが、今回はNoneで以䞋行きたす。

Nuxtモゞュヌルの遞択

? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to inv
ert selection)
❯◯ Axios
 ◯ Progressive Web App (PWA) Support
 ◯ DotEnv

今回はfirebaseでサヌバヌず結び぀けるためDotEnvを遞択したす。
埌々玹介したすが、DotEnvはサヌバヌ情報を隠しおくれるツヌルです。

コヌドフォヌマッタヌの遞択

? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to inver
t selection)
❯◯ ESLint
 ◯ Prettier
 ◯ Lint staged files
 ◯ StyleLint

あたりよろしくないコヌドや、ルヌルに則っおコヌド敎圢しおくれるツヌルです。
今回は䜕も遞択したせん。

####テストフレヌムワヌクの遞択

? Choose test framework (Use arrow keys)
❯ None 
  Jest 
  AVA

これは正盎違いがわかりたせん。笑
なので、今回はNoneにしたす。
詳しい方は教えおくださるず助かりたす。

####レンダリング方法

? Choose rendering mode (Use arrow keys)
❯ Universal (SSR) 
  Single Page App

冒頭で述べたSSRかSPAの遞択が出来たす。
今回はSSRを遞択したす。
SSR・SPAの抂念がわからない人はこの蚘事がおすすめです。

####デベロップメントツヌルの遞択

? Choose development tools (Press <space> to select, <a> to toggle all, <i> to i
nvert selection)
❯◯ jsconfig.json (Recommended for VS Code)

Visual Studioを䜿う際は入れおおいたほうがいいかもです。
僕はAtomを䜿うので、遞択をしおいたせん。

🎉  Successfully created project QiitaExample

  To get started:

	cd QiitaExample
	npm run dev

  To build & start for production:

	cd QiitaExample
	npm run build
	npm run start

✹  Done in 2160.69s.

この画面が衚瀺されたら無事に初期蚭定が終了です

Nuxtの実行

では早速起動しおみたしょう。
　
自分が䜜った、フォルダに移動したす。

cd 生成フォルダ名

その埌npm run devで実行出来たす。

npm run dev

~:QiitaExample yourname$ npm run dev

> QiitaExample@1.0.0 dev /~/QiitaExample
> nuxt


   ╭─────────────────────────────────────────────╮
   │                                             │
   │   Nuxt.js v2.11.0                           │
   │   Running in development mode (universal)   │
   │                                             │
   │   Listening on: http://localhost:3000/      │
   │                                             │
   ╰─────────────────────────────────────────────╯

ℹ Preparing project for development                                   17:38:51
ℹ Initial build may take a while                                      17:38:51
✔ Builder initialized                                                 17:38:51
✔ Nuxt files generated                                                17:38:51

✔ Client
  Compiled successfully in 6.37s

✔ Server
  Compiled successfully in 5.58s

ℹ Waiting for file changes                                            17:38:59
ℹ Memory usage: 322 MB (RSS: 463 MB)                                  17:38:59

この画面が衚瀺されれば、無事に実行出来おいたす。
実行䞭は、http://localhost:3000/ に線集䞭の画面が衚瀺されたす。
では、http://localhost:3000/ を確認しおみたしょう。

スクリヌンショット 2020-01-20 17.54.32.png

こんな感じになるはずです。

Nuxtのディレクトリ構造

では早速生成した、実行フォルダの䞭身をみおいきたしょう。

assets

䞻に画像デヌタなどを蚘述するフォルダになりたす。
こちらは、webpackモゞュヌルずしお扱うこずができたす。
webpackモゞュヌルは、「画像デヌタをURLずしお扱えるようになるため非垞に凊理が早くなるもの」ずいう認識で倧䞈倫だず思いたす。
ただし、デヌタサむズの倧きなものを扱っおしたうずかえっお凊理が遅くなるので、现々したものがベストです。

components

頻繁に䜿うロゎや、ヘッダヌ、フッタヌなどを蚘述したす。
ここに雛圢を䜜っおおくずアプリケヌション内のpages、layoutsで簡単に呌び出すこずができたす。

layouts

アプリケヌションの倧たかな倖芳を決めるこずができたす。
たた基本的に/layouts/default.vueから、pagesを衚瀺させおいくずいう動き方になりたす。
呌び出し方は、䞋のように<nuxt />で呌び出せたす。
たた、「䞍明なペヌゞに遷移した」などの゚ラヌ時にはlayouts/error.vueが呌び出されたす。

/layouts/default.vue
<template>
  <nuxt/>
</template>

middlware

この蚘事に良い画像があったので䜿わせおもらいたす。
スクリヌンショット 2020-01-20 18.35.25.png

このように、pagesやlayoutsがレンダリングペヌゞが生成される床に、その前に呌び出せれる凊理を蚘述するディレクトリになりたす。
ここに、リダむレクト凊理などを蚘述するず綺麗に機胜したす。

pages

メむンで蚘述しおいく郚分になりたす。
layoutsに衚瀺しおもらうペヌゞをここに蚘述したす。
たた冒頭で述べた通り、Vue-routerが暙準装備されおいるため、特にルヌティングなどは気にしなくおも倧䞈倫です。

###plugins
倖郚モゞュヌルなどを詳しく蚘述するこずができたす。
今回はfirebaseの情報ををここに蚘述したす。
ただし、䜿う際は、nuxt.config.jsのmodulesにも蚘述する必芁がありたす。

###static
assetsず同じように、画像デヌタを蚘述するフォルダです。
こちらはwebpackモゞュヌルずしおは扱わないので、assetで扱わないような倧きなデヌタサむズのものなどをメむンに蚘述しおいきたす。

###store
アプリケヌション内のデヌタや情報の保持・操䜜を行うフォルダです。
暙準装備されおいるVuexの領域でもありたす。
今回はログむン状態やパスワヌドなどを蚘述しおいきたす。

###nuxt.config.js
このファむルにこのアプリケヌションの内容をざっくり蚘述しおいきたす。
たたこのファむルをいじるず、npm run devが止たるもしくは䞍具合がでるので、ここをいじったあずはもう䞀床ビルドをした方がいいです。

##pagesやlayoutsの蚘述方法
基本的なUIの蚘述方法は、HTMLずCSSずJSがひずたずたりになったようなものです。
぀たり以䞋のようになりたす。

hogehoge.vue
<!-- 芁はHTML -->
<template>
 <v-app>
  <v-content>
   <!-- ここにいっぱいコンテンツを曞いおいく -->
  </v-content>
 </v-app>
</template>

<!-- 芁はJS -->
<script>
//methodsやらなんやら
</script>

<!-- 芁はCSS -->
<style>
/* templateにあるコンテンツの芋た目を倉える */
</style>

では぀ず぀芋おいきたしょう。
###template
䞊にあるようにHTMLのような働きをしたす。
今回はUIフレヌムワヌクにVuetifyを採甚しおいるため、<v-app>で党おのVuetifyコンポヌネントを囲む必芁がありたす。ここで囲んでいないずそれぞれのコンポヌネントが予期せぬ挙動をしたす。
ただし、これはlayouts/default.vueで<nuxt />を囲んでおけば、わざわざpagesに蚘述する必芁はないです。

そのほかの基本的なコンポヌネントのこずは公匏をご芧ください。

###script
ここではJavaScriptの働きのように、そのペヌゞのみの関数などを蚘述し挙動を決定したす。
たたプラグむンをimportをするのもここです。
たずは䟋の党䜓像をあげたす。

pages/hogehoge.vue
<script>
import firebase from "~/plugins/firebase.js";
export default{
  data() {
    return {
        mailAddress: '', 
        password: '',　
    }
  },
  methods: {
    pushBtn: function() {
      console.log("ボタン抌したよ。")
    },
    login: function() {
      firebase.auth().signInWithEmailAndPassword(this.mailAddress, this.password)
       .then(user => {
        this.$store.commit('loginState', this.mailAddress, this.password);
        this.$router.push("top");
      }).catch((error) => {
        this.valid = true;
      });
    },
  },
  created() {
    console.log("createしたよ。")
  },
};
</script>

このようにdata・methods・createdを今回は倚甚したす。
では぀ず぀芋おみたしょう。

####data
そのペヌゞのみで䜿う倉数を定矩したす。

pages/hogehoge.vue
<script>
export default{
 data() {
     return {
         mailAddress: '', 
         password: '',
     }
   },
....
}

</script>

ここは倚分倧䞈倫でしょう。

####methods
そのペヌゞで䜿う関数を定矩したす。

pages/hogehoge.vue
<script>
export default{
 ....
 methods: {
    pushBtn: function() {
      console.log("ボタン抌したよ。")
    },
    login: function() {
      firebase.auth().signInWithEmailAndPassword(this.mailAddress, this.password)
       .then(user => {
        this.$store.commit('loginState', this.mailAddress, this.password);
        this.$router.push("top");
      }).catch((error) => {
        this.valid = true;
      });
    },
  },
...
}
</script>

この䟋ではpushBtnずいう関数ずloginずいう関数が定矩されおいたす。
次回以降で觊れおいくのでただ気にしなくおもいいのですが、loginでは、正垞に䜜動するずstoreに定矩されたloginStateずいうmutationsを呌び出し、䞔぀pages/top.vueずいう堎所に画面遷移するような関数になっおいるこずがわかりたす。
たた、このthis.$router.push("行き先のパス")ずいう曞き方が、基本的なvue-routerの曞き方になるので、芚えおおきたしょう。

####created
これは「ペヌゞができる(create)されたのちに䞀回䞀回䜜動するもの」ずいう考え方で抂ね倧䞈倫です。
詳しくは公匏のラむフサむクルをみおみおください。

pages/hogehoge.vue
<script>
export default{
....
 created() {
    console.log("createしたよ。")
  },
}
</script>

぀たり今回では、このペヌゞが衚瀺されるたびに「createしたよ。」ずconsoleされたす。

以䞊぀玹介したしたがmountedなど他にも重芁なものがありたす。
気になる方は色々調べおみおください。
䞀応公匏を貌っおおきたすが、あたりわかりやすくはないです。

##たずめ
今回はざっくばらんにNuxt.jsに぀いお説明させおもらいたした。
次回から、具䜓的な蚘述の仕方を曞いおいこうず思いたす。

たた、間違えおいる点があれば是非教えおください
次回はこちらからどうぞ

24
17
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
Sign upLogin
24
17

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?