Nuxt.jsが流行っているらしいので使用してみた件

5250 ワード
JavaScript Vue.js nuxt.js Express.js Node.js JavaScript テキストリンク

Nuxt.jsが流行っているらしいので使用してみた件

最近でもないのかな？JS由来のフレームワークやらライブラリやらがフロントエンドの主流になってきてるらしいですね。
なので今回、自分自身学習のアウトプットも兼ねてQiitaで情報発信していこうと思います。
不慣れなところもあるとは思いますが、何卒よろしくお願いします。

そもそもNuxt.jsってなんすか。

vue.jsの機能をふんだんに盛り込んだフレームワークという認識でいいと思います。
（SEO対策に強いとかSSRとかいろいろあるけど詳しくは公式ドキュメントを見てね）
Nuxt.js公式サイト

実際に動かしてみよう。

Nuxt.jsで開発を進めていくにあたってNode.js環境が必須なので、インストールがまだの方はこちらの記事を参考にされてみてください。

本当の初心者のためのNode.js超入門　~環境構築編~

インストールが終わったら、下記のコマンドをお手元のCLI（Mac:コンソール, Win:コマンドプロンプト）にて実行してみましょう。

Iterm2
npx create-nuxt-app <namespace> //namespaceは任意の文字

対話形式でいろいろ聞かれます。

  • プロジェクト名
  • 使用する言語（TSは言語認識か微妙なところ）JS or TS
  • Yarn or npm（高速なyarnが推奨！どうしてもnpmがいい人はそれでも問題はないです。）
  • UIフレームワーク(個人的にはnoneでおk。後々でも追加はできます。)
  • Axios(http通信)かPWA(モバイルapp)かCMS(WordPressなどをいじりたい人)か。Webappを作るならaxios推奨
  • Lint tool(コードを綺麗に整形してくれる便利なやつ。ESlintで問題ない。)
  • Testing frameworkの選択 無難にjestにしましょう。
  • SSRかSPAか。個人的にはSSRがオヌヌメです。
  • Serverかstaticか。これはserverで問題ないです。staticを作りたくなったらそれ用のコマンドがあります。

あとの項目はEnter連打で大丈夫です。

Server Side Rendering(SSR)のメリット

  • SEO対策に効果的！
  • ページの表示が爆速！
  • OGの設定が容易！

Server Side Rendering(SSR)のデメリット

  • サーバーへのデプロイがやや大変。(人によっては致命的)

Single Page Application(SPA)のメリット

  • 実装が容易
  • サーバーの準備が比較的簡単
  • ページ遷移が爆速

Single Page Application(SPA)のデメリット

  • 初期表示が遅い。。。
  • OGの設定が詳細にできない。

などがありますので、これらを踏まえた上で選択してみてください。

ここまでくればやや時間を要しながら、appの作成が完了したと思います。

iTerm2
cd <namespace> //自分のappの名前

でディレクトリに入り、

iTerm2
yarn dev //npmの人は npm run dev

で実行します。(正式には開発モードと言ってローカルで変更した値を即時にビルドして実行してくれる便利なやつ。)
デフォルトではポート3000番が開かれてますのでwebブラウザからlocalhost:3000にアクセスしてみましょう。

しっかり表示されてますね。ひとまず安心。

作成したディレクトリに入ると様々なフォルダが作成されていると思います。
何が何だかわからなくて挫折してしまいそうになりますが、グッと堪えてざっくりと概要を理解していきましょう！！

ディレクトリの紹介

  • .nuxt 自分たちが書いたコードをえっちらおっちら実行可能なコードに直してくれているところ。
  • assets 今後cssなどを入れるためのところ
  • components vue.jsは基本的にコンポーネント（部品）で管理していきます。その部品を記述するところです。コンポーネント指向がいまいちわからないよ。という方向けに下に参考文献貼っておきます。
  • layouts ページ全体の共通部分をここに記述します。（eg. header footer）
  • middleware レンダリングされる前に実行したい関数の置き場所(認証されてないユーザーへのlogin画面へのリダイレクトなど。)
  • node_modules 先人たちのありがたい知恵が詰まった場所。yarn add xxxとかするとここに入るよ。
  • pages これが本当に便利。この中に新しくファイルを作ると、そこに勝手にパスを通してくれる。
  • plugins 全体を通して使用したい関数などを記述する。
  • static faviconや画像などをここに置いておく。
  • store アプリケーションを通してのデータの保持。login情報などに主に使用される。
  • test テストに関する記述がある。

参考文献:
Vuejsのちょっと便利なコンポーネント機能
【Nuxt.js】 middleware is 何？
Nuxt.jsのpluginsにaxiosの共通部品を実装する

とまあこんな感じでゆるっと理解しておけば、いずれ役に立つかと思います。

こんな感じでどしどし開発を進めてみてください。

これから機能ごとに記事をいくつかアップしていこうと考えてます。

もしよければそちらも参考になさってください。

ご視聴ありがとうございました(_ _)