MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
【Nuxt.js】Vue.js + SSR を利用したWebサイトコーディングの可能性

【Nuxt.js】Vue.js + SSR を利用したWebサイトコーディングの可能性

公開日:2017年01月10日
最終更新日:2019年06月26日
オンスタ運営
エンジニア
マークアップ
ホーム > 全記事一覧 > 制作 > エンジニア > マークアップ > 【Nuxt.js】Vue.js + SSR を利用したWebサイトコーディングの可能性
このエントリーをはてなブックマークに追加
【Nuxt.js】Vue.js + SSR を利用したWebサイトコーディングの可能性
【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。
【PR】Vue.jsやJavaScriptをガッツリ好きな時間で学ぶならオンライン講座のUdemy。
お小遣い程度の出費で学べて仕事や勉強が捗るコースが沢山あります。
どんな講座があるかだけでも見ておいて損はありません。

こんにちは。エンジニアの石原です。

いよいよ2017年も始まりました。どうでもいいですが、新しい年が始まるとこの2017年とか平成29年とか、なんだか違和感が半端ないですね。 大体なれるのに4ヶ月ぐらい毎年かかるような。なんだか気持ち悪いです。

今日はちょっと技術寄りの内容を書いてみたいと思います。

なんとか Vue.js でWebサイトをコーディングできないか

約8ヶ月年前ほどに Vue.js を利用した簡単なSPAを構築するプロジェクトがあり、単一ファイルコンポーネント を利用した開発に刺激を受けました。

https://jp.vuejs.org/v2/guide/single-file-components.html

CSS設計ではコンポーネントという概念は非常に重要です。
BEMでもSMACCSでも、FLOCSSでも、基本的にはWebサイトをコンポーネントに分けるという考え方は、共通しています。

しかし、通常コーディングの流れとして、HTMLとCSSのファイルは分離されているため、どうしても作業が煩雑になりがちです。 Sass ファイルのコンポーネントファイルを作るのすら面倒だと感じるときがあります。(僕だけ?)

単一ファイルコンポーネントの中で、HTMLとCSS、JavaScriptをコーディングできるということは非常にシンプルで、
CSS設計がフロントエンド設計という概念にかわるんじゃないかと感じました。

しかも、Pug も使えるし、Sass でも Stylus でもいける。Scoped CSS にだって対応している!!

なんとか、これを、通常のWebサイト制作に持ち込みたい....そうすれば、いつかいだいた Web Components の夢を実現できる。。。。

そんなことを考えている方は他にもいらっしゃって安心しました。

Riot.jsでSSRを利用してサイトが生成したかった話 Grand Frontend Osaka 2016 Lightning Talk

しかし、vue 1系 では、SSRはコアに含まれておらず、別のパッケージを利用しなければなりません。試してみたけどうまくいかず....断念しました。

2.0 が出てからも挑戦してみるものの、弱小プログラマーである僕では歯が立たず....

Nuxt.js を知る

そんな中、Next.js に触発された Nuxt.js なるものが出たことを知りました。

Nuxt.js - Universal Vue.js Applications

試してみると、静的ファイルの生成までできる!!ファイルを追加するだけでvue-router にも登録されるし、これこそ待ち望んだものだ!!と歓喜。

実際に使ってみる

では、実際に使ってみましょう。 簡単に始めるためのテンプレートとしてhttps://github.com/nuxt/starter が用意されています。

1. インストール

vue-cli を利用することで、対話形式でインストールが可能です。

インストールが完了したらメッセージの通り実行し、依存関係をインストールしましょう。

Nuxt.js は4つのコマンドが用意されています。

コマンド 説明
nuxt http://localhost:3000 で 開発用サーバを起動します (Hot Reload 有り)
nuxt build webpack でアプリケーションをビルド
nuxt start プロダクションモードでサーバを起動します(nuxt build前に実行する必要があります)。
nuxt generate アプリケーションをビルドし、HTMLファイルなどを生成。

これらは、先程インストールした package.json の scripts にエイリアスとして登録してありますので、 それぞれ以下のコマンドで実行が可能です。

実際に立ち上げてみましょう。

ソースを見ても、ちゃんとSSRされていることがわかります。

2. ディレクトリについて

nuxt.js では、予め設定されたディレクトリ構造に合わせて構築をすすめることで、簡単に開発を進めることができます。

アプリケーション内で、import や require を利用してファイルを読み込む時に、エイリアスを指定することで、ディレクトリ階層に関係なくファイルをロードすることができます。

エイリアス ディレクトリ 説明
~ /  
~assets /assets LESS、SASS、JavaScriptなどのコンパイルされていないアセット
~components /components Vue.js のコンポーネントファイル
~pages /pages このディレクトリ内のすべての.vueファイルを読み込み、アプリケーションのルーターを作成
~plugins /plugins vue.jsアプリケーションをインスタンス化する前に実行するJavaScriptプラグイン
~static /static 静的ファイル。robots.txt や favicon など。
~store /store vuex store ファイル

エイリアスの例:

3. ページの作成

pages/ 配下に Vue コンポーネントを作ることで、自動的に vue-router へ登録されます。

pages/sample.vue を作成してみましょう。

http://localhost:3000/sample へアクセスしてみます。

また、動的なルートの設定もできるようです。(未検証)

https://nuxtjs.org/guide/dynamic-routes

4. レイアウトの作成

テンプレートエンジンではおなじみである、レイアウトにも対応しています。 試しに2カラムのレイアウトでサイドバーを追加してみたいと思います。

まず、layouts/twocolumns.vue を追加します。

次に、components/Sidebar.vue を作成します。

最後に、先程作成した pages/sample.vue のレイアウトを変更してみましょう。

ブラウザで見てみます。

サイドバーが追加されていることがわかりますね。

layouts を利用することで、普段テンプレートエンジンで行っているような構築も簡単に行なえます。

5. Scoped CSS について

Scoped CSS はうまくいきますが、CSS Modules はエラーが.... 

Scoped CSS の例:

コンパイル後:

追記: CSS Modules は以下をnuxt.config.jsに追記すると解決するとのことです。
また、次のリリースでコアに取り込まれるようです。

6. nuxt generate を実行してみる

では、静的ファイルを生成するコマンドである nuxt generateを実行してみます。

/dist 配下にファイルが生成されます。

dist
├── _nuxt
│   ├── 0.nuxt.bundle.js
│   ├── 1.nuxt.bundle.js
│   ├── 2.nuxt.bundle.js
│   ├── 3.nuxt.bundle.js
│   ├── 4.nuxt.bundle.js
│   ├── img
│   │   └── logo.png
│   ├── nuxt.bundle.js
│   ├── server-bundle.js
│   ├── style.css
│   ├── style.css.map
│   └── vendor.bundle.js
├── about
│   └── index.html
├── favicon.ico
├── index.html
└── sample
    └── index.html

試しにサーバーにアップしてみます。

https://dist-bcdizsatdr.now.sh/

https://dist-bcdizsatdr.now.sh/sample/

生成されていますね。

7. Vue.js を利用したコンポーネント例

では、Vue.jsでどのようにコンポーネントが作れるか簡単なサンプルを交えて紹介します。

Vue.js ではslotを利用して、親コンポーネントから子コンポーネントへ渡すことができます。
また、props を用意することで値を渡すことも可能です。

コンパイル後:

 

以上、簡単に使ってみました。
まだまだ始まったばかりのプロジェクトなので、今後も期待ですね。

メリットとデメリット

一通り使ってみた感じ、Nuxt.js は静的サイトジェネレーターとしても利用できそうな感触です。
一旦、メリット・デメリットを考えてみます。

メリット

  • 単一ファイルコンポーネントによる、設計の簡略化
  • Scoped CSS でコンポーネント作成がやりやすく
  • テンプレートエンジンとしても利用できる

Web Components を意識した設計ができることで、今後ベースとなるであろう概念でWebサイトのコーディングが行えます。

 

 

デメリット

  • Vue.js の学習コスト
  • 再利用性が低い (Vue.js に依存する)
  • まだローンチされたばかりなので、導入怖い

まだ公開から1ヶ月程しか経過していないので、いきなりプロジェクトで導入するには時期尚早かなという気がします。
また、Vue.js を存分に利用できることはメリットにもなりますが、
逆にどこまで実装を許可するかによっては、属人化したコードになる気もします。

あとはSass などを利用した場合に各コンポーネントでmixinや変数などをインポートしなければならず、ちょっと面倒なこともあります。

まとめ

Nuxt.js のことについて駆け足で紹介しましたが、いかがでしょうか?
Next.js から始まったこの流れは、これまでSPAなどのフロントエンド先端系カテゴリと、Webサイトコーディング系の橋渡しとなるような、そんな気がしています。

以上、もし誤り等ありましたらご連絡いただけますと幸いです。

メールアドレス: ishiharaアットgrow-group.jp

 

【PR】Nuxt.jsのオンライン講座をUdemyで探す
【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

Udemyを実際に体験した方の感想記事もぜひご覧ください♪

関連コンテンツ

IT系勉強会ってどう探せばいい?そんな時におすすめなIT勉強会検索サイト!
web担当者
エンジニア
セミナー・カンファレンス
デザイナー
制作
公開日: 2020年09月15日
最終更新日: 2020年09月15日
IT系勉強会ってどう探せばいい?そんな時におすすめなIT勉強会検索サイト!
  • # IT勉強会
  • # TechPlay
オンスタ運営
【CSS】CSSレイアウト組まとめ(前編)
マークアップ
公開日: 2018年09月08日
最終更新日: 2019年05月28日
【CSS】CSSレイアウト組まとめ(前編)
オンスタ運営
【Mac】SSH接続でXserverに接続してみよう(SSHクライアントソフト FileZilla設定も解説)
エンジニア
公開日: 2017年02月01日
最終更新日: 2019年07月04日
【Mac】SSH接続でXserverに接続してみよう(SSHクライアントソフト FileZilla設定も解説)
オンスタ運営
【Vue.js】初心者のワタシがつまづいた。Sassの共通変数をグローバルに読み込む方法
プログラミング
マークアップ
公開日: 2020年01月16日
最終更新日: 2020年01月16日
【Vue.js】初心者のワタシがつまづいた。Sassの共通変数をグローバルに読み込む方法
  • # Sass
  • # vue-cli
  • # Vue.js
  • # vuejs
オンスタ運営
コーダーはCSS設計に夢を見る
エンジニア
マークアップ
公開日: 2017年02月10日
最終更新日: 2019年05月28日
コーダーはCSS設計に夢を見る
オンスタ運営
残り5時間!Udemyで新規受講生向けのセール実施中!新規ユーザー向けに対象コースが¥1,320から
エンジニア
オンライン学習
オンライン学習キャンペーン情報
デザイナー
デザイン
プログラミング
制作
公開日: 2019年11月07日
最終更新日: 2019年11月07日
残り5時間!Udemyで新規受講生向けのセール実施中!新規ユーザー向けに対象コースが¥1,320から
  • # Python
  • # Udemy
  • # セール情報
  • # タイムセール
オンスタ運営
WEB用に使われる画像形式の基礎と特徴
Webデザイン
マークアップ
公開日: 2019年04月19日
最終更新日: 2019年06月15日
WEB用に使われる画像形式の基礎と特徴
オンスタ運営
【PHP】PHPでライブラリ管理!「Composer」を使ってみよう
エンジニア
プログラミング
公開日: 2018年12月06日
最終更新日: 2019年05月28日
【PHP】PHPでライブラリ管理!「Composer」を使ってみよう
オンスタ運営
【すべてのWeb制作者に伝えたい】Webサイトのフィードバック・チェックツール Pageproofer
エンジニア
公開日: 2019年02月09日
最終更新日: 2019年05月28日
【すべてのWeb制作者に伝えたい】Webサイトのフィードバック・チェックツール Pageproofer
オンスタ運営
【初心者必見】webAPIって何?webAPIの仕組みについて概要をザックリまとめてみた
web担当者
エンジニア
ツール
ディレクター
制作
公開日: 2020年06月23日
最終更新日: 2020年06月11日
【初心者必見】webAPIって何?webAPIの仕組みについて概要をザックリまとめてみた
  • # webAPI
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。