プログラミング

Vue.js・Nuxt.jsとGatsby.jsを触った所感／今後はVue.jsから学んでいく

こんにちは、氷犬です。

ふとJavaScriptを使った開発がしたくなりまして、Vue.js/Nuxt.jsとGatsby.jsを触ってみたので、概要とか所感を書き記してみます。

触ったといってもそこまで大層なものではなく、チュートリアルをしてみただけです。

なお、前提として、僕が扱える言語とレベル感は以下のとおりです。

  • HTML：サイトの枠組みと基本的なタグの使い方がわかる
  • CSS：Sass,Scssはあまり使えない（実戦で使っていない）
  • JavaScript：jQueryの基礎（ほぼ使っていない）
  • PHP：WordPressの簡単なカスタマイズができる程度

実際、WordPressくらいならHTML/CSSがわかれば何とでもなるので、そこまで技術力は高くありません。

ただ、WordPressに頼ってばかりだとエンジニア的能力が見につかないので、JavaScriptを触ってみようと思いました。

JavaScriptの各ライブラリ・フレームワークの特徴

まずは各ライブラリ・フレームワークの特徴から。

もし解釈が間違っていたら、Twitterなどで指摘いただけるとありがたいです。

Vue.js

JavaScriptを扱いやすくしたフレームワークのこと。読み方はビュージェイエス。

学習コストが低いのと、ビューとデータを紐付ける双方向データバインディングが特徴です。

LaravelやRuby on Railsと組み合わせてフロント開発をするのが流行っています。SPA（シングルページアプリケーション）も作れます。

脱jQueryの置き換えとして選ばれることが多いらしいです。

ロゴやコンセプトカラーがダサいと言われているけど、個人的には好みです。

コンポーネント思考

任意のHTML要素を部品（コンポーネント）として定義することで、簡単に使い回せるようになる。

コンポーネントはJS側で管理するので、細かい修正が楽。

参考リンク

Nuxt.js

JavaScriptを扱いやすくしたフレームワーク「Vue.js」をさらに使いやすくしたフレームワークです。読みはナクストジェイエス（ヌゥクストではない）。

Vue.jsをベースにしたものなので、コンポーネント思考・SPAが作れるといった特徴があります。サーバーサイドレンダリング（SSR）ができるのも特徴です。

Vue.jsとの違いは、Nuxt.js単体でサイトやアプリケーションが作れること。Vue.jsが部品で、Nuxt.jsが工具箱といったイメージです（わかりにくかったらすみません）。

静的サイトジェネレーターとして使うと、爆速なサイトが作れます。

Vue.jsとNuxt.jsは公式サイトが日本語化されているのもいいですね。

参考リンク

Gatsby.js

Gatsby.jsはReactベースのフレームワークです。読みはギャツビージェイエス。

PHPやRubyといった言語で作ったサイトは、ユーザーが見る時にサイトが動的に生成されます。

一方で、Gatsby.jsのような静的サイトジェネレーターはあらかじめページを生成（ビルド）しておくのが特徴です。それにより、素早くサイトを表示させることができます。つまり、爆速で表示されるサイトができます。

更新頻度がそれなりで、速くてシンプルなブログやサイトを作りたいのであれば採用してもいいと思います。

参考リンク

Vue.js・Nuxt.jsとGatsby.jsを触ろうと思った理由

前々からVue.jsやRuby on Railsをやりたいと思っていたのですが、本業（Webマーケティング）にさほど関係ないことなので、特に取り組もうとしていませんでした。

ただ、SANGOの作者であるCatNoseさんが個人ブログ「CatKnows」をGatsby.jsで作っていたり、Code KitchenというリファレンスサイトをNuxt.jsで立ち上げられているのを見て「こんなサイトを作りたい！」と思い、始めることにしたのです。

あのShell（黒い画面のやつ）を使った開発っていかにもプログラミングっぽいし、そういう雰囲気を味わいたかったので始めたのもあります。

そして、Nuxt.jsとGatby.jsのチュートリアルをしてみた

そして、Nuxt.jsを【Ch.1】 Nuxt とは？動かして理解する【Nuxt de Portfolio】で触り、Gatsby.jsの公式のチュートリアルをこなしてみました。

どちらも面白いなとは思ったのですが、Nuxt.jsの方が汎用的に使えそうだったので、Vue.jsとNuxt.jsを勉強することに。

今はUdemyで以下の２つの動画を買って、コツコツとインプットしています。

目標はマーケティングのリファレンス的サイトを作ること

VueとNuxtを学ぶ上での目標は、マーケティング用語や概念をまとめたリファレンス的なサイトを作ることです。

WordPressで作ってもいいのですが、重くて利便性に欠けると思って、ゼロから立ち上げることにしました。

急いで立ち上げても僕の経験値的に書けることがそんなにないのと、本業への影響が大きいかと言われるとそこまででもないので、のんびり作ろうと思っています。

とりあえずは５月のGWにリリースできたらいいなーという感じです。できたらTwitterでも告知するので、お楽しみに。

今後、ブログでプログラミングの学習記事も書いていきたいので、ゆるりと見ていただければ嬉しいです。よろしくお願いします。

関連記事一覧

【Web制作】JavaScriptとjQueryの独学方法をゼロからまとめました

WordPressの学習方法をゼロからわかりやすく解説【Web制作】

プログラミングのモチベーションが続かない人を励まします【自分もそう】

プログラミングを独学した後のルート４パターン【プログラミング学習中の人向け】

プログラミングを独学した後のルート４パターン【プログラミング学習中の人向け】