TIS ENGINEER NOTE

27才文系出身フリーランスエンジニアのブログ

プログラミング

次世代の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です。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

よく読まれている記事

エンジニア独立

2018/8/22

【厳選】現役フリーエンジニアが勧めるフリーランスエージェント2選

こんにちは、フリーエンジニアのてぃすです。 エンジニア、特にプログラマーがフリーランスになろうとしたとき、人脈豊富なスーパーエンジニアでもない限り、最も現実的な選択肢がフリーランスエージェントを利用した働き方です。 とはいえエンジニアバブルの昨今、そういったエージェントサービスは数多存在しており、戦国時代状態です。 選択肢が多いということは嬉しいことであり、同時にどれを選べばいいかという悩みにもなります。 各サイトではメリットや自サービスの長所しか書かれていません。当然ですが。 そうなると選ぶ側としては迷 ...

続きを読む

エンジニア入門

2018/8/17

現役エンジニアからみたProEngineerの『エンジニアカレッジ』について

こんにちは、フリーエンジニアのてぃすです。 最近、 どうすればエンジニアになれるのか エンジニアになるためにどんな勉強をしたの? といった質問を受けることが多くなってきました。 エンジニアは高稼働のブラック職業であるという印象も薄れてきて、効率よく稼げる職業としての側面に気付き始めた方が増えてきたということでしょう。 とはいえ全くの未経験からITエンジニアに転向するというのは独学の場合、不可能ではありませんが、かなり難易度の高い挑戦であると言えます。たとえ独学で成し遂げたとしても、よっぽど運がよくない限り ...

続きを読む

エンジニア独立

2018/1/13

エンジニアの強い味方、フリーランスエージェントとは?

このブログで度々登場する単語であるフリーランスエージェント。 これまで正社員として企業に所属してきたエンジニアにとっては馴染みのない単語だと思います。 なんとなく案件を紹介してくれるサービスだろう。 食べログの飲食店が案件に変わったようなものだろう。 派遣の意識高い系なのだろう。 くらいの印象の方もいらっしゃるかも知れません。 そこで今回はエンジニアにとって、フリーランスエージェントとは何者なのか、利用することによってどんなメリットがあるのかについて説明していこうと思います。 フリーランスエージェントとは ...

続きを読む

エンジニア独立

2018/2/13

文系出身エンジニアが語る「弱いエンジニア」戦い方

こんにちは、フリーランスエンジニアのてぃすです。 僕は文系大学を卒業し、新卒で入ったITコンサル会社で入社半年後に軽くC#を扱う機会が訪れるまで、プログラミングやエンジニアリングに触れたことが一度もありませんでした。 パソコンも基本的に動画を見たりゲームをするための便利な箱くらいな印象。 一方、エンジニア業界には中学生時代から趣味でプログラミングをしてきたり、理系大学でバリバリ情報系を学んできたエンジニアがゴロゴロいるわけです。こいつらもう機械語で会話すればいいのにと思うレベルの猛者揃いです。 そうなると ...

続きを読む

office

エンジニア独立

2018/1/2

エンジニア歴2年の僕がレバテックフリーランスでフリーランスを目指してみた

正社員エンジニアからフリーランスエンジニアへの方向転換の一環として、業界最大手であるレバテックフリーランスの個人面談に出向いてきたので、その感想を書いていこうと思います。 フリーランスというと知識・経験・人脈を兼ね備えたスーパーエンジニアしかなれない存在だと思っている人も少なくありません。 しかし最近では今回紹介するレバテックフリーランスや以前の記事で紹介したギークスジョブなどといったエージェントを利用すれば、僕のように経験の浅いエンジニアでも十分に目指せる働き方となっています。 この記事が現在働いている ...

続きを読む

-プログラミング
-,

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