Facebook投稿支援アプリにReact/Vueは必要か？
記事IT・テクノロジー
Facebook投稿支援アプリにReact/Vueは必要か？
Facebook投稿支援アプリにReact/Vueは必要か？
先日、「jQueryを勉強した方が良いか？」という質問を頂きました。
個人的な見解としては、ほとんどの人の場合、jQueryを勉強するより、ReactやVueを学習した方が良いと思います。そこで、シンプルですが同じアプリをいろいろな方法で実装してみて、もう少し具体的に考えてみました。
サンプルの題材は「Facebook投稿支援アプリ」です。
この連載でも紹介しましたが、Facebookの投稿を行う際に文章の空改行を入れても、投稿時にFacebookが空改行を削除してしまうので、投稿文章の体裁を整えることができないという問題があります。
このアプリは投稿の原稿を変換して、空改行を保持したままFacebookに投稿できるようにするアプリです。
サンプルの為に機能はシンプルにしてあります
＊ フォーム上に投稿の原稿を入力
＊ 変換ボタンを押す
＊ 投稿をFacebookにペースト（Facebook上）
いろいろな実装でこのアプリを作ってみます！
全く同じ機能のアプリを、幾つかの方法で作ってみて比較するのが今回の企画です。
＊ HTML/Javascriptのみ
＊ jQuery/Javascript
＊ React/Javascript
＊ Vue/Javascript
です。 なるべく条件を同じようにするため、React/Vueなどの開発は、npmのパッケージ管理機能を使ってプロジェクトを作成して作る方式ではなくて、CDN(Contents Network Delivery)を利用してHTMLのページに組み込む方法を採用してみました。
初回のこの記事では、HTMLとJavascriptのみで作ってみました。
一番シンプルな実装は？
一番シンプルな実装は、HTMLでフォームを作って、フォームの操作をJavascriptで行うという方法です。
<body>
<div id="app">
<div>
<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 type="button" class="btn btn-primary" onclick="convert()">
変換
</button>
<button type="button" class="btn btn-danger" onclick="clearText()">
クリア
</button>
</div>
<div class="footer bg-dark">
<footer>
Copyright(c) 2021 by Silicon Valley Super Ware, all rights reserved.
</footer>
</div>
</div>
</div>
</body>
スクリプトの部分は、ボタンを押したり、テキストを入力した場合の処理です。
<script>
let contents = "";
let converted = false;
document.getElementById("text").addEventListener("input", (event) => {
updateText(event);
});
function clearText() {
contents = "";
converted = false;
document.getElementById("text").value = contents;
}
function convert() {
// Converts text area
const textarea = document.getElementById("text").value;
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;
converted = true;
text.select();
document.execCommand("copy");
}
function updateText(e) {
contents = e.target.value;
}
</script>
あとは、CSSで体裁を整えて、表示させれば基本機能は完成です。
ちょっと工夫を加えると
上の方法でも十分に実用ですが、変換後に原稿に変更を加えることが可能になっています。その場合、再度変更のボタンを押さないと後から加えられた空改行には対応できません。また、原稿に余計な「特殊文字」を加えることになります。
そこで、変換後は編集禁止になるように変更してみることにします。
違いは「ボタン」の記述に「id」というアトリビュートを加えただけです。 これで、Javascript側からこのHTMLの記述（DOM：Document Object Model）を操作できるようになります。
<button
type="button"
class="btn btn-primary"
id="convert"
onclick="convert()"
>
変換
</button>
<button
type="button"
class="btn btn-danger"
id="clear"
onclick="clearText()"
>
クリア
</button>
このidを使うことで、HTMLの部品をJavascriptのプログラムで特定して管理できます。
document.getElementById("convert").setAttribute("style", "display:none");
のような記述を書くと、「convert」というIDのHTMLの部品を表示させないようにできます。
同じように
document.getElementById("clear").removeAttribute("style");
のような記述を書くと、「clear」というIDのHTMLで表示しないようになっていた設定を削除して表示できるようにできます。
これを利用して、変換前は変換ボタンを、変換後はクリアボタンだけを表示させるようにします。
テキストを入力する「textarea」は「text」というidを割り当てています。
const text = document.getElementById("text");
text.setAttribute("readonly", "true");
のような記述で編集を禁止にできます。
クリアボタンが押された場合は、編集ができるようにこのアトリビュートを取り除きます。
text.removeAttribute("readonly");
これで、変換後の編集を禁止して、クリアされた後再度入力及び変換が出来るような仕組みが実現できます。
HTMLの主要部分のコードの全容です。
<body>
<div id="app">
<div>
<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
type="button"
class="btn btn-primary"
id="convert"
onclick="convert()"
>
変換
</button>
<button
type="button"
class="btn btn-danger"
id="clear"
onclick="clearText()"
>
クリア
</button>
</div>
<div class="footer bg-dark">
<footer>
Copyright(c) 2021 by Silicon Valley Super Ware, all rights reserved.
</footer>
</div>
</div>
</div>
</body>
<script>
let contents = "";
let converted = false;
const text = document.getElementById("text");
text.addEventListener("input", (event) => {
updateText(event);
});
document.getElementById("clear").setAttribute("style", "display:none");
function clearText() {
contents = "";
converted = false;
document.getElementById("text").value = contents;
text.removeAttribute("readonly");
document.getElementById("clear").setAttribute("style", "display:none");
document.getElementById("convert").removeAttribute("style");
}
function convert() {
// Converts text area
const textarea = document.getElementById("text").value;
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;
converted = true;
text.select();
document.execCommand("copy");
text.setAttribute("readonly", "true");
document.getElementById("convert").setAttribute("style", "display:none");
document.getElementById("clear").removeAttribute("style");
}
function updateText(e) {
contents = e.target.value;
}
</script>
ヘッダーとCSS部分を入れても100行程度でアプリが実現できます。
まとめ
Webアプリの実装にフレームワークがどの程度必要化を考えるために、いろいろな方法で同じ機能のアプリを作って、比較するという企画をやってみることにしました。
初回のこの記事では、HTMLとJavascript以外を使わずに実装してみました。
このくらいシンプルなアプリだと、特に問題なく実装できます。
規模が大きくなった場合、HTMLで記述したIDの管理が面倒になるというのが、この方法の欠点です。IDはHTMLに記述しますが、プログラム中の複数の場所で、このIDを使った部品（DOM)を利用する場合は、変数（定数）で定義するなどの工夫が必要です。
プログラム中でIDをハードコーディングした場合、数が多くなった場合間違いがあった場合場所を特定したり、変更が大変になります。 （サンプルコードはハードコーディングしています）
次回は、jQueryを用いた実装を検証していきます。
