アプリ？ウェブアプリ？ JSフレームワーク？って？

もずく
2020/02/03 14:35

もずくです。

注意： 本記事の内容は本職がプログラマではない人間が書いています。間違っていたらごめんなさい。

ALIS界隈でにわかにプログラミング学習が流行っていますね。

プログラミング初心者の方はPythonが多いみたいですが、応用として、Pythonから既存のインターネットサービス（TwitterやALISなど）の情報を取得し、それを加工してどこかに出力…という用途を考えている方が多いのではないでしょうか。

出力先には色々とあります。自分のPCの画面に表示して個人的に楽しむという人もいれば、TwitterなどのSNSに流す、ウェブページの形で公開する、ALISに記事として投稿する…などなど。

こういったプログラムへの入力等をユーザが操作できるインタフェース（UI）を付け加えれば、そのプログラムは晴れて「アプリ」へと昇格？させることができます。

［プログラム］＋［UI］→［アプリ］

アプリ？

さて、アプリというからには、そのUIを自分以外の人に利用してもらえるようにしたいですよね。そんなUIの種類によって、アプリは、

・ウェブアプリ
・スマホアプリ
・デスクトップアプリ

などと区別されるようになります（たぶん）。

近年では「アプリ」といえばスマホアプリを指すのが一般的かと思いますが、スマホアプリはAndroidやiOSの審査に通さなくては配布できなかったりして、それがなかなか大変です。

プラットフォームもAndroidとiOSに分かれていて、それぞれにKotlinやSwiftというプログラミング言語を使って開発する必要があります。一つのソースコード（≒プログラムを書いたファイル）でAndroidとiOSの両方のアプリが作れるFlutterも出てきたのですが、初心者が気軽に挑戦するにはもう一歩という感じです。

デスクトップアプリもスマホアプリと状況はほぼ同じです。UIを作るためのプログラミング言語がプラットフォーム毎に異なりますし（WindowsはC#やC++、MacはSwift）、アプリを公開・配布するのに審査があったりします。

そんななか、ウェブアプリだけはちょっと異質で、ほぼクロスプラットフォームを実現しています。ここでの「クロスプラットフォーム」というのは、一つのアプリがどのプラットフォーム（OS）からも利用できるという意味です。

それから、公開・配布するのに審査もありません。アプリをウェブページとして公開して、そのURLを使ってほしい人に伝えればOKです。その「ウェブページの公開」が難しいんやん…と思うかもしれませんが、最近はかなり簡単に公開できるようになってきました。

ウェブアプリ、初心者にはうってつけですよね。

☕ ウェブアプリがクロスプラットフォームだとはいっても、スマホとデスクトップで画面サイズが異なることによるレイアウト調整は必要です。また、スマホアプリやデスクトップアプリに比べて、端末に組み込まれた／接続されたデバイス（スマホカメラとか）を使うのは苦手です。

ウェブアプリ？

ということで、初心者の方はウェブアプリから始めるのがお勧めなのですが、具体的にどうやってUI（ユーザインタフェース）なるものを作るのでしょう。

ウェブアプリのUIは、HTML・CSS・JavaScriptで作ります。
HTMLとCSSを使って、ウェブページと同じ要領でボタンやフォームなどをレイアウトします。JavaScriptは、フォームに入力された情報を取得したり、ボタンを押したときに実行する処理を記述したりするのに使います。

ん？でもプログラムはPythonで書いているんだけども？

…と思った人もいるかもしれません。

大丈夫です。ウェブアプリでは、プログラムの本体は別のプログラミング言語で書かれていても構いません。

デスクトップアプリや一部のスマホアプリでは、
［UI・プログラム］⇄［既存のインターネットサービス］
といったような作りになっていることがあります。
処理をしているメインのプログラムに直接UIを組み込んでいくような作りかたで、コーディング初心者のうちはとっつきやすいのですが、UIとロジック（メインのプログラムの処理）が分かれていないと後々辛くなってきます。

一方、ウェブアプリは基本的に次のような形になっています。

［UI］⇄［サーバサイドプログラム］⇄［既存のインターネットサービス］

この「サーバサイドプログラム」というところが、Pythonなど、皆さんが勉強しているプログラミング言語で書かれたプログラムになります。

上記の図式ではサーバサイドプログラムは「既存のインターネットサービス」と連携するように書いていますが、データベースやメールなど、別のプログラムと連携したりもします。

「サーバサイド」という言葉からも推測できるように、サーバサイドプログラムはインターネット上のサーバの上で動いています。

PythonでもJavaでもRubyでも、大抵のプログラミング言語はウェブサーバの仕組みを持っています。自分で作ったプログラム、例えばALISから記事を取得するプログラムをウェブサーバから呼び出すように書き換えれば、ウェブアプリで使用することができます。

こうしてウェブサーバと連携させたプログラム全体を指して「アプリケーションサーバ（APサーバ）」と呼びます。

［ウェブサーバ］＋［プログラム］＝［APサーバ］

プログラミング初心者の人がこれまでPythonなどで作ってきたものはおそらく上記の［プログラム］の部分に当たります。それをウェブアプリにするためには［プログラム］をAPサーバ化する必要があります。

フロントエンド？

さて、ちょっと前の図式の［UI］の部分は、HTML・CSS・JavaScriptで書かれているいわゆるウェブページのことでした。

ウェブページってウェブサーバにアップロードしてあって、ウェブサーバの上で動いているんじゃないの？サーバサイドプログラムと何が違うの？と思った人はよく勉強されています。半分正解です。

ウェブページは確かにウェブサーバにアップロードしますが、それはインターネットでつながった人たち（ユーザ）にウェブページのデータを配布するためです。ユーザがウェブサーバにアクセスすると、ウェブページのデータがユーザのPCやスマホのブラウザにダウンロードされます。

トンネルなどでネットワークが途切れても、表示していたウェブページが真っ白になったりはしないですよね、あれはデータがすでに手元にあるからです。

ということで、ウェブアプリの［UI］の部分は、ユーザの持っているPCやスマホのブラウザの上で動きます。サーバ上で動いているサーバサイドプログラムに対して、この［UI］の部分を「クライアントサイドプログラム」といいます。

また、サーバサイドプログラムのことを（ユーザから見て）裏で動いていると考えて「バックエンド」と呼ぶこともあります。（※バックエンドと呼ぶ場合は、サーバサイドプログラム≒APサーバの範囲を越えて、もっと広い範囲を指すことが多いようにも思います。）

それに対して、クライアントサイドプログラムのことを「フロントエンド」と呼びます。おそらくこちらのほうが「フロントエンドエンジニア」という言葉で一般に耳にする言葉かと思います。

☕ 後ろに「エンジニア」や「開発」という単語が付くときに、なぜか「フロントエンド ⇄ サーバサイド」と対比されることが多いように思います。本来は「フロントエンド ⇄ バックエンド」と「クライアントサイド ⇄ サーバサイド」という対応関係なのですが…
なお、本記事ではウェブアプリの専門用語のようにフロントエンドやバックエンド、APサーバなどの言葉を使っていますが、これらはウェブアプリに限定されるものではありません。区別したいときには頭に「ウェブ」を付けます。ウェブフロントエンド…です。

ということで、ウェブアプリでUIを作るということは、フロントエンド開発をするということです。平たくいえば「ウェブページを作る」ということなのですが、いわゆる普通のウェブページに比べるとJavaScriptの割合が格段に多くなります。

例えば、ウェブアプリの画面の書き換えをほぼすべてクライアントサイドのJavaScriptでやってしまう場合があります。「アプリの画面が切り替わる」ということを、「別のウェブページに遷移する」という方法ではなく、同じウェブページのままJavaScriptで中身（HTMLとCSS）を全部書き換えてしまうのです（これを「SPA（シングルページアプリケーション）」といいます）。

ということで、「HTMLとCSSなら昔かじったことある！（黒歴史！）」という人もいるかと思いますが、フロントエンド開発となるとちょっと毛色が違ってきます。

JSフレームワーク？

ということで、フロントエンド開発ではJavaScriptを使ってガシガシとコーディングしていくわけですが、HTML・CSS・JavaScriptというのはそもそもウェブサイトを構築するためのもので、アプリのUIを作るための設計にはなっていません。

なので、例えば、JavaScriptの配列に入れたデータをリスト表示する…などの処理をJavaScriptで記述するのはちょっと面倒なのです。

そこで登場するのがJavaScriptフレームワーク（JSフレームワーク）です。
ウェブアプリを調べたことのある人なら「React」や「Vue.js」という言葉を聞いたことがあるかもしれません。それらのことです。

JSフレームワークというのはJavaScriptと別のプログラミング言語ではなく、JavaScriptを使ってもっと楽にコードを書くための仕組みです。言語自体はJavaScriptで、そこに新しい書き方（記法）が加わるような感じです。

☕ 以下、自分でもコードを打ち込みながら試してみたい人は、ウェブエディタである JSFiddle を使ってみましょう。
HTML／CSS／JavaScript／Resultという四つの画面に分かれているので、HTMLとJavaScriptのところにそれぞれのコードを貼り付けて、左上にある「▷ Run」をクリックするとResultのところに結果が表示されます。

例えば、JavaScriptで

const coins = ['BTC', 'ETH', 'MONA', 'ALIS'];

という配列があって、これをリスト表示（<ul><li>タグ）したいとします。

（※Pythonなどを勉強したプログラミング初心者を読者として想定しています。）

HTMLは以下のようにしておきます。（<head>や<body>などのタグは省略してありますが、JSFiddleを使う場合には省略したままでOKです。）

<ul></ul>

<ul>タグだけHTMLに用意してあるので、その子要素の<li>タグに配列coinsの各要素をテキストコンテンツとして追加するには、（例えば）以下のように書くことになります。

const coins = ['BTC', 'ETH', 'MONA', 'ALIS'];

const ul = document.querySelector('ul');

for (const coin of coins) {
let li = document.createElement('li');
li.textContent = coin;
ul.appendChild(li);
}

JSFiddleを使ってみている人はここで「▷ Run」を押してみてください。

というようなリストが表示されたかと思います。

JavaScriptしか知らないと、「まあそんなもんかな」と思うかもしれません。
しかし、これをJSフレームワークの一つであるVue.jsで書き換えてみましょう。ちなみに、Vue.jsはALISブログでも使われているJSフレームワークです。

JSFiddleで試したい場合は、JSFiddleにアクセスしたときに出てくる上の青い領域から「Vue」を選んで、以下のものに書き換えてみてください。

なお、コピペするとJavaScriptのほうは整形（Tidy）が効きませんでしたので手打ちになりますが、一箇所でも間違えているとうまく動きません（し、エラーメッセージも出ないので何が怒ったのかよくわかりません）ので注意です。

HTML：

<div id="app">
<ul>
<li v-for="coin in coins">{{coin}}</li>
</ul>
</div>

JavaScript：

new Vue({
el: "#app",
data: {
coins: ['BTC', 'ETH', 'MONA', 'ALIS']
}
});

どうです？　圧倒的に短く書けますよね。

（JSFiddleではなぜか箇条書きの・が消えますが…）

ただ、HTMLのほうに見慣れない属性や記述が登場しています。Vue.jsの場合、このようにHTML側のカスタム属性などを使って独自の記法を導入しています。

JavaScriptのほうも見慣れない感じですが、文法自体はJavaScriptのオブジェクトを定義しているだけです。

実はJSフレームワークの強みはまだこのサンプルには出てきていません。

次の長ったらしいコードはJavaScriptのものです。暗号資産リストにフォームから追加できるようになっています。追加したコインをリストに反映させるには「更新」ボタンを押す必要があります。

※JSFiddleに打ち込むのが面倒な人はリンクにアクセスしてください。

HTML：

<ul></ul>
<p>
<input>
<button id="add">追加</button>
</p>
<p>
<button id="update">更新</button>
</p>

JavaScript：

const coins = ['BTC', 'ETH', 'MONA', 'ALIS'];

const ul = document.querySelector('ul');

const updateList = function() {
for (const coin of coins) {
let li = document.createElement('li');
li.textContent = coin;
ul.appendChild(li);
}
}

const clearList = function() {
while (ul.lastChild) {
ul.removeChild(ul.lastChild);
}
}

document.getElementById('add').onclick = function() {
const newCoin = document.querySelector('input').value;
coins.push(newCoin);
document.querySelector('input').value = '';
}

document.getElementById('update').onclick = function() {
clearList();
updateList();
}
updateList();

これをVue.jsで書いてみましょう。
残念ながら、Vueの場合はJSFiddleではリンク共有できないようなので、がんばって打ち込むか、読むだけにしてください。（コピペでも動きますが整形できません）

HTML：

<div id="app">
<ul>
<li v-for="coin in coins">{{coin}}</li>
</ul>
<p>
<input v-model="newCoin">
<button @click="add">追加</button>
</p>
</div>

JavaScript：

new Vue({
el: "#app",
data: {
coins: ['BTC', 'ETH', 'MONA', 'ALIS'],
newCoin: ''
},
methods: {
add: function() {
this.coins.push(this.newCoin);
this.newCoin = '';
}
}
});

え、やばない？

やばいやろ？

このくらい短くなります。

しかも、「更新」ボタンは必要ありません。配列に新しい要素をpushするだけでリストが自動的に更新されます。

調子に乗ってもう一つ行きましょう。

ALISの円換算をするアプリ？です。
面倒なのでレートは2020/2/3時点の3.64円／ALISで固定にしておきます。

まず素のJavaScriptの場合。

HTML：

<p>
<input>ALIS <button>変換</button>
</p>
<p>
<span>0</span>円
</p>

JavaScript：

const JPYALIS = 3.64;

document.querySelector('button').onclick = function() {
const alis = document.querySelector('input').value;
document.querySelector('span').textContent = alis * JPYALIS;
}

まあ、短いですが文字が多くて黒いですね。

Vue.jsの場合

HTML：