TIS ENGINEER NOTE

ITエンジニアのためのキャリア向上ノウハウブログ

プログラミング

次世代のWebフレームワークであるNuxt.jsを使ってみる

投稿日:

こんにちは、フリーランスエンジニアのてぃすです。

今日はVue.jsの開発を強力にサポートするWebフレームワークであるNuxt.jsについての簡単な紹介と開発の始め方について書いていこうと思います。

[toc]

Nuxt.jsについて

Nuxt.jsはVue.jsでWebフロントエンド開発を円滑に進めるためのフレームワークです。

メインの特徴としては、これまで実装難易度の高かったサーバーサイドレンダリングを簡単に実装するための機能を有していることです。

ただサーバーサイドレンダリングをしない場合でも、コンパイルなどをあまり意識せずに開発を始められることからVue.js開発のスタートキットとしても優秀ですし、nuxt generateなどの便利な機能から静的なWebページ生成ツールとしても高い有用性を備えています。

これからVue.jsを始めたいという人にもお勧めできるくらい完成度の高いフレームワークです。個人的な感想としては、フロントエンド界のRuby on Rails的なポテンシャルを持っているのではないかと考えています。

Nuxt.jsで開発を始める

では早速Nuxt.jsで開発を始めるための手順を紹介していこうと思います。基本的にはNuxt.jsの公式ドキュメントをベースに紹介しています。Nuxt.jsの公式ドキュメントは非常に充実していますので、開発する中で困ったことがあったら、まずは公式ドキュメントを参照するようにしておきましょう。

インストールから初期画面表示まで

Nuxt.jsの開発を始めるにはまず2つの方法があります。

スターターテンプレートを使う方法

Nuxt.jsの開発チームが用意したスターターテンプレートを使用して、コマンド1つで基本的なファイル構成が出来上がります。あとは自分の作りたいサービスに合わせてファイルを追加したり書き換えたりすることで簡単に開発を始めることができます。

フルスクラッチで始める方法

最初に1つずつファイルとディレクトリを用意して、自分でファイルを付け加えながら開発を進める方法です。Nuxt.jsのディレクトリ構造を調べながら進める必要がありますが、余計なファイルを作られないことと、Nuxt.jsの基礎を身につけながら環境構築を進めることができますので、オススメの方法です。

スターターテンプレートを使う場合

まずはVue.jsのコマンドラインツールであるvue-cliをインストールする必要があります。こちらはVueの開発をスムーズにするツールとして既にインストール済みの人もいるかも知れません。その場合はスキップしてもらってOKです。

yarn global add vue-cli
npm install -g vue-cli

vue-cliのインストールが完了したら、vueコマンドが使えるようになっていることを確認した上で、自分のPC上の作業用ディレクトリで以下のコマンドを実行します。

vue init nuxt-community/starter-template <プロジェクト名>

自分の場合~/workspaceを作業スペースとしているので、以下のように実施しました。

~/workspace > vue init nuxt-community/starter-template nuxt-sample

コマンドを実行するといくつか質問形式で入力画面が表示されますが、基本的にはEnterでスキップしてしまってOKです。

? Project name nuxt-sample
? Project description Nuxt.js project
? Author tis <sample@sample.com>

   vue-cli · Generated "nuxt-sample".

   To get started:

     cd nuxt-sample
     npm install # Or yarn
     npm run dev

するとこれだけでコマンドを実行したディレクトリ配下にプロジェクト名で入力した名前のディレクトリが作成され、その中に基本的なNuxt.jsのファイル構成が出来上がります。(説明用にVisual Studio Codeを使用しています。)

ファイル構成が出来上がっていることを確認したら、vue initコマンドの実行結果の下にも表示されているスタート用のコマンドを実行します。

cd nuxt-sample
yarn install
yarn run dev
cd nuxt-sample
npm install
npm run dev

上記コマンドを実行すると最後にOPEN http://localhost:3000と表示されますので、ブラウザでhttp://localhost:3000開いてみましょう。Nuxt.jsのサンプル画面が表示されます。あとは作りたいサービスに応じてテンプレートファイルをいじったり模倣したりして、開発を進めていきましょう。

フルスクラッチで始める方法

自分でファイルを追加しながら始める方法ですが、こちらも手順としては非常にシンプルです。

まずは自分の作業ディレクトリ配下にプロジェクト名でNuxt.js開発用のディレクトリを作成して、その階層に移動します。例ではnuxt-sample-manualというサービスを作るとします。

~/workspace > mkdir nuxt-sample-manual
~/workspace > cd nuxt-sample-manual

次に作成したディレクトリにpackage.jsonを作成して、nuxt用の記述を追加します。

まずはファイルを作成して、

~/workspace/nuxt-sample-manual > touch package.json

以下のように内容を記述します。

{
    "name": "my-app",
    "scripts": {
      "dev": "nuxt"
    }
}

記述し終わったら、Nuxtをカレントディレクトリにインストールします。

yarn add nuxt
npm install --save nuxt

Nuxt.jsのインストールが完了したら、基本となるディレクトリとファイルを作成します。

~/workspace/nuxt-sample-manual > mkdir pages
~/workspace/nuxt-sample-manual > touch pages/index.vue

このpages/index.vueがlocalhost:3000に接続した時にNuxtの方で自動的に呼び出してくれるファイルとなります。試しに以下のようにファイルの中身を編集してみましょう。

<template>
  <h1>Hello world!</h1>
</template>

編集を保存したら、スタートテンプレートの時と同様に開発用サーバーを起動します。

yarn run dev
npm run dev

localhost:3000に接続することで、先ほどよりは地味ですが、保存した内容が画面に表示されることを確認できます。

まとめ:早速開発をスタートしましょう

いかがだったでしょう。できる限り丁寧に初心者の方でも躓きにくいように説明してきました。

以下の記事では開発環境が整った後に、スムーズに開発を行うための設定などを紹介しています。よりNuxt.jsでのフロント開発を加速させたい人は是非ご覧になってみてください。

https://tisnote.com/nuxt-js-setting/

これからのフロント開発において、主力となってくるであろうNuxt.jsの開発手法を身につけて、エンジニアとしての価値を高めていきましょう。

閲覧いただき、ありがとうございました。

よく読まれている記事

エンジニア独立

2019/4/26

プログラマー・エンジニアが情報発信をするべき2つの理由

こんにちは。フリーエンジニアのてぃすです。 プログラマー・ITエンジニアとして働いている人が、SNSやブログで積極的に技術的なTipsや働き方に関する考え方を発信しているのをよく見ると思います。 情報発信をしたことのない人からすると、なんでそんな一銭の得にもならない行為をやっているのか、という疑問も湧いてくるでしょう。 知っている人は知っていることですが、エンジニアにとって情報発信ってすごいメリットがある行為なんです。 そこで今日はプログラマー・ITエンジニアが今すぐにでも情報発信を始めるべき2つの理由を ...

続きを読む

エンジニア独立

2019/4/15

プログラマーがフリーランスになって独立するために必要なスキル

こんにちは、フリーエンジニアのてぃすです。 ITエンジニアが独立するべきか、しないべきか。昨今のエンジニア・プログラマーの働き方議論において、最もホットなのがこの話題じゃないでしょうか。 賛否については、それぞれの立場や環境によって感情論も混ざって言い分は異なりますし、経験したこともない人の否定意見も飛び交って魑魅魍魎が跳梁跋扈な感じです。 なので今回はそういった賛否ではなく、実際にプログラマーをはじめとするITエンジニアが独立するためにはどの程度のスキル・経歴が必要かについてお話していこうと思います。 ...

続きを読む

エンジニア独立

2019/4/25

【正社員並みの保証】安心フリーランスエージェント・Midworksを徹底分析

こんにちは、フリーエンジニアのてぃすです。 今やフリーランスエンジニアという働き方もだいぶカジュアルになってきています。僕自身 文系大学卒 大したキャリアもコネもない という一般的には心もとない状態から独立しましたが、正社員時代と比べて収入も5倍ほどになり、リモート中心で非常にストレスのない毎日を過ごせています。 先日エンジニアの集まりに参加して、そこにもフリーランスエンジニアが何人かいたのですが、その人たちの多くからMidworksというエージェントを使っているという話を聞きました。 気になって調べてみ ...

続きを読む

エンジニア独立

2019/4/15

正社員エンジニアがフリーランスになるのは全く難しくないという事実

どうも、フリーランスエンジニアのてぃすです。 最近ではフリーランスエンジニアというのも珍しいものではなくなってきましたが、まだ誤解されている部分があります。 「フリーランスエンジニアになるのって大変なんでしょ?」 という誤解です。 エンジニアがフリーランスになるのに、 卓越した技術やセンス 業界内の幅広いコネ 仕事を取るための営業力 などは一切必要ありません。 今回はそのあたりの誤解を解消していきたいと思います。 フリーランス = ハイスキル ではない 世の中多くのエンジニアが誤解していることなんですが、 ...

続きを読む

エンジニア独立

2019/4/15

フリーランスエンジニアになって大変だったこと・苦労したこと

どうも、フリーランスエンジニアのてぃすです。 このブログでは基本的にITエンジニアの独立を勧めることが多いですが、今日はちょっと視点を変えて、フリーランスエンジニアとして活動する上で、苦労することに視点を当ててお話していこうと思います。 世間ではフリーランスをもてはやす声、それに対する反論などが飛び交っていますが、多くの意見が「フリーランス」という一括りにしたもので、実情を捉えていないものがほとんどであると感じています。 この記事では実際に僕がフリーランスエンジニアとして活動してきた中でリアルに体験してき ...

続きを読む

-プログラミング
-,

Copyright© TIS ENGINEER NOTE , 2022 All Rights Reserved Powered by AFFINGER5.