Facebook投稿支援アプリにReact/Vueは必要か (2)？
WebアプリやWebサービスを開発するのにフレームワークがどこまで必要なのかをシンプルなアプリを例にして考える企画を実施しています。 前回の投稿は、シンプルにHTMLとJavascriptだけで実装してみました。アプリがシンプルなのでHTMLとJavascriptだけでも簡単に実装できました。
この記事ではHTMLとJavascriptに加えてjQueryを利用してみました。
少し前には利用が多かったjQuery
jQueryは、フレームワークというよりは、Javascriptのライブラリという感じのものです。どう呼ぶかはこの記事ではあまり重要ではありません。何が便利かというと、JavascriptでHTMLで記述した部分の操作をシンプルに記述できるようになる点です。
例えば、Javascriptの機能でHTMLのDOM(Document Object Model)を取得する場合には、
const sample = document.getElementById("sample")
と書いているのと同じ操作を以下のようなシンプルな記述に置き換えることができます。
const sample = $('#sample')
Javascriptのコーディングをシンプルにすることができるので、少し前はよく利用されていました。現在でも、DOM操作に特化したライブラリなどを作る際にはよく利用されています。
最近は、Webアプリなどでは主流はReactやVue、或いはAngurarと言ったフレームワークになっています。しかし、Webページのデザインの際に細かいDOMの操作をしたい場合などは現在でもよく利用されています。
jQueryを利用するには
jQueryを利用するには、jQueryの機能を記述したファイルを読み込む必要があります。一番広く使われているのがCDN（Contents Network Delivery）を利用する方法です。
この方法では、インターネット上にサーバーに置かれているJavascriptのファイルを指定してWebブラウザに読み込む方法です。Webアプリの場合は、ほとんどの場合インターネットに接続されているのが前提なので、インターネット上のサーバーに置いてあるファイルを読み込むことは余り問題ではないのでこの方法が広く使われています。
もう一つは、必要なJavascriptのファイルをダウンロードして、そのファイルをホスティングするサーバーに置いて医療する方法です。例えば、会社内の利用に限定したWebアプリでインターネットのアクセスが制限されているような場合は、社内のWebサイトをホストするサーバーにダウンロードしたファイルを置いておけば、jQueryの機能を利用できます。
CDNを利用する場合は以下のようなリンクをHTMLファイルで読み込みます。
<script
src="ｈｔｔｐｓ://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
ここで読み込んでいるファイルをダウンロードして、ホスティングのサーバーに置いておけば、インターネットにつながっていない場合でもjQueryの機能を利用することができます。
HTMLのDOM操作がシンプルに
同じような記述で、ボタンが押されたときのイベント処理や、CSSの設定もJavascript側からシンプルな記述で出来るようになるので便利です。
基本的なHTMLの記述は、前回のHTMLとJavascriptの場合と余り変わりません。 イベントの設定はJavascript側で行うようにしているので、若干HTMLがシンプルになっています。また、CSSの操作もJavascriptで動的に行っています。
Javascriptで処理している事は基本的にHTMLとJavascriptで行っているものと全く同じですが、個々の記述がシンプルになっていますので、コード全体もシンプルになっています。
<div id="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" id="text"></textarea>
<button id="convert" class="btn btn-primary">変換</button>
<button id="clear" class="btn btn-danger">クリア</button>
</div>
<div class="footer bg-dark">
<footer>
Copyright(c) 2021 by Silicon Valley Super Ware, all rights reserved.
</footer>
</div>
</div>
<script>
const text = $("#text");
let contents = "";
let converted = false;
$("#clear").css("display", "none");
text.bind("input", (event) => updateText(event));
$("#clear").click(() => {
// Clears text area
contents = "";
$("#clear").css("display", "none");
$("#convert").css("display", "");
text.removeAttr("readonly");
$("#text").val("");
converted = false;
});
$("#convert").click(() => {
// Converts text area
let new_contents = "";
for (let i = 0; i < contents.length; i++) {
const c = contents[i];
if (c === "\n") {
new_contents = new_contents + c + String.fromCharCode(8203);
} else {
new_contents = new_contents + c;
}
}
contents = new_contents;
$("#text").val(contents);
$("#clear").css("display", "");
$("#convert").css("display", "none");
text.attr("readonly", "true");
text.select();
document.execCommand("copy");
converted = true;
});
function updateText(e) {
contents = e.target.value;
}
</script>
あとは、CSSで体裁を整えて、表示させれば基本機能は完成です。
jQueryを利用するメリット
では、ここでjQueryを利用するメリットを簡単にまとめると：
＊ HTMLのDOMの操作をシンプルにできる（id/classのタグを使って表現）
＊ DOMのイベント処理もシンプルに（ボタンを押した場合などの処理）
＊ CSSもCSSのフォーマットに近い形でJavascriptで記述可能
Javascriptの処理自体は、HTMLと書く場合と殆ど同じでです。個々のコードがシンプルになるため、全体的にシンプルな感じがするコードになります。
まとめ
jQueryを利用すると、HTMLのDOMを操作する個々の記述がシンプルになります。 処理内容のステップ自体は、HTMLとJavascriptだけで書いたときとほぼ同じです。シンプルな形式で書けるのが魅力ということになります。
今回取り上げている例の場合は、HTMLの基本構造は変わらないので余り違いはありません。 例えば、何かの処理結果を表に表示するような処理で、表示するデータの行数が固定でない場合には、動的にDOMを処理する必要があります。こうした場合には、jQueryを利用したほうが、全体の見通しがよくなるので便利です。
ただし、動的にDOMを操作する部分が多い場合には、次回以降紹介するReactやVueを使ったほうが遥かに便利です。
jQueryの特長を一言でまとめるならば、HTMLの「DOMの処理をシンプルな書き方で記述できる」というのが最大の利点です。
