こんにちは。今回は数週間かけて、JavaScriptでWebアプリを作成しましたので、プログラミングを始めて間もない方向けに、概要を共有したいと思います。
Webアプリの概要
サムネイル画像の通りでブラックジャックを作成しました。実際のアプリはこちらこちらのリンクにあります。ブラックジャックはディーラーとプレイヤーと1対1で競うゲームでカードをめくりながら合計が21になるように競います。21を超えると負けが確定します。詳細なルールのご紹介はここでは割愛しますが、ゲーム無料ですのでよければ遊んでみてください。
Web開発を学んだ場所
大学院は9月に卒業したのですが、数学、金融工学、Pythonモデリング、卒論に疲れ果てたので、それらをいったん離れてアプリ開発をすることにしました。11月頃にClever Programmerといコミュニティーに入りました。こちらでは、SlackとFBのコミュニティーが充実しているほか、youtubeでも膨大な動画を公開しています（正確には、「毎週公開し続けています」）。メンバーの私でもとても見切れない量です。
開発環境
次に皆さんが気になるのは開発の環境だと思います。私はWIndows10、Visual Studio Code（VSCode）+ vim、git、GitHub（デスクトップ版）で開発しています。エディターにつき、Pythonには幾つか選択肢があると思いますが、Webのとくにフロントエンド開発では、今はVSCode一択ではないでしょうか。vimというのは特殊な入力方式で、慣れるまで時間がかかりますが、コードを書くスピードが2倍になります（VSCodeについてはこちらの私の記事もご覧になってみください）。また、今回のアプリはフロントエンドだけの小規模なものなので使っていませんが、アプリがバックエンドやデータベースも含んで大規模になればDockerが不可欠になると思います。
アプリ開発の手順 1.UIの設計・改善
Clever ProgrammerのブラックジャックはUnit9の課題でしたが、カードは10枚しか使用せず、初期のカード配布機能がない、同じカードが重複して引かれる、Aceを1とみなすか11とみなすかはランダムに決まる、HTMLとCSSのUIは荒くかなり醜いなど、完成品はゲームとして不十分なものでした。
まずはUIを改善させるべく、HTMLとCSSの改善から手を付けました。具体的にはdribbbleなどのWebデザインのサイトを見たり、udemyのWebデザインのコースを聞きながらデザインを改善、フォントもゴシック（Sans-serif）系から慎重に選びました（google fontを使用）。エンジニアの方にはデザインに無関心な方も多いように思いますが、Typography、Color、Layoutに関する基礎的な理論を学ぶと世界が広がります。
今回はWebアプリをゼロから作成していないので、上流のUI設計工程は省略していますが、ゼロからアプリを立ち上げる場合、UIの設計図なしにHTMLとCSSから書き始めると失敗します。UI設計は、紙と鉛筆で描いてももちろんいいのですが、例えばこちらのサイトhttp://draw.io/が大変便利です。またこちらのサイトでは、アプリがバックエンド、外部API、データベースを含む大規模なものになった場合に必要不可欠な、様々なダイヤグラムやフローチャートも書くことができます。より精緻なUIデザインをする場合は、例えばfigmaが使えます。
Webアプリ開発の手順 2.JavaScriptによるゲーム実装
UIだけを整えてもゲームは動きませんので、JavaSciptで実際のゲームを作ります（正確には不十分なゲームをより本物に近づけました）。ユーザーはサイトにアクセスするとHTMLが開くのですが、同ファイルはアップロードされているサーバ内になる別のJavaScriptファイルを参照しています。
JavaScript本体は350行で文字通りJavaScriptで書いたのですが、ここで最も活きるのは言語そのものの知識ではなく、基本的なアルゴリズムに関する理解です。今回のWebアプリでは、手札の状況を記憶する配列の処理、Aceの役割や勝敗の決定などの条件分岐処理、状態を記憶させるboolean変数の活用などがアルゴリズムの例です。 最後の例では、例えば、ゲーム開始時には4つのボタンがあり、開始させると以降3つのボタンになりますが、その時々に誤ったボタンを押すとAlertが出る部分に活用されています。どのボタンが押されていて、どのボタンが押されていないかを各変数で記憶させています。また、Aceを1とみなすか11とみなすかの判断においても、この状態を記憶する変数を使用しています。汎用的なテクニックですので、多くの時系列ゲームやモデルで使われています。
アプリ開発の手順 3.レスポンシブな調整
このブログはワードプレスですので、iphoneから見ても、アンドロイドから見ても、PCから見てもUIが最適化されますが、自分で開発する場合は各閲覧環境に対応する必要があります。もともとの教材でも、CSSはflexboxを活用して作っていたのである程度は適応してくれるのですが、最終的にはGoogle Chromeの開発者画面（Ctrl + Shift + Jで表示）でマージン、パディング、フォントサイズの微調整を重ねました。
アプリ開発の手順 4.テスト、メタ情報の編集、デプロイ
最終段階はテスト、メタ情報の編集、それにデプロイです。テストとはゲームを何度もプレイして、バグを発見しては直す、発見しては直すを繰り返す地味な作業です。大規模な開発ではより体系的なテストの方法が確立されているのですが、今回は小規模なゲームですので何度もプレーを繰り返しました。Aceが連続して4枚出るテスト（出現確率0.00037%）だけまだできていないので、バグが出た場合はご報告頂ければ幸いです。
メタ情報とは、HTMLのheadタグ内に記述する文字通りサイトのメタ情報です。タイトル、要旨、サムネイル画像のURLなどを書きます。メタ情報がなくてもサイトやアプリは動きますが、丁寧に書いた方がPVが向上します。
デプロイとは、アプリを公開用のサーバに乗せて一般に公開するという意味です。今回のようなバックエンドを持たない静的なサイトの場合、サーバは無料で幾つか選択肢があります。どこでもよかったのですが、今回はGitHub Pageを使用しました。手順としては、GitHub上にレポジトリーを作った後、手元のPCにあるアプリのファィル群一式を、GitHub Desktopを介して、GitHub上のレポジトリーにあげます。GitHub Pageの使い方は公式サイトが大変シンプルでわかりやすいです。
余談ですが、プログラミングで最も大事な言語は、PythonでもJavaScriptでもなく英語です。上記公式サイト含めてここでご紹介した外部リンクはすべて英語です。プログラミング中の情報収集やエラー対応に日本語を用いると、コードを記述する半角と検索用の全角との切り替えで時間をロスするばかりでなく、得られる情報量が1/10ほどになります。
実際のコード
今回はやや抽象的な紹介しかしていませんが、ご関心ある方は、実際のコードをこちらからご覧になれます。JavaScriptの部分はこちらのstatic_black/jsにあります。git cloneをするとアプリのダウンロードも可能です。
その他Webアプリ（ポートフォリオのご紹介）
世界中の新型コロナウィルスのサイト
私が作ったこちらのサイトはReact.js、Material UI、Chart.jsで作り、Firebaseにデプロイしています。ブラックジャックと同じく、バックエンドのないフロントエンドだけのSPAです。Firebaseへのデプロイはこちらの私の記事「FIrebaseでWebアプリをデプロイする方法」でご紹介しています。今日も最後まで読んで頂きありがとうございました。
