モダンな開発を意識しだして数年、ようやくモダンとは何たるかがぼんやりとわかってきました。 えぇ、生地に中華そばを混ぜて作るのですよ。
インターネット黎明期から蠢いている原始のマンのIT技術者（過去の自分）に向け、 PixiJSをスタートさせることを題材に、偏見に満ちた内容で解説していきます。
変化のスピードが激しいフレームワーク界隈に辟易し、ChatGPTにぼやいたことがありますが、
「どんな技術でも10年後に必ず残ってるとは限りませんが、得られるスキルセットは今後の技術に直結します」
と諭されたことがあります。
いちいち説明はしないので文中に出てくるキーワードを拾って調べながら読み進めてください。 あとこれ全部コントなんで、ぼくの意見じゃないんで、よろしくお願いします。
モダンな開発のスタート
モダンとはNode.jsが中心にあります。
WebサイトやWebサービスやWebアプリはほぼjsで動いています。
さらに VSCode + Github + Vercel などマルチプラットフォーム・マルチデバイスな環境でワークします。
先に全部登録・インストールはすませておいてください。
VSCodeを開き、おもむろに「Ctrl+@」でターミナルを開きます。
作業ディレクトリで下記コマンドでプロジェクトを開始します。
PS D:\work> npm create pixi.js@latest
√ Project name: ... pixi-project
√ Select a type of template: » Bundler Templates
√ Select a variant: » Vite
projectのフォルダが作られ環境が一式展開されます。
そのあと、実行するコードを示してくれます。むちゃくちゃ手取り足取りです。
Done. Now run:
cd pixi-project
npm install
npm run devVSCodeではプロジェクトの開発を開始するために、
下記コマンドかGUIでプロジェクトフォルダを「開く」必要があります。
code .でカレントディレクトリのプロジェクトを「開く」ことができるので便利です。
D:\work> cd pixi-project
D:\work\pixi-project> code . その後、手取り足取りの続きをすれば、テスト起動まで持っていけます。
モダンな開発の中身
何が行われているのか、package.jsonで確認できます。
viteで動いているのですね、モダンですね。
静的サイトはastro、動的サイトはviteというのがモダン界隈のキーワードです。
このscriptsの内容をnpm run XXXで実行します。
"scripts": {
"start": "npm run dev",
"build": "npm run lint && tsc && vite build",
"lint": "eslint .",
"dev": "vite"あと、混乱のもとになるので知らなくていいのですが
npm startで"start": "npm run dev",が実行されます。
かといって
npm buildやnpm lintで実行できるわけではありません。
これはtest, start, stop, restartというショートカットが用意されていて特別に実行できるというだけです。
npm run buildで本番環境distを出力できます。
このbuild作業をVercelやNetlifyなどのデプロイ（ホスティング）サービスがやってくれるという流れです。
モダンなデプロイ
モダンな世界ではもはやバックアップなんてものは存在しません。 すべてのふるまいが世界に記憶されているのです。 ソースを管理する行為がバックアップであり、マルチデバイスであり、デプロイなのです。
プロジェクトの開始時にGitHubで新しいRepositoryを作っておきます。 登録時にも手取り足取りがあるので安心です。
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/アカウント/新しいリポジトリ.git
git push -u origin main
ローカルでプロジェクトを開始し、リモートの新しいリポジトリに登録します。
git branch -M mainの部分に関して・・・
大体一人でプロジェクトを作っているのでbranchなんてあんまり意識していなかったのですが、
他の人のリポジトリを見ているとmainやmasterが混在していて、なんなのか調べたことがあります。
リポジトリのbranchはデフォルトではmasterで作成されるのですが
このマスターが主従関係、ひいては奴隷制度を連想させるというポリコレのあおりを受け、
mainに変更しようということみたいです。皮肉というかシャレで始めただけだと思うのですがコレが主流のようです。
※HDDドライブにもマスターとスレーブがありましたよね・・・
そんなこんなで作ったリポジトリをVercelやNetlifyなどのデプロイサービスに登録します。
デプロイサービスではリポジトリをpushするたびに、buildしてくれます。
静的サイトや静的な動的サイト（は？）が世界に展開されるんですね。
おわりに
手取り足取りで、何が行われているのかも知らずに開発できるのがモダンの世界です。 落合陽一の言っていた「魔法」です。 冒頭から使用しているnpmもNodePackageManagerのことだということを理解しなくても使えるのです。
モダンとは、チェスト（知恵捨て）することと見つけたり！
あと、jsゴリラの私にはeslintの洗礼が強烈でした。 インターネット老人会の諸兄方には、神の与えしこの試練ぜひとも乗り越えていただきたあい!!!
※追記：現在ではpnpmなるパッケージマネージャに置き換わりつつあります。