Facebook投稿支援アプリにReact/Vueは必要か (4)？
記事IT・テクノロジー
Facebook投稿支援アプリにReact/Vueは必要か (4)？
WebアプリやWebサービスを開発するのにフレームワークがどこまで必要なのかをシンプルなアプリを例にして考える企画を実施しています。 前回の投稿は、Reactを利用して実装してみました。プログラムでやっている事はほぼ同じですが、記述をシンプルにすることが可能になりました。
この記事では、Webアプリやサービスの開発にReactと並んでよく利用されるVueを使って実装してみました。
Vueの実装はnpmを利用する場合が多い！
Webアプリやサービスの実装でVueを利用する場合は、Reactと同様にnpmを利用して必要なパッケージ（モジュール）を取り込んで利用するほうが一般的です。Vueの場合、「Vue CLI」と呼ばれるプロジェクト管理用のパッケージがあって、これを利用するとUIも利用できるので便利です。 このスタイルの方が、よく利用する機能を部品化しやすく、再利用しやすくなるのが大きな理由です。
今回もReactの時と同様に、通常のHTMLとJavascriptの実装や、jQueryとの比較も考えているので、敢えてnpmを使わずに、jQueryの場合と同様に、CDN(Contents Delivery Network)で必要なモジュールをHTMLで記述したWebページに取り込んで実装をしてみました。
VueをCDNで利用する場合以下のようなリンクをHTMLに記述して利用します。
<link
href="ｈｔｔｐｓ://cdn.jsdelivr.net/npm/bootstrap＠5.0.0-beta2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
crossorigin="anonymous"
/>
これで、Vueの基本機能をHTMLファイルから利用できるようになります。
Vueを一言で言うと。。。
Vueの全てを一言で語れる物ではありませんが、よく使われる形態を考えると
「HTMLにプログラミングの要素を取り込んだ物」
です。Reactの時は、「Javascriptのプログラムの中にHTMLを書けるようにした」と書いていますが、対象的なアプローチです。
Reactが利用しているJSXに比べると、HTMLに近い感じなので、学習コストはReactより低いと言われています。もう少し詳しく言えば、HTMLにプログラミングの要素を取り入れて、Javascriptとの相性を良くしたという感じです。
今回は最初に基本部分のソースコードをご覧頂く事にします。
<body>
<div id="vue_app">
<div class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/"> Facebook投稿ツール </a>
</div>
</div>
<div class="form-group fb_form">
<textarea
class="form-control"
ref="text"
v-model="contents"
v-bind:readonly="converted"
></textarea>
<button
v-bind:class="{'btn btn-primary':!converted,'btn btn-danger':converted}"
v-on="converted? {click:() => clear()}:{click:() => convert()}"
>
{{converted?"クリア":"変換"}}
</button>
</div>
<div class="footer bg-dark">
<footer>
Copyright(c) 2021 by Silicon Valley Super Ware, all rights reserved.
</footer>
</div>
</div>
<script>
const app = new Vue({
el: "#vue_app",
data() {
return {
contents: "",
converted: false,
};
},
methods: {
clear() {
this.contents = "";
this.converted = false;
},
convert() {
let new_contents = "";
for (let i = 0; i < this.contents.length; i++) {
const c = this.contents[i];
if (c === "\n") {
new_contents = new_contents + c + String.fromCharCode(8203);
} else {
new_contents = new_contents + c;
}
}
this.contents = new_contents;
this.$refs.text.select();
document.execCommand("copy");
this.converted = true;
},
},
});
</script>
</body>
Reactの場合、HTMLに相当する部分もJavascriptに取り込んだ感じですが、Vueの場合は、HTMLとJavascriptは通常のJavascriptとHTMLで記述するときのように分離されているイメージです。 HTMLでUIを作って、Javascriptで処理をするという分担で、双方のインターフェースを強化しています。
比較的、通常のHTMLに近い感覚で記述できるのが魅力です。
どちらかというと、機能強化版のjQuery
jQueryとは全く別物ですが、同じような感覚で記述できるのは魅力です。 Javascript部分の記述方法は、独特の記述方法がありますので、この部分はVue独特のスタイルを学習する必要があります。 この例では、利用するページ内でHTML部分や、メソッド間で共有する変数を記述する部分（data）とメソッドを記述する部分（methods）が主なブロックになりますが、利用する機能によっては更に別のブロックに記述ができるような形式になっています。
条件による表示の切り替えなどは、HTMLの部分に条件を入れたり、ループを入れる事もできるので、Reactのように、別の表示に切り替えることも簡単に実現できます。
Vueのメリットは？
今回、例として実装している「Facebook投稿の支援アプリ」はシンプルなので、HTMLとJavascriptで実装した場合や、jQueryで実装した場合、Reactと比べてコード量が少なくなるというようなメリットはありません。Ractよりは若干行数は少なく記述ができましたが、大きな違いはありません。
Reactと同様にモジュール化（部品化）しやすいというメリットがあります。例えば、この基本機能をもとに機能を拡張、追加する場合には、比較的簡単にわかりやすい形で追加しやすくなります。
Vueの一番の魅力は、HTMLとCSSをある程度勉強した方ならば、最小限の学習で利用できるようになることです。HTMLとCSSからの学習ステップはReactよりは少ない時間で使えるようになると思います。
まとめ
Vueを利用すると、JavascriptとCSSの延長で、簡単に高度なWebアプリ・サービスの開発が可能になります。Reactと同様にモジュール化も進めやすく、ある程度の規模の開発でも対応しやすく、シンプルなWebページにCDNで実装する場合でも余り差がないため幅広い開発に対応しやすいと言えます。
企業の開発、特にアメリカではReactの方が需要が高いですが、個人での開発などではVueは使いやすく便利です。npmを利用するとUIを使った管理もできるので使いやすいフレームワークと言えます。
敢えて、欠点を言うならばバージョンごとに変更が多い場合が多く、メジャーなアップデートの際には互換性が問題になる場合があります。これも、開発当初のバージョンを変更せずに利用すれば余り大きな問題ではありません。
WebアプリやWebサービスの開発を考えた場合、学習コストも低く、最初に学習することを考えた場合Vueはおすすめのフレームワークと言えます。
