短期間で Web アプリを作れるようになるには？

短期間で Web アプリを作れるようになるには？

プログラミングの学習を始めてどれくらいで Web アプリが作れるようになるかという質問をよく頂きます。どんな Web アプリを作るかにもよりますが、シンプルな Web アプリならば 1 ヶ月の勉強でも十分に可能です。この記事では、プログラミングの学習を始めて 1 ヶ月で Web アプリを作るための方針について考えてみました。

（＊）この記事は、Windows10 で開発を行うことを想定して書いています。Mac や Linux でも基本的には同じですが、利用するコマンドや、ダウンロードするファイルなどが若干異なります。

シンプルにする事が重要

1 ヶ月という限られた時間で Web アプリを作るには、シンプルにする事がとても重要です。 ここで言う Web アプリは、商品として販売するようなアプリではなく、機能を優先したアプリという前提にします。 商品としてお金を頂いて提供する場合には、見かけも重要ですし、十分なテストも必要です。勿論、これらを含めた上で 1 ヶ月で完成させることも可能ですが、まずは欲張らずにアプリの機能を実現して、最低限の見栄えのアプリを作る事にします。

Web アプリのコーディングをするのに必要な物は：

＊　HTML

＊　CSS

＊　Javascript

です。1 ヶ月で Web アプリを作るために、必要最低限の学習に集中する事が必要になります。そこで、最初は「CSS」は無視して考えます。 基本的に、CSS は HTML で記述された Web ページの体裁を整えたりするのに使用します。実際は、体裁以外にもいろいろできますが、最初は体裁を整えるということで、機能ができた時点で、CSΣ で見栄えを整えるという方針にします。

HTML

HTML で Web ページ、この場合、アプリのユーザーインターフェース（UI)を記述するのに必要です。 HTML も凝るとキリがないので、シンプルに考えます。構成もシンプルにすれば、簡単な記述で済みますので、まずは、シンプルに「縦長」の１列のページを書く事にします。

１列の記述にしておけば、PC などの大きな画面のページだけではなく、スマホなどに対応する際も楽になるので、最初は１列のシンプルな構成で、縦長のページにすると学習の時間を大幅に短縮できます。

Javascript

Web アプリは基本的に Web ブラウザで動かす事が前提です。バックエンドの処理を作ってサーバー側で処理することも可能ですが、この場合、Web ブラウザと Web サーバーの間で別々のプログラムが必要になるので、バックエンドでの処理は行わないと言う事にします。 Web ブラウザでの処理になるので、使用するプログラミング言語は Javascript になります。

フレームワーク

HTML と Javascript の最低限の学習をすれば、Web アプリは実現できますが、少し複雑な機能のアプリを作る場合、全ての処理を自分でコーディングするのは、コーディングの時間だけではなく、テストやデバッグの時間も必要になるので、よく利用される機能は公開されているパッケージを取り込んで作ると効率よく Web アプリを開発できます。

外部のパッケージを利用する場合でも、HTML に CDN (Contents Delivery Network)のリンク先を HTML ファイルに書いておけば利用できますが、パッケージ管理アプリを使うと、最初は面倒に感じますが、慣れてしまうと簡単にパッケージを取り込めるので便利です。パッケージ管理アプリを使う場合、フロントエンドのフレームワークを利用すると、完成したアプリをインターネットに公開する際の「イメージ（パッケージ）」を作成したりするのに便利です。フレームワークの基本的な機能で、必要なパッケージを含めて公開に必要なイメージを簡単に作れます。

開発用の PC の設定

これで、開発に必要なアプリが大体決まるので、開発に使う PC を設定します。 利用するアプリは以下の通りです。

＊　VSCODE: コーディングに使います（プログラムの入力）

＊　Node.js: パッケージ管理ソフトの「npm」が含まれています

＊　Vue CLI: フレームワークの Vue を利用するためのパッケージ

＊　Web ブラウザ: Web アプリを動かすのに必要です

firebase-tools: 作成したアプリをインターネットに公開するのに使います

firebase-tools はプログラムを公開する時に必要になりますが、Web アプリを開発する段階では不要なのでこの記事ではインストールを省略します。後からでも導入できるので別の記事で紹介する事にします。

VSCODE

マイクロソフトが無料で提供しているエディタです。プログラムなどを入力するのに使います。 VSCODE の Web サイトからダウンロードできます。

User Installer でも、System Installer のどちらをダウンロードしても大丈夫です。最近の PC は殆どが 64-bit の CPU を使っていますので、最近（ここ２〜3 年）購入した PC の場合は、64-bit をダウンロードしてインストールします。よくわからない場合は、32-bit をダウンロードすれば OK です。（32-bit のアプリは 64-bit の CPU でも動きます）

NodeJS

NodeJS もNodeJS の Web サイトからダウンロードできます。Windows Install (.msi)をダウンロードしてインストールを行います。

Vue CLI

フロントエンドのフレームワークの Vue.js は、 NodeJS に含まれているパッケージ管理アプリ「_npm_」を使って、「Vue CLI」をインストールします。他の方法でも Vue.js を使うことができますが、今回は Vue CLI を使う方法を使います。

> npm install -g ＠vue/cli

（＊）Mac や Linux の場合は、「$ sudo npm install -g ＠vue/cli」とする必要があります。

アプリの基本とは？

どんなアプリを作るかにもよりますが、通常のアプリの基本は、

＊　入力データ

＊　出力データ

です。つまり、プログラムに何らかのデータを与えて、そのデータを処理した結果を出力するという仕組みです。 アプリの基本機能は、このデータの処理になります。 あとは、処理したデータをどのように利用者に見せるかというところまでがアプリの基本です。

プログラムにデータを与える方法としてよく利用されるのが、

＊　入力フォームに直接タイプしたりする方法

＊　ファイルなどからデータを読み込む方法

です。

データの出力は、Web ブラウザに表示する方法やファイルに出力する方法。 あるいは、処理したデータを後処理して加工して、表やグラフにして見やすくわかりやすい形で表示したりします。

入力フォーム

入力フォームは、HTML で記述できます。「input」というタグを使って HTML で簡単に記述できます。 例えば、名前を入力するフォームは、

<div>

  <label>名前</label>

  <input type="text" />

  <button type="button">確定</button>

</div>

のように記述すると、以下のようにブラウザで表示できます。（CSS なしの場合）

ファイルから読み込む

PC などを利用している場合は、PC に保存されているファイルからデータを読み込むことが可能です。 ファイルを選択するフォームを利用すれば、ファイルを選択するのは簡単です。

<div>

  <label>ファイルを選択してください</label>

  <input type="file" />

</div>

これはこんな感じになります。

あとは、ボタンが押されたり、テキストの内容が変わったイベントの処理を Javascript で書くと、入力したデータを取り込むことができます。

データの処理

入力されたデータを取り込んだ後に、必要に応じてデータを加工したり、データベースにデータを保存したりする処理を Javascript で記述します。

データの出力

後は、処理したデータを表示したり、ファイルに保存したりする処理をすると一連のアプリの操作が完結します。

Web ブラウザの場合、セキュリティ上の理由で、自由にファイルを端末（PC やスマホ）に書き込むこと基本的にできません。しかし、ファイルを作ってダウンロードする形にすれば、少なくても PC などの場合はファイルを保存することができます。

最初は、ファイルの保存よりは、みやすい形で Web ブラウザ上に表示できれば良いかと思います。 こうした表示は、Vue のフレームワークを利用すれば、ブラウザ上に表示することができます。

やる事をまとめると

簡単にアプリを作る作業をまとめてみます。 具体的な例として、マイクロソフトのエクセル（Excel)の表を読み取って、シンプルにブラウザに表示するアプリを作る事を考えます。

この場合は、

＊　入力データは Excel のファイル

＊　出力先は Web ブラウザに表を表示

ということで、この場合は、データを読み込んで表示するだけなので、データさえ取り込めればデータ処理は殆どありません。

実際にやることをリストにしてみましょう

＊　開発に利用する PC の設定　（余裕を見て見積もって２〜3 日）

＊　Excel のファイルを選択するためのフォームの作成（1 日）

＊　Excel のファイルの読み込み（xlsxという公開されているモジュールを使います）（余裕を見て 7 日間）

＊　読み込んだファイルの中身を Web ブラウザに表示（余裕を見て 7 日間）

＊　CSS で体裁を整える（1 日）

＊　公開用のイメージの作成（1 日）

＊　Firebase のホスティングでインターネットに公開（1 日）

という感じで賞味期限 21 日間、残りの１週間を予備日にすると、シンプルなアプリを 30 日で作成可能です。

学習する内容としては、

＊　HTML の基本（入力フォームと出力に使用するテーブルを含む基本）

＊　Javascript (ループ、ファイルの読み込み、条件分岐、UI のイベント処理、配列、文字列の処理)

＊　Vue の基本（フォーム、結果の表示、UI のイベント処理、モジュール化、テスト方法、公開イメージの作成）

＊　CSS などで、体裁を整える

＊　Firebase の基本（Web ホスティング）

簡単な例ですが、基本的な要素が入っています。データを取り込むところから結果の出力までを行うプログラムを作って、インターネットに公開するところまで体験できるので、アプリ開発の流れを体験しながら学習できます。

あとは、細かい処理など詳細を追加していく形で機能を充実させていけば実用的なアプリに発展させていくことが可能です。実際に、体裁が整ったアプリにするにはもう少し時間はかかりますが、「一通り体験する」とそのスピードが加速されます。

実力アップのコツは、簡単でも良いので一通りのプロセスを出来るだけ多く体験することです。 従って、HTML を一通り勉強して、次は CSS を勉強して、Javascript がある程度書けるようになったら何か作ってみるというやり方よりは、必要な事だけ最低限の勉強で一連の流れを体験する方が効率的に進みます。

まとめ

プログラミング上達の秘訣は、簡単でも良いので一連の流れの作業を完結する機会を増やす事です。 必要な事一通り勉強してから取り組むよりも、実際に「使う部分だけ」を集中的に学習して、それを使って実際にアプリとして稼働させることで、全体の流れを理解すると同時に、「よく使う事」を繰り返して体験することで、実際に「作れる」ようになる事がポイントです。

今回例に挙げたような、簡単なアプリで良いので、まずは、学習しながら実際に作ってみてください。実際にアプリがインターネットで稼働すると、自信にもなりますし、一連の作業も慣れてくるので何回はやるうちに驚くほど短時間でアプリを形にできるようになります。

この連載では、今回例に挙げた内容をさらに詳しく解説する連載をしていくことを予定しています。

プログラミング初心者の方必見です！