web: Next.jsやNuxt.js がなぜ静的サイトの作成に使われるのか？

C++とかそういった所謂レガシー言語ばっかり触ってきた人が静的Webサイトを作ろうとして Next.js / Nuxt.js の存在にぶつかった。

なぜ静的サイト作成にWebアプリで利用するようなJavaScriptフレームワークが？

結論

  • Next.js / Nuxt.js などのJavaScript フレームワークは静的サイト(HTML)をビルドする機能があるのでそれを使っているだけ。
  • JSを利用して書くことで、そのページに応じた処理などが記述しやすい(おすすめの記事とか？)。

背景

なんでこういう記事を書いたかの背景で、読む必要はない。

前提

自分の知識前提:

  • 静的サイトとは HTML + CSS + JS で作られたサイトで、 Nodeとかは出てこない
  • NodeとかnpmはAPIを介してバックエンドと通信して表示を行うようなWebアプリのフロントエンドを作成するのに使うものだと思っている

始まりは静的サイトを作ろうとしたところ

とある用事で静的サイトを作ってみようと思っていた。

BloggerやWordpressなどのサービスだとおんぶにだっこではあるが、デザインの細かいところに手が届かないし、妙なところでサイトの速度が遅くなることもあり、なおかつ動的なコンテンツを作るつもりは一切なかったので静的サイトを作ろうとしていた。

静的サイトのホスティングサービスを調べてみると、2022年の時点では以下がよくリストアップされていた。

  • Netlify
  • Firebase
  • Heroku
  • GitHub Pages

なんとなく知っている Firebase や Heroku はWebアプリを作るものだと思っていたのでリストされている理由がわからなかった。 GitHub Pagesは知っているがGitHubアカウントに紐づいて公開されてしまう気がしたのでちょっと嫌だった。

というわけで Netlify を選んだ。

Netlify のテンプレートでよくわからなくなる

Netlifyにはメールアドレスで登録ができたので、メールで登録実施。

そのあとテンプレートを選ぶ画面が出てくるのだが、自分が想定していないものばかり出てきた。

enter image description here

  • Next.js
  • Nuxt.js
  • Astro

これらは「前提」で書いていた通り、動的なサイトを作成するために必要なものであると思っていた。ここでよくわからなくなった。「静的サイトを作るサービスではなかったのか…？」

どうも静的サイトの作成にも利用されるようだった

Nuxt.jsのドキュメントにdeployのターゲットに関する記述があり、

Nuxt also works as a static site generator.

なるほど。

これらのJSフレームワークを静的サイトに利用する理由は？

元々自分がやろうとした方法

実は元々は自分が知っているドキュメント生成ツールの1つである Sphinx か AsciiDoctor のいずれかを利用しようと思っていた。これらは

  • テンプレートを設定して
  • 記事を書き
  • ビルドすると
  • 静的サイトが出来上がる (テンプレートにあればサイドバーとかもつく)

といった代物。大きな違いは記述言語がSphinx特有のものであるか、Markdownであるか、といった程度だった。

例えば Nuxt.js で何ができるか？

代表して Nuxt.js のことだけ述べる。

Nuxt.js は Vue.js というUI表示をMVCモデルで作成するためのJSフレームワークを基礎としており、Vue.jsの機能を拡張したような形で利用できる。それも含めて以下のようなことができると記載されていた1。

  • UI部品のコンポーネント化ができる (Vue.jsの恩恵)
  • コンポーネント化した部品でページ間で一定の画面レイアウトを維持しやすい
  • 自動的にルーティングしてくれる
  • Metaタグを生成する機能がついている
  • CSSアニメーションなどが簡単らしい
  • 様々なNuxtのモジュールが利用できる例えば以下
    • i18n対応 (多言語対応)
    • Markdown対応
    • Sitemap生成
    • Google Analytics対応

UIに強いJSフレームワークと、JSによる機能拡張によってWebサイトが簡単に作れるようになっているといったところなのかな。

まとめ

Sphinxよりも、RailsやDjangoなどに近い雰囲気でUIが作れるようになると思うので、確かにNuxt.jsなどの方が現代的な開発ができるのかな。あくまでSphinxなどはテンプレートを埋め込むツールなので、思想がそもそも違うといえばそうかもしれない。

学習コストだけは気になるが。

  1. 参考: https://www.vuemastery.com/blog/why-nuxtjs-is-the-perfect-framework-for-building-static-websites/ ↩︎

コメント

コメントを投稿

このブログの人気の投稿

gnuplot: グラフの色を変更する

イメージ
linetypeによる指定 linecolor + 色名による指定 任意の色を指定 linetype の番号によって指定する方法 gnuplotでは事前に定義されたlinetypeというものがあり、番号で指定することができます。これによりグラフの色を変更することが可能です。例えば： plot sin(x) linetype 2 # linetype を lt と省略して以下でも可能 plot sin(x) lt 2 ここで指定できる番号は show linetypes によって確認することができます。 gnuplot> show linetypes linetype 1, linecolor rgb "dark-violet" linewidth 1.000 dashtype solid pointtype 1 pointsize default linetype 2, linecolor rgb "#009e73" linewidth 1.000 dashtype solid pointtype 2 pointsize default linetype 3, linecolor rgb "#56b4e9" linewidth 1.000 dashtype solid pointtype 3 pointsize default linetype 4, linecolor rgb "#e69f00" linewidth 1.000 dashtype solid pointtype 4 pointsize default linetype 5, linecolor rgb "#f0e442" linewidth 1.000 dashtype solid pointtype 5 pointsize default linetype 6, linecolor rgb "#0072b2" linewidth 1.000 dashtype solid pointtype 6 pointsize default
続きを読む

[Linux] rsyncで進捗を確認する

イメージ
概要 ¶ rsync を実施する際に進捗を確認したい。 やり方 ¶ 要約 時間経過で変わる可能性のある進捗でもいいなら rsync -a --info=progress2 時間が多少かかっても確実な進捗が欲しいなら rsync -a --info=progress2   --no-inc-recursive 方法1(進捗は適宜でもいいですよ派) ¶ rsync では進捗状況を確認するオプションに ver.3.10 から対応 した。 そのオプションは --info=progress2 である。 rsync - a -- info = progress2 / what / to / backup / where / to / backup このオプションを行うと確かに進捗状況が表示されるようになるのだが、大きな階層構造を持つディレクトリをコピーしようとすると、 進捗状況が刻々と下限修正されてしまい、表示の意味がなくなってしまう。 方法2(最初からしっかりした進捗出してくれないと意味ないよ派) ¶ 進捗表示がずれてしまう問題の原因 ¶ 原因は、 rsync がver.3.0.0から導入したrecursive algorithmというアルゴリズム。 recursive algorithmは転送中にリアルタイムにディレクトリ構造を把握していく非同期な処理であり、 非同期なので最初にきっかりと結果が分かるわけではなく裏でこそこそとディレクトリ構造を把握して進捗状況を正確なものへと更新していく。 もちろん、非同期であるから転送開始自体は速やかに行われるという利点があるのだけど、進捗状況をちゃんと確認したい人間にとっては厄介かも。 そこで --no-inc-recursive ですよ ¶ そこで利用するのが --no-inc-recursive オプション。 rsync - a -- info = progress2 -- no - inc - recursive / what / to / backup / where / to / backup このオプションをつけると、recursive algorithmをオフにすることができる。 このアルゴリズムをオ
続きを読む

gnuplotで縦線を引きたい

イメージ
概要 gnuplotで描画するグラフにおいて縦線を引きたい。 以下のような感じ。 やり方は2通り やり方(1): 矢じりなし矢印 set arrow from x1, y2 to x2, y2 nohead を利用する やり方(2): with impulse によって特定のポイントへの縦線を描画する (こっちの方が楽かも) やり方(1): arrowによる方法 set arrow コマンドは矢印を描画可能です。 (x1,y1) から (x2,y2) への矢印を描画するには以下の様な命令をします。 set arrow from x1 , y1 to x2 , y2 そんでもって、矢じり部分を消すには nohead を利用します。 矢印から矢じり部分を消すと直線になります。 set arrow from x1 , y1 to x2 , y2 これを利用して、 (x1,y1), (x2,y2) をうまいこと設定すれば 縦線を引くことが可能ですね。 f ( x ) = x ** 2 set arrow from 5 , 0 to 5 , 25 nohead lt 3 plot f ( x ) これだけです。 因みに、 arrow を間違えてしまったなどで消したいときには show arrow で番号を確認して、 unset arrow <number> で消せます。 # ここで確認して show arrow # ここでその番号の arrow を消す unset arrow 1 やり方(2): with impulse による方法 (おすすめ) 座標を指定し、 with impulse によって縦方向の直線を描くことができます。こちらはやり方(1) に比べて終端のみ指定すればよいのが楽なポイント。 具体的には以下のようなコマンドになります。実際に利用する際には x y を直線を引きたい座標に置き換えてください。 plot "< echo x y" with impulse title "" # 極限まで省略すると以下でもOK
続きを読む