Wantedlyは、月間150万人が利用する国内最大のビジネスSNSです

This page is intended for users in Japan. Go to the page for users in United States.

【開発者ブログ】社内でNuxt.js勉強会を開催しました

こんにちは、フロントエンドエンジニアの小原です。先日のブログでも書きましたが、今Vue.js界隈で一番熱い「Nuxt.js」について、社内勉強会を行いました。

いつも通り、GitHubに勉強会で作ったスクリプトは上げてあります。
GitHubリポジトリ
※今回は参加者のNuxt.js(とWebpack)の構築の学習も兼ねているので、あえてGitHub Pagesは使っていません。興味がある方はクローンして、実際にローカルで構築してみてください。
以下は使ってみた感想です。

環境構築が楽になる

この手のフロントエンドフレームワークの環境構築というと、packageやconfigを書くだけで面倒だったり、必要なライブラリをnpmでインストールしたりと何かと最初の敷居が高いのですが、今回は非常に簡単に環境構築できました(初めてwebpackを構築したときは半日かかった。。。)もちろん、UIライブラリやプラグインなどを追加する場合は、npmやyarnなどでインストールする必要があるのですが、少なくとも最初の構築でコケることはありませんでした。

軽いVue.jsを簡単にフルスタック化するフレームワーク

公式サイトでは「ユニバーサル Vue.jsアプリケーション」と名乗っていますが、印象としてはVue.jsをwebpackによってフルスタック化したものと言う感じでした(フルスタックの定義にもよりますが、UIライブラリからルーティング、レンダラやコンパイラを内包しているので、Angular的なフルスタックフレームワークだと思う)。
一方でES6(ES7)、TypeScript、CoffeeScriptなど複数のECMAScript/AltJSに対応している、構文的にはHTMLとCSSとJavaScriptが分離されているというVue.jsの特性、SSRだけでなくSPAや静的なページの生成も可能と、できることの多さの割に学習コストが低いという、Vue.jsの特性も保っていました。AngularですとTypeScriptでの開発が前提になりますし、Reactは思想的な背景からロジックとUIが結合してます(※この辺はReduxを使えばある程度解消ですが…)。

Vuexうめえ

現状のeatではVuexは部分的に使っているのですが、Vuexでフロントをコンポーネント的に書くのがすごく楽でしたね。これはNuxt.jsの特徴というよりもVuexの特徴ですが、Vuexが最初からフレームワークに取り込まれているので、構築に悩むことがないという意味で、Vue.js初心者が次にコンポーネントを学習するのに最適だと思います。もっと簡単という意味ではRIOTというものもありますが、拡張性ではVue+Vuexの方が優れています。
またReactでよく使われるJSXと違い、デザインとロジックを分けるというMVC(MVVM)の思想も受け継いでいるので、コンポーネント指向とMVCモデルのいいとこ取りという感じですね。

豊富な日本語ナレッジ

Vue.jsはVueの公式ドキュメントも含め、日本語ナレッジが豊富です。Nuxtもやはり公式ドキュメントが充実しています。流行しているおかげでQiitaにも多くのナレッジが投稿されています。困ったときは、たいていググればなんとかなる。

単なるSSRフレームワークではない、Vue.jsによるWebフロント開発フレームワーク

Nuxt.jsはSSRフレームワークとして流行していますが公式サイトにもある通り、SSR/SPA/静的サイトの生成と様々な使い方ができます。WEBメディアやWordPressテンプレートならばSSR、WebアプリならばSPA、コーポレートサイトやドキュメントなどを作るなら静的サイトの生成といった感じでしょうか。
「静的サイト?普通にHTMLとCSSとどう違うの?」と思われる方もいるかもしれませんが、ヘッダーやフッター、サイドバーなど共通部のコンポーネント化、画像などのアセット管理、Vue.jsを使ったフォームのバリデーションなど、APIの導入など、通常のサイト制作でもメリットがあります。
SPAを構築するにしても、上記にも書いたとおり環境構築が大幅に楽になるので、導入するメリットは大きいです。

これを使ってなんか作りたいなー

eatプロジェクトにも将来的に導入するにしても、勉強半分遊び半分で個人的になりか作りたいなー欲が出てきました。そんな訳で次回は「Nuxt.jsで○○作った」になりそうです。

ブラニュー株式会社では一緒に働く仲間を募集しています
Anonymous
Picture?height=40&width=40
Picture?height=40&width=40
Picture?height=40&width=40
2587e2d2 79cb 4dd6 b478 e658c543cbb9
Ae5c085c 7a31 499b b5e3 e347c87a28c1
5 いいね!
Anonymous
Picture?height=40&width=40
Picture?height=40&width=40
Picture?height=40&width=40
2587e2d2 79cb 4dd6 b478 e658c543cbb9
Ae5c085c 7a31 499b b5e3 e347c87a28c1
5 いいね!

今週のランキング

ランキングをみる

Page top icon