サイトアイコン KOKENSHAの技術ブログ

nuxt.js簡単に試せる！（ページを作るまで）超簡単手順

カワシマ

とても注目しているvue.jsですが

それのサーバーサイドレンダリング（SSR）版！nuxt.js

React.jsですと、next.jsがありますように

vue.jsのnext.js版です。

とりあえず、動かしてみましょう！

目次

nuxt.jsを動かすための準備

もちろん、あなたのPCにnode.jsをインストールしている状態です。

あとは、vue-cliがインストールしている状態です。

まだの場合は

npm install -g vue-cli

でインストールして下さい。

そのあと、下記のコマンドを実行してプロジェクトを作成します。

vue init nuxt-community/starter-template <your-project-name>

starter-templateはあらかじめ用意されているデフォルトのプロジェクトテンプレートです。

私は、プロジェクト名は「nuxttest」にしています。

あたなは、好きなプロジェクト名にして下さい。

その後パッケージをインストールします。

cd nuxttext
npm install

パッケージのインストールが完了しましたら

nuxtプロジェクトの起動

npm run dev

上記のコマンドで、プロジェクトを起動させて下さい。

そうすると、ターミナルではこんな感じになります。

http://localhost:3000にアクセスすれば、下のページが表示されます。

これはこう見えても何も変哲もありませんが

サーバーサイドレンダリング（SSR）

実は、これは全部サーバーサイドレンダリング（SSR）

されているのですね！

JavaScriptのフロントエンドようのフレームワークと言えば

Angular.jsからReact.js, Vue.js, Ember.js, Knockout.js Riotなどなど、みんな

SPAのアプリケーションを作るものが多くて、だいたい、ページはだいたいクライアント（ブラウザー）でレンダリング（作成）されるのですが

nuxt.jsもnext.jsもサーバーサイドレンダリング（SSR）するから

JavaScriptの実行による動的にブラウザーでHTMLを作るのではなく

HTMLになった状態で、サーバーから送られてきますので

Googleなどの検索エンジンからみれば、JavaScriptではなく

HTMLになっているため、キーワードなど拾いやすい訳です。

SEO重視かつ、JavaScriptでウェブサービスを構築したい場合は

nuxt.jsかnext.jsがやはり自然に視野に入りますね。

ソースをみてみましょう。

ちゃんとHTMLのタグが見れます。

SPAの経験のある方が、すぐ分かりますが、Angularなど、サーバーサイドレンダリング（SSR）の場合は、ほとんどHTMLのタグがなく、JavaScriptのリンクだけで構成される場合は多いです。（それが実行して画面を作っています。）

ページを追加してみましょう

これだけで終わると、少し物足りないので

ページを追加してみましょう！

例えば、about（自己紹介）的なページを追加するイメージで行きましょう。

まず、あなたが好きなTextEditorを開いて

pagesの下にファイルを作成してみましょう！

about.vueと名前をつけましょう！

まず、難しいことせずに、index.vueの内容をそのままコピーしてきて

subtitleのところ、「私の自己紹介ページ」に直して、

その下の二つのリングを消して下さい。

それだけです。

そうするとブラウザーに戻って

http://localhost:3000/about にアクセスしてみて下さい！

あ！出てきました！

こういうことですね！

そうなんです！

pagesのフォルダの下に作ったものは全部、ブラウザー上のrouteに対応しています！

もうちょっとやりましょう！

今度は、変数を追加してみましょう。それもちゃんとHTMLの中に入るかどうかを確認しましょう！

自己紹介の下に

<h1> {{ text }}</h1>

を追加してください。

次にScriptのところに

data: () => {
    return { text: 'Hello World!' }
  }

を追加しましょう、上に「,」を忘れずに

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

そうしましたら、保存して、もう一回　https://localhost:3000/about　にアクセスしてみてください！

こうなっていませんか？

できました！ソースを見ましょう！

本来は、変数になっているところが、ちゃんとHTMLのタグとして作られていることが確認できます！

HelloWorldは本当はHTMLのタグになかったものです！本来は{{ text }}だったんですね。それをサーバーサイドで、HelloWorld!という文字列にしてから、HTMLのタグと一緒にブラウザーに送られてきました！

これはサーバーサイドレンダリング（SSR）ですね！

まとめ

今日は本当に超基本のところを紹介しましたが

これから、少しずつ、機能を追加していて、色々実験してみたいですね！

なかなか有望で、私が作ったいくつかのウェブサービスをnuxt.jsで書き直したいですね。

そういうのも機会があれば、ぜひ紹介して行きたいと思います！

記事のご要望等がありましたら

お気軽にTwitter等でご連絡ください！待っています！

 

[amazonjs asin=”4863542453″ locale=”JP” title=”基礎から学ぶ Vue.js”]

[amazonjs asin=”B07BS62Z94″ locale=”JP” title=”速習Vue.js 速習シリーズ”]

[amazonjs asin=”4774197068″ locale=”JP” title=”React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発”]

モバイルバージョンを終了