Nuxt.jsの静的サイトジェネレータ(SSG)とは

Nuxt.jsとは Nuxt.jsはVue.jsフレームワークをベースにしたJavaScriptのフレームワークであり、Nuxt.jsのSSG(Static Site Generation)はその中でも特定の機能の一つです。 ではNuxt.jsで実際にコードを書く前にSSGについて知識を深めておきましょう。 SSGとは SSGは、静的サイト生成とも呼ばれ、事前にサーバーサイドでページを生成し、それを静的なHTMLファイルとして提供する手法です。これにより、クライアントのリクエストごとにサーバーがページを生成する必要がなくなり、パフォーマンスやスケーラビリティの向上が期待できます。 Nuxt.jsのSSGは、開発者がNuxt.jsを使用して静的なサイトを構築する際に便利な機能です。 Nuxt.jsのSSGの特徴 Nuxt.jsのSSGは、サーバーサイドで動的なデータの取得やAPIの呼び出しが必要な場合には、ビルド時に事前生成するデータを取得するための特別なメソッドを提供しています。 要約すると、Nuxt.jsのSSGは開発者が静的なサイトを効率的に構築できる機能であり、パフォーマンスやSEOの向上に貢献します。 Nuxt.jsを使用したSSGの短所 Nuxt.jsのSSGにはいくつかの短所があります。以下にいくつかの一般的な短所を挙げます: 以上が一般的な短所ですが、これらの制約はプロジェクトの要件や目標によって異なる場合があります。Nuxt.jsのSSGは、静的サイトのパフォーマンスやSEOの向上に役立つ機能であり、適切な使用場面で優れた選択肢となることがあります。 では、Nuxt.jsのSSGの短所も理解できたところでNuxt.jsの強みであるSSRと比較してみましょう。 SSRとSSGの比較 SSR(サーバーサイトレンダリング)とSSG(静的サイトジェネレータ)のパフォーマンスの違いを表にしました。 SSR SSG 最新のページを表示できる ★★★ ★☆☆ リスポンススピード ★★☆ ★★★ ホスティングの柔軟性 ★★☆ ★★★ ビルドのスピード ★★★ ★★☆ 上記に上げられたようにSSRと比べてホスティングに制約がないこととサイトのリスポンスが早いことは理解できましたがSSRに比べるとビルドのスピードが遅くなることと、SSRのようにページの柔軟性がなくなります。 また状況によってはSSRとSSGを組み合わせたハイブリッドのサイトを作成することも可能になります。 Nuxt.jsのプロジェクト作成 では下記のコマンドでNuxtのプロジェクトを作成しましょう。 ではデフォルトではapp.vueがランディングページになっていることを確認します。 ちなみにこの<NuxtWelcome/>のコンポーネントはライブラリから引用されるデフォルトのコンポーネントなので消してしまってOKです。 静的サイトのビルド では下記のコマンドで静的サイトをビルドしましょう。 ビルドが終わると.output/publictディレクトリが作成されウェブサイトに必要なファイルがコンパイルされましたね。この中にindex.htmlがあるのでクリックしてください。 これがSSGのエントリーポイントになります。 まとめ Nuxtを使うことでクライアント側のレンダー、サーバー側のレンダーを意識することが増えるようになります。またSSGを意識することによってさらにウェブ開発の見方が広がることになります。是非試してみてください。

Nuxtでマウスで画面をドラッグしてスクロールさせる

Nuxtマウスでスクロール

お疲れ様です。最近のモバイルではユーザーが横幅に入りきらないボタンやメニューのアイテムをスクロールすることが当たり前ですね。 これを同じようにデスクトップで行おうとしてもブラウザではデフォルトでその機能が付いていません。 ですのでこのように見た目の汚いX軸のスクロールバーを使用するしかありません。 では今日はNuxtを使ってデスクトップでスクロールバーをなしでマウスでドラッグしてスクロールする方法を紹介します。 環境 今日はVueのSSRフレームワークのNuxtを使います。Vueの場合はクライアント側でレンダーされるのでWindowオブジェクトにアクセスできますが、Nuxtはサーバーサイドでレンダーされるのでデフォルトではwindowオブジェクトが使えません。この意味が分からない人は、まずはバニラJSでどうやってマウスを使ってスクロールができるのか知っておきましょう!Nuxtのプロジェクトができていることを想定して進めていきます。 VueUseライブラリ 今日はVueでもよくつかわれるライブラリのVueUseを使います。このuseMouseの機能を使ってVueでも簡単にマウスの現在の位置を手に入れることができるので自作で作るのが面倒な場合はこれが使えそうです。このVueUseのライブラリはSSRのNuxtも対応しています。 ではVueUseをインストールします。 インストールが完了したらNuxtのコンフィグファイルにこのモジュールを登録します。 カーソルの位置を知る ではモジュールを登録したところでグローバルでモジュールが使えるようになります。 これでカーソルが移動するたびにリアクティブに位置を取得できるようになりました。こんな簡単にできるとはすばらしいですね。 クリックイベントを作成 dえは下記の様にマウスイベントのクリック、マウスムーブ、マウスアップを作成してスクロールのポジションを変更していきます。 これでエレメント内でマウスクリックするとカーソルがつかむイラストに変わることが分かりました。 さらにつかんでいる間にマウスを移動させることでスクロールが移動できるようになりました。 const scrollcontainer=ref(null);はテンプレートrefでVueのやり方でHTMLタグにアクセスする方法です。 const{x}=useMouse();は、先ほど説明した通り現在のマウスの位置を知るモジュールです。今回はx軸だけ必要になります。 const isDragging=ref(false);はマウスがスクロールをつかんだかどうかをリアクティブに保管するための変数です。逆にisDraggingがfalaseの時は何も実行されないようにします。 const startingPosition = ref(0);x軸のスタートの位置です。初期では0にしておいて、クリックイベントで値を入れるようにします。 const postionDiff = ref(0);クリックが始まってからマウスを移動している際にリアクティブでその差を保管する変数です。では上記のデータをもとにmousedownScrollbar、mousemoveScrollbar、mouseupScrollbarを見てください。詳しい内容は関数内に書いたままになります。 最後に::-webkit-scrollbar要素を非表示にしてスクロールバーを隠して完成です!

【コピペだけ】NuxtJSでCodePenのクローンを作成しよう

皆さん、CodePenは使ったことがありますか?CodePenはHTML、CSS、JavaScriptを入力してその結果をブラウザで見れるウェブアプリになります。CodePenはCSSやJavaScriptを使ってアニメーションを探したりするときにつかったりします。 今日はシンプルなCodePenのクローンを作成したので紹介します。 CodePenの例: 今日は自作でJavaScript、HTML、CSSを入力できるエディターとその結果が表示されるアプリのベースを作っていきます。 完成形は画像のようになります。完成したコードはこちらのGitHubリポからどうぞ。 この記事を読む前に知っておくこと このコードで使用するテクニック リポジトリのクローン では下記のコマンドを使用してリポジトリからデモアプリをセットアップします。 ファイル構成 nuxt.config.ts Nuxtのコンフィグファイルです。 monaco editorのモジュールの登録と、PrimeVueのUIライブラリで使うスタイルのインポートをしています。 plugins/primevue.js pluginsディレクトリはNuxtで指定されているディレクトリでレンダー時にNuxtが自動で読み込んでくれます。ここでは、グローバルで使えるPrimeVueのコンポーネントを登録しています。 詳しいPrimeVueのセットアップの仕方の記事はこちらから。 pages/code.vue pagesも同じようにNuxtで指定されている、自動で読み込んでくれるディレクトリです。pages/index.vueがランディングページになります。 /codeのページに行くとcode.vueのページ(コンポーネント)が読み込まれます。 components/code/editor.vue componentsディレクトもNuxtで指定されているディレクトリになります。 ここで登録されたvueファイルはグロバーバルで<CodeEditor>のように使用することができます。ファイル名の最初が大文字になることと、componetsディレクトリからディレクトリ名を当ててパスをしてするような方法になります。 TabViewとTabPanel:PrimeVueのコンポーネントです。 MonacoEditor:monaco editorのNuxtライブラリで使えるコンポーネントです。 valueJS、valueHTML、valueCSS:初期値とユーザーが入力できるリアクティブな値 iFrameのsrcdoc:iframeDoc変数(computedのHTMLファイルをレンダーします) monacoConfig:テキストエディターのパラメーター(ダークテーマ、ミニマップの表示、行数の表示など) 上記で説明した部分が今回のメインとなるロジックになります。 追加できなかった部分 JavaScriptを実行した際にconsole.logの値をブラウザ(consoleタブ)に表示 これは、以下の理由より完成できませんでした。 お疲れ様でした。

NuxtJSをUbuntu/PM2/Nginxでデプロイしよう

Nuxtをデプロイしよう

今日はNuxtで試しに作ってみたフロントエンドロードマップのウェブアプリをUbuntuサーバーからデプロイします。 先にVueのデプロイの記事を読んでnginxを使ったサーバーを構築しておきましょう。 ちなみにAWS、Heroku, Digital Oceanなどのサーバーを使う場合は今日のようにプロキシサーバーを設定せずにデプロイできる方法があるそうなので見ておいてください。しかし、今日のNginxの設定はとても良い練習になるのでどのサーバーでも活用してみてください。 準備すること Nuxtビルドのチョイス Nuxtアプリをデプロイするにあたり、2つの方法があります。デフォルトはSSR:サーバーサイドレンダリングされる方法で設定されています。もう一つのnpm run generateのコマンドでstaticの静的サイトとしてビルドしたい場合はNuxtのコンフィグに下記のラインを追加しましょう。静的サイトの場合は普通のHTMLファイルのようにそのままデプロイできるのでプロキシサーバーの設定も不要です。 nuxt.config.ts 今回はSSRで行います。このような場合はNodeサーバーを使うためPM2でNodeのウェブサーバーを常時起動できるようにしておきます。詳しいPM2の説明は後ほど。 PM2 PM2(プロセスマネージャー2)はビルドインでロードバランスの機能がついているアプリケーションになります。このPM2がNodeJS(今回はNuxtJS)のアプリが365日常に起動されるように監視してくれます。 では、PM2をサーバーにインストールしましょう。もしローカルでLinuxで作業をしている場合は、PM2が起動するアプリを確認できるので同じようにPM2をインストールしてもOKです。 ではNuxtのプロジェクトのルート直下にecosystem.config.jsを作成し、下記の行を追加します。nameの部分は自分のアプリ名に変更しましょう。 次に下記のコマンドでPM2を起動し、NUXTのアプリが登録されるか確認してください。 実際にサーバーにコードを上げてから同じコマンドを実行します。 リポジトリをクローン では、UbuntuサーバーにSSHで接続をしたあとに、GitHubのリポジトリからNuxtのプロジェクトをクローンしましょう。もしローカルから直接ファイルを上げたい場合はSFTPなどでアップロードしてください。私はSSHクライアントはいつもMobaXtermを使っています。 Nginxのファイルを作成 Nginxをインストールしてコンフィグファイルを作成します。初めての人は理解するまでに時間がかかるかもしれませんが、それぞれのコマンドが何を操作しているのか調べるようにしましょう。 ではnanoなどのテキストエディタでNginxのコンフィグファイルを書いていきます。ここでとても重要なことを説明します。 今回のデプロイはPM2というプロセスマネージャーを使います。これで、127.0.0.1:3000にNuxtのウェブサーバーを常時起動させます。 それをNginxを使ってプロキシサーバーとしてロカールのPM2のウェブサーバーに飛ばすような形になります。 順番でいうと。。。 では、早速nginxのコンフィグを書いていきます。良い慣習としてetx/nginx/sites/available/にサイト名でコンフィグファイルを作成して下記の行を追加します。 listenはポートになります。通常は80番ポートにしてください。もしユーザーが他のポートでアクセスする場合は普通は、URLの最後にポートが必要になります。例:sankou.com:84 server_nameがホストマシンのIPアドレスです。もしドメインを取得している場合は、代わりにここにドメインを記載します。 proxy_passがPM2のアプリが起動しているURLを記載します。デフォルトで:3000なのでそのままでOKです。 ではNginxのテストをします。 OKがでれば問題なしです。 ファイヤーウォール もし80番ポート以外で設定した場合はポートを開けておくようにしましょう。 デプロイの確認 これでサイトのデプロイができました。 一応、このような感じになりました。 お疲れ様です。

NuxtにPiniaをインストールする方法

NuxtにPiniaをインストールする

今日はNuxtJSのウェブアプリのプロジェクトに状態管理システムのPiniaをインストールする方法を紹介します。 VueでPiniaを使ったことがある人、Nuxtのコンフィグファイルを触ったことがある人はなんとなくイメージがつかめると思います。 Piniaのインストール Nuxtのプロジェクトが設定できたところで、Piniaの公式サイトの説明に従いインストールを進めていきましょう。 コマンドラインから下記の通りPiniaをインストールします。 npmを使っている人はERESOLVE unable to resolve dependency tree errorというエラーが出るかもしれません。 その場合は、package.json:に下記の行を追加して、再度試してみて下さい。 次に、NuxtのコンフィグファイルにPiniaを登録します。 setup()の外でPiniaを使う場合 Vueの書き方で<script setup>があります。その外でPiniaを使いたい場合はpiniaオブジェクトをuseStore()に渡してあげるようにしましょう。慣習としてプロジェクトのルート直下にstoresディレクトリを作成してPiniaのファイルを格納するようにするようにします。 Piniaファイルを作成 ではsotesディレクトリ直下にJSファイルでPiniaを作成します。<script setup>に近い方法で書く方法を紹介しているので参考にしてください。この方法だとJavaScriptのやり方で書けるので見やすいと思いました。 イメージとしてはこのような感じになります。 お疲れ様です。

Nuxt3にPrimeVueをインストールする方法

Nuxt3にPrimeVueをインストールする方法

PrimeVueはVue.jsのUIライブラリでコンポーネントの数が多くお勧めです。今日は、SSR(サーバーサイドレンダリング)ができるVueベースのNuxtライブラリにPrimeVueを使う方法を紹介していきます。 Nuxtのプロジェクト まずは下記のコマンドでNuxt3のプロジェクトを作りましょう。 PrimeVueのインストール 次にPrimeVueをインストールします。 コンフィグファイルからインポート では、ライブラリをインストールしたところで、nuxt.config.tsファイルを開きます。 デフォルトでは何も記載されていません。 ではここにPrimeVueで使うファイルをインポートしていきます。インポートするファイルはPrimeVueの公式ページにあるので必要に応じて確認してください。 Nuxtのプラグインについて Nuxtではpluginsというフォルダーを認識して自動でVueアプリを作成する際にサーバー側でレンダーするかクライアント側でレンダーするか指定することができます。 フォルダーの構成はこのようにできます。 では公式ドキュメンテーションに従い、ファイルをインポートしていきます。 プロジェクトのルート直下にpluginsというフォルダーを作成して、primevue-plugin.jsファイルを作成しましょう。 例としてボタンのコンポーネントを使いたい場合はここで登録しておきます。Vueアプリのmain.jsと似たような感じですね。 ripple:trueはボタンなどで使われるアニメーションのことでデフォルトではfalseになっているので必要に応じて上記のようにtrueに設定してください。 コンポーネントの作成 では、PrimeVueのコンポーネントが登録できたところで、実際にNuxtでボタンを作ってみましょう。 pages/index.vueファイルを作成してデフォルトのランディングページを作成します。 詳しいページの作り方はこちらを参考にしましょう。 これで、テストサーバーを再起動するとPrimeVueのコンポーネントをFlexがちゃんとロードされていることがわかりましたね。 ではお疲れさまでした。

Nuxt.jsを始めよう:ページを追加する

Nuxt.js使い方

前回の記事ではNuxt.jsのセットアップの仕方を説明しました。 今日はNuxtを使ってページの追加の仕方、ラウティング(URLの設定)の仕方を説明します。Vueで構築したことがある人は、Nuxtのアプローチの仕方に関心されること間違いなしです。ユニークなレイアウトとroutingの設定方法に驚かされました。 pagesディレクトリ Nuxt.jsのルートディレクトリ(src)と同じ階層にpagesというフォルダを作成してみましょう。その中に例としてabout.vueのファイルを作成します。そうするとNuxtがこのフォルダを読み込みURLのrouting(ラウティング)をしてくれるようになります。 テスト用のウェブサーバーを起動してみてください。 まるで魔法の様です。しかし、これを読み込んでくれるおかげで、もともとあったapp.vueに変更が必要になります。 ではapp.vueを削除して、pagesの直下にindex.vueを作成してください。 このファイルがドメインの読み込み時に表示されるランディングページとして表示されるようになります。URLでいうと”/”です。 へえ。おもしろいですね。 では、URLをもっと複雑に設定したい場合は、pagesディレクトリにさらにフォルダーを作成してその中にvueファイルを作成してみます。 URL/products/index.vueはURL/productsのビューになり、URL/products/item.vueはURL/products/itemのビューになりました。 とても直感的です。 routerのパラメーター 以前にVue-RouterでURLパラメーターを設定できることを説明しました。URLにダイナミックなデータが入力されたときにそのURLのパラメーターを取得する方法です。例でいうとproducts/1やproducts/2などこの数字がユニークな商品のIDになることがあげられます。 このvueファイルは[id].vueの用に作成できます。 ファイル名の[]内にダイナミックにしたい名称を入れます。 これをuseRoute().paramsで呼び出してあげればOKです。 これでダイナミックなURLが完成できましたね。 NuxtLink しかし、このままではユーザーがURLに直接名称を入力しないといけないという非現実的な作業が発生してしまいます。ですのでナビゲーションバーを作成していきます。 NuxtLinkは自動的にインポートされるのでわざわざ<script>からインポートする必要がありません。 例としてトップページのpages/inedx.vueに下記の様にNuxtLinkを記載してみましょう。 ここで理解しておきたいのが<a>タグを使わないのでVueと同じようにSPAと同じように他のURLにアクセスができます。つまりページがリフレッシュされないのでユーザーエクスペリエンスが向上するということです。 レイアウト このままだとすべてのページにナビゲーションバーを設置しないといけないことになりますね。 そこでレイアウトを設定していくことにします。レイアウトはVueでおなじみの<slot/>で解決していきます。 ではプロジェクトのルートにlayoutsという名称でフォルダーを作成します。その中にdefault.vueを作成しましょう。 Nuxtが自動でlayouts/default.vueのファイルを監視して、<slot/>内にpageのビューを表示してくれるようになります。 カスタムレイアウト では、ページによってレイアウトが変わる場合はどうすればよいのでしょうか? その場合はlayoutsディレクトリ直下に別のレイアウトとなるvueファイルを作成して対応することができます。 例として、アイテムの詳細ページのレイアウトをlayouts/products.vueに作成します。名前は何でも良いです。 参考例として内容を下記の様にしてナビゲーションをフッターに移動しました。 では、このレイアウトを指定したビューに使えるようにするにはどうすれば良いでしょうか? この場合は、レイアウトを変えたいページのvueファイルに行きdefinePagemeta()を使用します。 参考例として、products/index.vueとproducts/[id].vueに下記のmetaを追加しましょう。 products/index.vue products/[id].vue これで、プロダクトページのレイアウトが変わったことが理解できましたね。 今日はNuxt.jsでページの使い方、レイアウトの使い方を学びました。 お疲れ様でした。

Nuxt.jsを始めよう

NuxtJSを始めよう

Reactを使っている人なら聞いたことはあるNext.js。そのVueバージョンがNuxt.jsです。Nuxt.jsはVue.jsをベースに作られたJavaScriptフレームワークです。サーバーサイドレンダリングが可能なので、より早く、SEO対策ができるウェブアプリの開発が可能になります。今日はNuxt.jsのバージョン3について解説していきます。 Nuxt.jsの強み Nuxt.jsの弱み また、ソースコードはGitHubのリポを確認してください。 Nuxt.jsを始める Nuxtのインストレーションガイドは公式サイトを参考にしました。コマンドでプロジェクトを作成していきます。バージョン3をインストールします。(Node.jsがインストールされていることが前提です。) ではライブラリがインストールされたところでデベロップメント用のサーバーを起動します。 これで初期のNuxtのセットアップが完了しました。 ファイル構成 nuxt.config.ts nuxt.config.tsはNuxtのコンフィグで使用するファイルでTypeScriptで構成されています。JavaScriptファイルの方が良い場合は.jsに変更することも可能です。このファイルでモジュールの登録やカスタムメタデータの登録をすることができます。また、ここにAPIキーなどのEnvironment Variable(環境変数)を登録することもできます。 app.vue デフォルトのルートコンポーネントになります。デフォルトでは、NuxtWelcomeのコンポーネントがマウントされるようになっていますが、これらのファイルはモジュールに埋め込まれています。Vueの場合はHelloWorldが通常のディレクトリに置かれているのでいちいち削除する必要がありましたがNuxtの場合は無視して削除する必要はありません。npm i でまたインストールされてしまうので。 .nuxt 開発の際にNuxt側で使われるディレクトリです。そのまま放っておいてください。 package.json おなじみのパッケージが一覧で記載されたコンフィグファイルです。npm i で記載されているライブラリがインストールされますね。 Welcomeページを削除 ではapp.vueにあるNuxtWelcomeを適当に入れ替えてみます。先ほども記載しましたがWelcomeNuxtのコンポーネントは削除しなくて良いです。 これでデフォルトのページがホットリロードされましたね。 お疲れ様でした。