すべてのゲームが成功するために、大規模なコーディングチームと長年の開発期間を必要とするわけではありません。大ヒットワードパズルゲーム「Wordle」は、ジョシュ・ウォードルがパートナーのパラク・シャーのために比較的短期間で開発しました。シンプルで追加機能（スマホアプリなど）がないにもかかわらず、その驚異的な人気はニューヨーク・タイムズ紙に取り上げられるほどでした。
世界中の注目を集め、7 桁の賞金を獲得できる、シンプルだが中毒性のあるゲームのアイデアをお持ちであれば、Wordle のような簡単な Web アプリをコーディングすることはまったく可能です。
オリジナルのWordleサイトの基本フレームワークは、他のウェブサイトと同様に、HTML（ハイパーテキストマークアップ言語）でコーディングされていました。これはインターネットの基盤となるコードであり、ウェブページを読み込む際にブラウザに何をどこに配置すべきかを指示します。現在ご覧いただいているサイトもHTMLでコーディングされており、コンテンツだけでなく、メニューの位置からフォントサイズに至るまで、コンテンツの表示方法に関する指示も提供しています。
HTMLと並んで、CSS（カスケーディング・スタイル・シート）があります。これはHTMLのより現代的なアドオンで、画像やテキストブロックのフォーマットなど、ウェブページのフォーマットをより簡単に制御できます。CSSを使用すると、複数のページからなる広大なウェブサイトでも、各ページを個別にコーディングするのではなく、サイト全体のフォントや色を設定できます。
ウェブサイトをきちんと構築したいなら、HTMLやCSSを学ぶ必要があります。しかし、Squarespaceのような多くのサービスでは、コードを知らなくてもページをデザインできます。これらのサービスでは、ユーザーフレンドリーなインターフェースでページ要素をクリック、ドラッグ＆ドロップするだけで、バックグラウンドでHTMLとCSSが自動的に処理されます。
Wordleのようにウェブサイトを完全にインタラクティブにするには、JavaScriptが必要です。JavaScriptは、静的なHTMLとCSSのページを、検索ボックスや埋め込みツールバーなど、ユーザーが操作できるページに変換します。JavaScriptは、ビデオの処理、2Dおよび3D画像のレンダリング、ユーザーが入力した情報の保存、データベースからの情報の読み込み（Wordleでは非常に便利です）、計算の実行、ユーザーからの入力に応じたコードの実行、画面へのメニューの表示など、様々な機能を備えています。
Wardle氏がTechCrunchに説明したように、WordleはJavaScriptで書かれており、ゲームが読み込まれるとすぐにブラウザにダウンロードされるため、最初のダウンロードが完了すればオフラインでもプレイできます。最新のブラウザはJavaScriptを理解して実行できるため、今回の場合はデータベースから単語を読み込み、ユーザーからの入力を識別し、それらの入力に関するフィードバックを提供します。
ウォードル自身も、このゲームは特に複雑な方法でコーディングされていなかったことを認めており、だからこそ、ニューヨーク・タイムズに掲載される前のWordleの完全なバージョン、つまりデータベースに登録されているすべての単語を含む形でダウンロードすることが可能だったのだ。また、Wordleのウェブサイトのソースコードを調べるだけで、今後の解答を知ることも可能だった。
では、Wordleのようなものを自分で作るにはどうすればいいのでしょうか？ある程度のコードを学ぶ必要はありますが、Wordleレベルのものを作るのにHTML、CSS、JavaScriptの膨大な知識は必要ありません。Codecademyで説明されているように、使用されるプログラミング手法の一つはforループで、入力した文字が解答に含まれているかどうかを確認し、それに応じて色付きの四角形を表示します。
Codecademyは、HTML、CSS、JavaScript、その他多くのWebコーディング言語を無料で学べるサイトの一つです。演習は分かりやすく整理されており、ブラウザ上で実践しながら学習できます。やり方が示され、実際に試すことができ、フィードバックも得られます。より高度な機能やチュートリアルを利用するにはサブスクリプションが必要ですが、無料でも十分に学習できる内容が揃っています。
TreehouseはCodecademyのより包括的なアップグレード版で、月額25ドルから利用可能です（無料トライアルは利用可能です）。HTML、CSS、JavaScriptなどのプログラミング学習に非常に効果的でプロフェッショナルなリソースであることは間違いありませんが、Wordleのようなアプリを開発するために必要な範囲をはるかに超えています。プログラマーとしてもっと多くのことを学びたいと考えているなら、Treehouseは検討に値するかもしれません。
Treehouseとは対照的に、DashはHTML、CSS、JavaScriptの基本しかカバーしていませんが、無料で楽しく使えるため、特に初心者に最適です。すべてがブラウザ内で操作でき、Codecademyと同様に、これらのコーディング言語でウェブサイト構築の実力を試しながら学ぶことができます。
これは、HTML、CSS、JavaScript のコーディングを学べる場所の完全なリストではありませんが、Wordle のようなものを構築したいというアイデアがある場合、始めるには十分なはずです。
