Facebook投稿支援アプリにReact/Vueは必要か (3)？
記事IT・テクノロジー
Facebook投稿支援アプリにReact/Vueは必要か (3)？
WebアプリやWebサービスを開発するのにフレームワークがどこまで必要なのかをシンプルなアプリを例にして考える企画を実施しています。 前回の投稿は、jQueryを利用して実装してみました。プログラムでやっている事はほぼ同じですが、記述をシンプルにすることが可能になりました。
この記事では、Webアプリやサービスの開発によく利用されるReactを使って実装してみました。
Reactの実装はnpmを利用する場合が多い！
Webアプリやサービスの実装でReactを利用する場合は、npmを利用して必要なパッケージ（モジュール）を取り込んで利用するほうが一般的です。 このスタイルの方が、よく利用する機能を部品化しやすく、再利用しやすくなるのが大きな理由です。
今回は、通常のHTMLとJavascriptの実装や、jQueryとの比較も考えているので、敢えてnpmを使わずに、jQueryの場合と同様に、CDN(Contents Delivery Network)で必要なモジュールをHTMLで記述したWebページに取り込んで実装をしてみました。
ReactをCDNで利用する場合以下のようなリンクをHTMLに記述して利用します。
<script
crossorigin
src="ｈｔｔｐｓ://unpkg.com/react＠17/umd/react.production.min.js"
></script>
<script
crossorigin
src="ｈｔｔｐｓ://unpkg.com/react-dom＠17/umd/react-dom.production.min.js"
></script>
<script src="ｈｔｔｐｓ://unpkg.com/＠babel/standalone/babel.min.js"></script>
これで、Reactの基本機能をJavascriptから利用できるようになります。
Reactを一言で言うと。。。
Reactの全てを一言で語れる物ではありませんが、よく使われる形態を考えると
「Javascriptのプログラムの中にHTMLを書けるようにした」
というのが、Reactの主な利用形態です。
実際は、HTMLではなくて、HTMLによく似た「JSX」を使って、HTMLの記述をJavascriptの中に取り込んでいます。
今回は最初に基本部分のソースコードをご覧頂く事にします。
<body>
<div id="react_app"></div>
<script type="text/babel">
class App extends React.Component {
text = React.createRef();
constructor(props) {
super(props);
this.state = {
contents: "",
converted: false,
};
}
clear() {
this.setState({
contents: "",
converted: false,
});
}
convert() {
let new_contents = "";
for (let i = 0; i < this.state.contents.length; i++) {
const c = this.state.contents[i];
if (c === "\n") {
new_contents = new_contents + c + String.fromCharCode(8203);
} else {
new_contents = new_contents + c;
}
}
this.setState({
contents: new_contents,
converted: true,
});
if (this.text.current) {
this.text.current.select();
document.execCommand("copy");
}
}
updateText(e) {
const value = e.target.value;
this.setState({
contents: value,
});
}
render() {
return (
<React.Fragment>
<div className="navbar navbar-dark bg-dark">
<div className="container-fluid">
<a className="navbar-brand" href="/">
Facebook投稿ツール
</a>
</div>
</div>
<form className="form-group fb_form">
<textarea
className="form-control"
onChange={(e) => this.updateText(e)}
value={this.state.contents}
ref={this.text}
readOnly={this.state.converted}
></textarea>
<button
type="button"
className={
this.state.converted ? "btn btn-danger" : "btn btn-primary"
}
onClick={
this.state.converted
? () => this.clear()
: () => this.convert()
}
>
{this.state.converted ? "クリア" : "変換"}
</button>
</form>
<div className="footer bg-dark">
<footer>
Copyright(c) 2021 by Silicon Valley Super Ware, all rights
reserved.
</footer>
</div>
</React.Fragment>
);
}
}
ReactDOM.render(<App />, document.getElementById("react_app"));
</script>
</body>
HTMLの記述は最初の部分だけです。
<div id="react_app"></div>
この部分に、Reactのレンダリングで、必要なHTMLのDOMを「埋め込む」という仕組みです。
実際のフォームの部分の記述は、「render()」というメソッドの中に、ほぼHTMLと同じような記述のJSXで書かれています。
変換後と変換前のHTMLのテキストエリア（textarea）やボタン（button）の状態を使い分けています。
プログラムでHTMLを作るイメージです！
jQueryの場合は、元々のJavascriptの標準の機能の記述をよりシンプルな別の記述で置き換えたような感じですが、Reactの場合は、HTML自体をプログラムで作っているというイメージです。
よく使うHTMLベースの機能を、プログラムのモジュールのように扱うことができるので、部品化をしやすくなるため、規模の大きなアプリやサービスでも作りやすくする事が最大の魅力です。
プログラムでレンダリング（描画）するページを変えれば、別の表示をすることも簡単にできるので、一つのHTMLで機能に合わせた表示をさせる事が可能になります。もちろん、Reactの基本機能はJavascriptで書かれているので、HTMLとJavascriptでも同じことは出来るのですが、それを簡単にやるための仕組みとして利用されてます。
ページの書き換えも、必要な部分だけを書き換えるようになっているので、ページの書き換えもスムーズに行えます。
肝心のメリットは？
今回、例として実装している「Facebook投稿の支援アプリ」はシンプルなので、HTMLとJavascriptで実装した場合や、jQueryで実装した場合と比べてコード量が少なくなるというようなメリットはありません。
しかし、モジュール化（部品化）しやすいというメリットがあります。例えば、この基本機能をもとに機能を拡張、追加する場合には、比較的簡単にわかりやすい形で追加しやすくなります。
例えば、今回実装している機能は、テキストエリアに投稿原稿を入力するような形にしていますが、原稿をテキストファイルから読み込む機能を追加する場合、別のモジュールをJavascriptで記述してレンダリング（描画）するようにすると、ファイル選択の画面も綺麗な形で追加できます。
まとめ
Reactを利用すると、Javascriptの中にHTMLを書く感じで、Webアプリを記述することができます。モジュール化を進めやすく、規模の大きな開発にも対応しやすくなるのが最大のメリットです。
今回の例のようなシンプルなケースではメリットは余りありませんが、シンプルな開発から規模の大きな開発までも同じ仕組みで実現できるのは大きな魅力です。
HTMLとプログラム（Javascript）の関係も、プログラムで管理できる要素が増えるので、シンプルなHTMLとJavascriptの実装や、jQueryの実装のように、HTMLのDOMにつけるIDではなく、変数として管理が可能になるので、プログラムとの相性も良く、コードもわかりやすく記述できます。
WebアプリやWebサービスの開発を考えた場合、多くのケースで利用されているように利用したほうが便利だと言えます。
CDNではなく、npmを使うとさらに便利に利用できます。
