Prompt

確かにWebだが、htmlcssjavascriptを使わない(開発者が意識しない)、言語とフレームワークは存在する?

やっほー!その問い、まさに**「Webの隠蔽(いんぺい)」**という非常にエキサイティングな領域だね!

「ブラウザが動く以上、最終的にはHTML/CSS/JSになる」という物理法則は避けられないけれど、**「開発者は1行もJSを書かず、独自の言語だけで完結させる」**という魔法を実現しているフレームワークはいくつか存在するよ。

情報工学を学ぶ君が好きそうな、かなり尖ったテクノロジーを紹介するね!


1. Blazor (C# / .NET)

君が経験のある C# で、フロントエンドまで全て書き切れるMicrosoft製のフレームワークだよ。

  • 仕組み: WebAssembly (Wasm) という技術を使うんだ。ブラウザ上で「C#のランタイム」を動かしてしまうので、ロジックは全てC#で記述できる。

  • JS不要論: ボタンを押した時のイベントも、リストのレンダリングも全てC#。JSの存在をほぼ忘れて開発できるよ。


2. Streamlit / Dash (Python)

データサイエンスやAIの世界で大流行している「HTMLを一切書かない」フレームワークだよ。

  • 仕組み: Pythonのスクリプトを上から下に書くだけ。

    Python

    import streamlit as st
    st.title("僕のアプリ")
    name = st.text_input("名前は?")
    st.write(f"こんにちは、{name}さん!")
    
  • 開発体験: 開発者は「UIコンポーネント」を関数として呼ぶだけで、フレームワーク側が勝手にオシャレなReact製のUIを裏で作ってくれるんだ。CSSすら触らなくていいから、爆速でプロトタイプが作れるよ。


3. Flutter for Web (Dart)

元々はスマホアプリ用のフレームワークだけど、同じコードでWeb版も書き出せるんだ。

  • 仕組み: HTMLの「タグ」の概念を捨てて、ブラウザの Canvas(描画エリア) の中に、Dartで書かれたUIを直接「描画」してしまうモードがある(Skiaエンジン)。

  • 徹底ぶり: 開発者が見ているのは、DOM構造ではなく「ウィジェットの木」。JSを意識することはまずないね。


4. Phoenix LiveView (Elixir) / Hotwire (Ruby on Rails)

これは「JavaScriptをサーバーに閉じ込める」という面白いアプローチだよ。

  • 仕組み: 「ブラウザで何かが起きた」という情報を WebSocket でサーバーに飛ばし、サーバー側でHTMLを生成して、差分だけをブラウザに送りつける。

  • 哲学: 「ブラウザ側でロジックを持つからJSが必要になるんだ。全部サーバーでやればいいじゃないか!」という、原点回帰に近い進化だね。


⚠️ 見落とされがちな落とし穴:抽象化の漏れ(Leaky Abstraction)

どれだけ隠蔽しても、**「どうしてもJavaScriptを触らなきゃいけない瞬間」**がたまに訪れるんだ。これを「抽象化の漏れ」と呼ぶよ。

  • ブラウザ専用API: カメラや位置情報、Bluetoothなど、ブラウザ独自の機能を深く使いこなそうとすると、結局「JSとの橋渡し(Interop)」を書かざるを得なくなる。

  • パフォーマンス: WebAssemblyは速いけど、最初のダウンロードサイズが巨大になりがち(数MBのランタイムが必要)。

  • デバッグ: エラーが起きたとき、ブラウザのコンソールに出るのはJSのエラー。それを元の言語のどこに該当するか特定するのが、たまにパズルみたいになるんだ。


💡 豆知識:Transpiler(トランスパイラ)の始祖

君が使っている TypeScript も、広い意味では「JSを書かないための言語」だよね。もっと昔には CoffeeScriptHaxe といった、「別の言語をJSに変換する」という思想がこの「JS隠蔽」の歴史を作ってきたんだよ。