ウマ娘関連のネタが多いでしょうか
惰性で Nuxt3 へ。
商用の書籍もあるのだがイマイチらしい。
『【Nuxt3】入門』あたりで。
様子がわかったら、実用的なプロジェクトをテストしてみたいところ。
よくお世話になる豆蔵さんとこのサンプルがナイス！
雰囲気掴みたいだけなら、この第２回だけでもいいと思う。
ちゃんと動く。
フロント始めたらエディターに手を出したい。
『nuxt3.0環境でEditor.jsを動作させてみる』を手順通りやっていくと動いた。
内容はまるで理解できてませんが。
フォルダ構成はこう（なはず）。
（適宜加筆）
なんだかんだで後回しにしていたフロントエンド系の知識。
バックエンド系の仕事多めの人間にとって、なぜフロントの仕事がイヤかというと仕様がコロコロ変わるから。
C++ や Java だって文法上の変化はあったじゃないかと言われそうだが、基本にあるオブジェクト指向の思想はそうそう変わっているわけではないとワイは信じているし、追加された機能などもある程度納得すべき理由があるので強い拒否反応はおきない。
JavaScript なんてちょっと前まではクラスすら使えなかったではないか？
そういう言語をやすやすと信じるわけにはいかないし（偏見）、仕様の変更の必然性が見えにくいのだ。
例えば、この記事を書くにあたってブラウザに「ハロー」を描画する某書籍の Vue のサンプルを走らせようとした。
見事に動かないんだな（笑）
なんでも Vue2 → Vue3 で言語の仕様がけっこう変わったとか。
なお、Vue3 ではこう書くらしい。
<!DOCTYPE html>
<html>
<head>
<title>First Vue</title>
<script src ='https://unpkg.com/vue'></script>
</head>
<body>
<h1>Vue.js</h1>
<div id = "app">{{ message }}</div>
<script>
const app = {
data() {
return {
message: 'Hello Vue!'
}
}
}
Vue.createApp(app).mount('#app')
</script>
</body>
</html>まあ、なんか app をインスタンス化して id=app の div ブロックに渡している”雰囲気”はわかるんだけどさ。
あくまで雰囲気よ。
くぅー。
html のコードのエスケープ処理は『HTMLエスケープツール』使ってます。
短いやつなら手動で変換してたけど、今後大量に出てきそうなんでお世話になりそう。
プロジェクトを作成して雰囲気掴む。
『webpack入門（Node.jsの導入からjsファイルのバンドルまで）』
『npm の導入と Hello World!』
けっこう評判良かった投稿。
TypeScript で書いたコードを、 JavaScript にコンパイルして実行する場合のプロジェクト作成方法について説明します
みんな、思ってたんじゃん！
ところで、駆け出しの初学者が区別つかないものの一つにフロントエンド/バックエンドという概念があると思う。
実務的なフロントエンドの記事に『イマドキのフロンエンド開発』という好記事があるが、この記事で述べられているのはあくまでもフロンエンドに関することがらだ。
「えー、でも testserver 立ててますよね」と言われそうだが、あれは本番環境の代用だ。
現実的に考えてもらえばわかると思うが、まだ機能が不十分な段階で VPS や各種クラウド上（の Apache や NginX）で開発するわけにはいかんでしょ。
testserver はあくまで開発用。
だから、デフォルトでは css すら読み込んでくれない。（『WebPack で css を読み込ませる方法』あたり参照。WebPack は本来 JavaScript, css, 各種画像の類をまとめ上げるためのものだから、css を読み込んでもらったら困るのだ）
実際、XXX.com のウェブサーバーが WebPack の testserver で運用されることはまずない。少なくともワイはそんなケースは見たことがない。
あとは、かなりの頻度でフロンエンド/バックエンドともに開発言語が JavaScript であったりするのも誤解を生む要因になっているでしょうか。
で、 JavaScript でバックエンドと言ったら、Express の存在が欠かせない。
これは長くなりそうなので、稿を変えて。
→これとかこれとか
（続く）