Viteは静的サイトにも使えそう

Home | Vite

Vite の説明は割愛。

まとめ

2021-03 時点で、

伝統的な HTML を生成する使い方は Vite 単体では無理なので他のものと組み合わせる必要がある

具体的には

  • HTMLを個別に生成する静的サイトジェネレータ（例えば Jekyll）と組み合わせる
  • Vite に plugin を追加することでも案外手軽に Server-Side Generation が可能
    • この場合は　HTML 全体を VDOM フレームワークで実現する必要がある

個人的にはそのうち各種ジェネレータ側の方で asset の処理を Vite に移譲する plugin も出てくるんじゃないかなぁという気がしている。

Viteにできること

以下は Vite 2.1.0 時点の話。

  • Vite はあくまで超高速アセットバンドラ
  • Vite 2 では build-in で複数ページ ( entry point ) を実現できている
  • HTML 側の共通化を諦めれば現状でもシンプルな静的サイト（ただし JAMStack ) の生成には使える

Vite の主眼はあくまで HTML ではなく bundle する asset の方なので、HTML を便利に作る方法は提供されていない。

HTMLを生成するには

SSG ( Server Side Generate ) を利用する。以下は Vue を使って SSG を行うもの。

antfu/vite-ssg: Server-side generation for Vite

セットアップにややクセがあるので注意が必要。Vue の createApp() を置き換えて自動的にセットアップする方式。

その他に

を利用して routing 情報をファイルシステムから自動的に構築してないとたぶんうまく動かない。

その他Viteに追加すると便利そうなもの

VDOM component を利用しないなら

Vueを利用するなら

Markdown を使うことで VitePress のようなものを作ることも可能。1

参考

つくってみた

wtnabe/example-vite-vue-ssg

全部入りスターターキット

antfu/vitesse: 🏕 Opinionated Vite Starter Template

これをマネするのが基本になると思う。

  1. 自分が試したところ VitePress は何が足りないのか分からないがうまく動かせなかった。vite-ssg + vite-plugin-pages は動作した。 ↩

PHPのメソッド呼び出しと配列アクセスの小ネタ

（これも3月19日のネタ）

いや、たいしたネタじゃないんだけどいつも忘れてガッカリするので。

以下のコードを用意したとする。

class Sample {
  function obj() {
    return $this;
  }

  function arr() {
    return array( 'a', 'b', 'c' );
  }
}

$obj = new Sample();

これに対する操作で PHP 4 と 5 でできることが異なる。

 PHP 4PHP 5
$obj->obj()->arr()×○

PHP 5 ではいわゆる fluent interface っぽく書ける。これ、知らなかった。うまく使えば PHP でもそれなりに気持ちのいいコードが書けそうだ。

ただし JavaScript や Ruby の好きな自分としては

new Sample()->obj()

とは書けないとか、

$obj->arr()[1]

とは書けないとか、まだまだ不満は大きいんだけど1。

  1. 後者は http://gist.github.com/69448 こういうツールを用意しておくとだいぶマシ。 ↩

バッカスというと Bacchus を思い出しちゃう人間ですが

    スラッシュドット ジャパン｜FORTRAN言語の生みの親、J・バッカスさん死去

    そう言えば FORTRAN 77 を触る前後が転機だったような気がするなぁ。あんまりいい思い出のない言語だ。

    FORTRAN 77 に実際に触る前には FORTRAN から IF 文のブロック構文なんかを拝借した「構造化 N88-BASIC(86)1」なんてのにハマったりしていて、割といいイメージを持っていたんだけど、実際触ったら BASIC 以上に扱いにくくてとても困った気がする。あーでも行列の扱いが楽でビビったような気がするな。あれ、行列が楽になったのは Fortran90 ? もう忘れたな。

    TSS(Time Sharing System) でラインエディタで課題を提出させられ泣きそうになり2、その後道を踏み外して写真撮りまくったり飲んだくれたりしながら、一人地味に awk なんかで遊んでいた成果が今に繋がるわけだ。あそこで TSS じゃなくて Unix と戯れることができていたら、もしかしたらまた違う人生を歩んでいたかもしれないけど、たぶん今の方が人間的には勉強になってるからどっちがいいとも言えないな。そうか、そうだな。

    ちなみに FORTRAN 77 で二種を取った。その頃すでに Algol はなかった。PL/I はあったけど。あんまり真面目に勉強してなくて、数学とか英語で稼いでいたんだけど今そういうの通用しないんだよね。大変だ。

    あ。

    BNF もこの方でしたか。ありがとうございます。合掌。

    1. QuickBasic の時代がくる前にラッセル社の PCマガジンで福嶋さんが書いていたものです！ 「一夜漬け」シリーズも好きでした！ 福嶋さんありがとう！ ぼくは日高総帥ではなく福嶋さんのファンです。 ↩

    2. 「国民機」が 486 の時代に入っていたのに ↩

    PukiWiki の記法を PukiWiki 以外でも使う

    PukiWiki/parser

    にあるように必要なファイルを抜き出してみました。やったことは

    • html.php の catbody() のうち HTML の出力に必要な処理だけを抜き出す
    • init.php のうち HTML の出力に必要な処理だけを抜き出す

    あとはエラーが出ないように必要なファイルを require しただけです。結局認証やプラグイン周りを除いて PukiWiki 本体のほとんど全部要るんですが…。

    当たり前のこと、分からないこと

    ホリエモンがテレビのワイドショーでインタビューに答えている。

    私にとって当たり前のことであり、もう何度も説明している、ということを言っているが、彼は「異文化」に対して「理解させる」ことの難しさを今やっと分かり始めているんだなぁ。去年プロ野球に新規参入しようとしたときの経験にはその異文化との折衝という部分は入っていなかったのか。

    彼はマスコミにとって異文化であり、マスコミは大衆に簡単に情報を流すことができる立場である。マスコミが彼を敵として作り上げることは簡単なんだよな。でも彼の商売にとって一般の消費者、ユーザーに対するイメージをコントロールするのは大事なわけ1で、その辺はやっぱ慎重になるべきだろう。また、今まさにやってることと発言が食い違ってるとか、そういうところにも不用意さを感じる。

    いちばん気になるのはホリエモンばっか頑張ってて、ブレインがいないんだなぁって感じが見え見えな点。彼と同じレベルで具体的な戦略・戦術を考えられる人がいないから、彼が一つのことでテンパると他の部分の情報を充実させることができなくなる。インタビューに対する準備不足もあるな。

    しかしいわゆるコメンテーターの質が低いような気がするなぁ。これは別に喋ってる人の知的レベルが低いということでも、番組がワイドショーかニュースショーかの違いでもなくて、例えば買収された企業の社員が企業買収の現場について話すようなことをしないと、誤解2の拡大は防ぐことができないのではないだろうか。3 当たり前だけどコメンテーターは自分の時間を自分でマネージメントできる立場の人たちばかり、例えば芸能人やいわゆる文化人、ジャーナリストなどであって、例え経済や企業買収の専門家であっても買収した会社、買収された会社の現場は分からない。喋ってる人たちはその簡単な事実に対してちょっと無頓着すぎる気がする。

    あと、なんぼなんでもいい加減インターネット（というか Web 上のコミュニケーションか？）に対して理解の深い人が出てこないといかんのと違うか。まぁそう言う人が放送業界とあまり接点がないだろうことは百も千も承知なわけだけど、放送側の人は「分からない」と平気で言い切って終われてしまえるところがすごいな。分からないなら必死で勉強せえよ。自分たちの分からないことはくだらないこととどうして決めつけることができるのか。まぁ決めつけの自覚はないんだと思うけど。

    1. プロや業者を相手にする商売じゃないんだから。 ↩

    2. 「ホリエモンが放送を破壊する」的な誤解。速攻で買収して大改革をやって今の放送の現場をつぶしちゃうんだーって感じの「妄想」。 ↩

    3. まぁ今回はマスコミが敵を排除するために意図的に誤解を生み出しているのかもしれないけど、こういう邪推はある程度防いでおかないといけないよね :-P ↩

    説教講座の PukiWiki

    改修中の説教講座のデザインに近づける。配色がかなりすっきりした感じになったと思う。

    About

    例によって個人のなんちゃらです