【ITニュース解説】Was going through my old repos and found my personal website in terminal cli style, that i built in three days. Updated it, redeployed. Went through it and think that its still looks awesome. Give it a look

ある開発者が自身の古いコード保管場所であるリポジトリを整理していたところ、過去にわずか3日間で作成したという個人ウェブサイトを発見した。そのウェブサイトは、コンピュータの専門家が使う「ターミナル」や「コマンドライン」の見た目と操作感を模倣した、非常にユニークなスタイルで作られていた。彼はその出来栄えに改めて感心し、内容を少し更新して再びインターネット上に公開したところ、多くのエンジニアから注目を集めることになった。この事例は、システムエンジニアを目指す初心者にとって、ウェブ技術の応用方法やエンジニアリングの面白さを学ぶ絶好の教材となる。

まず、このウェブサイトの核となる「ターミナルCLIスタイル」について理解する必要がある。我々が普段スマートフォンやパソコンで目にするのは、アイコンをクリックしたり、ボタンをタップしたりして操作する「GUI（グラフィカル・ユーザー・インターフェース）」である。しかし、システムエンジニアやプログラマは、黒い背景に文字だけが表示される「ターミナル」という画面を頻繁に利用する。これは「CUI（キャラクター・ユーザー・インターフェース）」や「CLI（コマンドライン・インターフェース）」と呼ばれ、キーボードから特定の命令文（コマンド）を打ち込むことでコンピュータを直接操作する方式だ。このウェブサイトは、まさしくこのCLIの見た目と感覚を、ウェブブラウザ上で忠実に再現している。サイトを訪れると、まるで本物のターミナルのように、カーソルが点滅し、ユーザーからのコマンド入力を待っている。

では、このような特殊なウェブサイトは、どのような技術で成り立っているのだろうか。その根幹を支えているのは、ウェブ開発の基本的な三要素であるHTML、CSS、そしてJavaScriptである。HTMLはウェブページの構造を定義する言語であり、このサイトでは、画面に表示されるテキストや入力欄といった基本的な骨格を作っている。次にCSSは、見た目を装飾する役割を担う。ターミナル特有の黒い背景、目に優しい緑や白の文字色、そして昔のコンピュータ画面を彷彿とさせるフォントなど、視覚的な特徴はすべてCSSによって実現されている。カーソルが点滅するアニメーションもCSSの機能を使えば実装可能だ。

最も重要な役割を果たしているのがJavaScriptである。JavaScriptは、ウェブページに動きや対話性を加えるプログラミング言語だ。このサイトでは、ユーザーがキーボードでコマンドを入力し、Enterキーを押すという一連の動作を監視している。そして、入力されたコマンドが何かを判断し、それに応じた結果を画面に表示する処理をすべて担っている。例えば、ユーザーが「help」と入力すれば、利用可能なコマンドの一覧を表示する。自己紹介を見るための「about」や、スキルセットを確認する「skills」といったコマンドを打ち込むと、あらかじめ用意されたテキストが、あたかもコンピュータが応答しているかのように表示される。この一連の処理は、実際のターミナルがユーザーの命令を解釈して実行する仕組みを、JavaScriptを使ってウェブブラウザ内でシミュレートしているのである。多くの場合、このようなサイトはサーバーとの通信を必要とせず、ブラウザ側だけで完結するため、非常に高速に応答できるという利点も持つ。

このプロジェクトは、システムエンジニアを目指す者にとって多くの示唆を与えてくれる。第一に、基本的な技術の重要性だ。HTML、CSS、JavaScriptという基礎的な技術を深く理解し、組み合わせることで、ありふれたウェブサイトではなく、これほど創造的で記憶に残る作品を生み出せることを示している。第二に、エンジニアにとって不可欠なCUI/CLI環境への親しみを深めるきっかけとなる。将来、サーバーの管理やシステムの構築を行う際、コマンドライン操作は避けて通れない。このサイトを通じて、コマンドを入力し、その結果を得るという基本的な対話の流れを疑似体験することは、CUIへの心理的なハードルを下げるのに役立つだろう。

さらに、この開発者が「古いリポジトリで見つけた」という点も重要だ。「リポジトリ」とは、プログラムのソースコードや関連ファイルを保存しておくための場所で、通常はGitのようなバージョン管理システムで管理される。自分の作ったものをリポジトリに保存しておく習慣は、コードの管理や他人との共同作業において基本となる。また、作ったウェブサイトをインターネット上で公開する行為を「デプロイ」と呼ぶ。この開発者がサイトを「再デプロイ」したように、一度作ったものを更新し、再び世に出すプロセスもエンジニアの日常的な作業の一つだ。わずか3日間という短期間でこのサイトを構築したという事実は、完璧を目指すだけでなく、まずは動くものを素早く作り上げる「プロトタイピング」の考え方の価値も示している。このターミナル風ウェブサイトは、技術的な遊び心と実用的な知識が融合した、初心者にとって学びの多い優れた事例と言えるだろう。