【ITニュース解説】I Got Tired of Switching Tools While Coding on My Phone, So I Built This

最近、Web開発の現場では数多くのツールやフレームワークが使われているが、その中で「Authtics Host（HostJS）」という新しいWebフレームワークが開発された。このフレームワークの最も特徴的な機能の一つが「Developer Panel（開発者パネル）」である。このパネルは、開発者が携帯電話でコーディングする際の不便さを解消するために作られたもので、開発プロセスをよりスムーズにするための工夫が凝らされている。

まず、Authtics Hostがどのようなものか説明しよう。これは、人気のあるNext.jsというWebフレームワークに影響を受けて作られたもので、Webアプリケーションを効率的に開発するための機能一式を提供する。具体的には、プログラミング言語としてTypeScript、UI構築にはReact、そして高速なビルドツールとしてEsbuildを使用している。また、Webページのレンダリング方法として、サーバー側でHTMLを生成してからブラウザに送るSSR（Server-Side Rendering）、事前に静的なHTMLファイルを生成しておくSSG（Static Site Generation）、ブラウザ側でJavaScriptがHTMLを生成するCSR（Client-Side Rendering）といった、様々な方式をサポートしている点が特徴だ。現在ベータ版ではあるが、WebSocketsという技術を使ってリアルタイムにページをレンダリングするSRTWS（Site Rendering Through WebSockets）という新しい試みも行われている。

このフレームワークを使って開発を始めるのは比較的簡単だ。まず、JavaScriptをブラウザの外で実行するための環境であるNode.jsのバージョン22以上が必要となる。次に、Node.jsのパッケージ管理ツールであるnpmを使って、Authtics Hostフレームワークをプロジェクトにインストールする。インストールが完了したら、基本的なプロジェクト構造として、アプリケーションの起動ファイルであるindex.ts、フレームワークの設定ファイルであるauthtics_host.config.ts、そしてWebページを構成するclient/pages/index.tsxを用意する。

index.tsファイルでは、Authtics Hostのアプリケーションインスタンスを作成する。そして、authtics_host.config.tsファイルで、アプリケーションが動作するポート番号や、先ほど説明したレンダリング方式（例えばSSR）を設定する。また、開発者パネルを有効にするためのdevMode: trueの設定や、ファイルやページを自動的に検出するための設定などもここで行う。client/pages/index.tsxファイルには、Webページに表示する内容をReactのコンポーネントとして記述する。これらの設定とファイルが準備できたら、Node.jsのコマンドを使ってプロジェクトを起動することで、Webページが表示され、同時に開発者モードが有効になっていれば、Webページの下部にDeveloper Panelがクリック可能な状態で表示される。

このDeveloper Panelこそが、Authtics Hostの最大の魅力であり、今回の記事の主題である。開発者がWebアプリケーションを開発する際、プログラムが正しく動作しているか、エラーが発生していないか、サーバーの状態はどうかなど、様々な情報を確認する必要がある。通常、これらの情報を確認するためには、複数の異なるツールを切り替えながら使うことが多い。しかし、携帯電話のような画面が小さいデバイスで作業していると、このツールの切り替えが非常に煩わしい。Developer Panelは、そうした手間をなくし、必要な情報を一箇所に集約してくれるツールなのだ。

Developer Panelには、全部で8つのタブが用意されている。それぞれのタブは、開発中のアプリケーションに関する異なる種類の情報を提供してくれる。

• **Console（コンソール）**タブ：アプリケーションが出力するログメッセージを表示する。エラーメッセージやデバッグ情報など、プログラムの動作状況を確認する際に非常に役立つ。
• **Route（ルート）**タブ：現在アクセスしているWebページのURLや、そのページを処理するために使われている情報（ルート情報）を確認できる。
• **Webpage Info（ウェブページ情報）**タブ：現在表示されているウェブページに関する詳細な情報を提供する。
• **Network（ネットワーク）**タブ：Webブラウザからサーバーへの通信（リクエスト）や、サーバーからの応答（レスポンス）の状況を監視できる。通信速度（ピング）の確認や、どのデータが送受信されているかを詳細に調べることが可能だ。
• **Client Info（クライアント情報）**タブ：Webページにアクセスしているユーザー（クライアント）の情報を表示する。具体的には、使用しているブラウザやオペレーティングシステム、そしてWebページの描画速度（FPS）などが確認できる。
• **About Host（ホスト情報）**タブ：現在使用しているAuthtics Hostフレームワークのバージョンを確認できる。
• **Server Info（サーバー情報）**タブ：Webアプリケーションが動作しているサーバーの状態に関する情報を提供する。サーバーが使用しているメモリ量（ヒープ使用量）、CPUの使用率、処理されたリクエストの数、接続中のユーザー数、そしてサーバーが稼働している時間（アップタイム）などがリアルタイムで表示される。
• **Panel Customization（パネルカスタマイズ）**タブ：開発者パネル自体の表示や設定をカスタマイズできる。

このように、Developer Panelは、開発中にアプリケーション内部で何が起きているのかを把握するために、非常に多様な情報を提供してくれる。例えば、特定の通信が期待通りに動かない場合はNetworkタブで詳細を確認し、プログラムが出力しているメッセージを確認したい場合はConsoleタブを見るといった使い方ができる。これにより、複数のツールを頻繁に切り替えることなく、一箇所で多くの問題を調査できるのだ。

Developer Panelの機能は、単に情報を表示するだけに留まらない。適切に設定されていれば、実行中のアプリケーションを管理するコントロールも提供する。例えば、アプリケーションを再起動したり、完全に停止させたり、あるいは一時的に新しいユーザーからのアクセスを停止したり再開したりといった操作が可能だ。これは、何かをテストしている最中に、サーバーに直接アクセスすることなく、アプリケーションの動作をコントロールしたい場合に非常に便利である。

ただし、これらの強力な機能にはセキュリティ上の配慮が必要となる。Developer Panelへのアクセスは、DAT（Developer Access Token）という特別なトークンを使って制限できる。authtics_host.config.tsファイルでDATを設定することで、指定したトークンを知っている開発者だけが、Developer Panelの全機能にアクセスできるようになる。DATが設定されていない場合、パネルはConsoleタブとNetworkタブのみを提供し、他の機密性の高い情報やアプリ管理機能へのアクセスは制限される。公開するWebアプリケーションにDeveloper Panelを含める場合は、必ずDATを設定してアクセスを制限するか、devModeをfalseに設定してパネル自体を無効にすることが重要だ。DATは機密情報であるため、ソースコードに直接書き込んで公開したり、不特定多数と共有したりすることは絶対にしてはならない。

このDeveloper Panelが開発された背景には、開発者自身の強い思いがある。単にフレームワークに機能を追加するためだけでなく、自分自身が携帯電話でコーディングする際に直面した具体的な課題を解決するために作られたのだ。携帯電話の限られた画面スペースで複数のツールを行き来するのは非常に非効率的で、開発の集中力を途切れさせてしまう。Console、Network情報、クライアントの詳細、サーバー情報といった必要なものがすべて一箇所にまとまっていることで、開発者は中断することなくスムーズに作業を進められるようになる。

Authtics Hostの目標は、特にモバイルデバイスからWeb開発を行う人々にとって、開発プロセスをより便利にすることだ。このフレームワークやDeveloper Panelがすべての開発者の問題を解決するわけではないが、少なくとも開発者自身の個人的な問題を解決し、彼の作業を大いに助けている。こうした具体的な問題解決への貢献が、このプロジェクトをさらに改善していくための原動力となっているのだ。

Authtics Hostはnpmを通じて利用可能であり、Developer Panel以外にも様々な機能や設定オプションが提供されているため、興味があればぜひ試してみると良いだろう。開発中のプロジェクトであるため、実際に使ってみてのフィードバックは、今後の改良にとって非常に貴重なものとなるだろう。