すべてのカテゴリ

Facebook投稿支援アプリにReact/Vueは必要か (2)？WebアプリやWebサービスを開発するのにフレームワークがどこまで必要なのかをシンプルなアプリを例にして考える企画を実施しています。 前回の投稿は、シンプルにHTMLとJavascriptだけで実装してみました。アプリがシンプルなのでHTMLとJavascriptだけでも簡単に実装できました。この記事ではHTMLとJavascriptに加えてjQueryを利用してみました。少し前には利用が多かったjQueryjQueryは、フレームワークというよりは、Javascriptのライブラリという感じのものです。どう呼ぶかはこの記事ではあまり重要ではありません。何が便利かというと、JavascriptでHTMLで記述した部分の操作をシンプルに記述できるようになる点です。例えば、Javascriptの機能でHTMLのDOM(Document Object Model)を取得する場合には、const sample = document.getElementById("sample") と書いているのと同じ操作を以下のようなシンプルな記述に置き換えることができます。const sample = $('#sample') Javascriptのコーディングをシンプルにすることができるので、少し前はよく利用されていました。現在でも、DOM操作に特化したライブラリなどを作る際にはよく利用されています。最近は、Webアプリなどでは主流はReactやVue、或いはAngurarと言ったフレームワークになっています。しかし、Webページ

Facebook投稿支援アプリにReact/Vueは必要か (6)？WebアプリやWebサービスを開発するのにフレームワークがどこまで必要なのかをシンプルなアプリを例にして考える企画を実施しています。 これまでに、HTMLファイルをベースとした実装例として、シンプルなHTMLとJavascript、jQuery、CDNをベースにしたReactとVueの実装例を紹介してきました。前回の記事でまとめたように、ReactやVueを使う場合、「npm」を利用してReactやVueのプロジェクトを作成して開発した方が便利です。ReactやVueを利用した開発の殆どは、CDNではなく、「npm」が利用されています。この記事では、「npm」を利用したReactの実装例を紹介しています。パッケージを管理する「npm」Node.jsをインストールすると、合わせてインストールされるのが「npm」というパッケージ管理ツールです。このツールを利用すると、インターネット上で公開されているNode.js（Javascript）のパッケージを自分のWebアプリやサービスに取り込んで簡単に利用できます。少し規模の大きなWebアプリやサービスの場合、そうした既存の公開されているパッケージを利用できるので開発の効率が向上します。もちろん、CDN(Contents Delivery Network)で、HTMLファイルから読み込めばこうしたパッケージも利用できるのですが、規模が大きなアプリやサービスの場合、npmで取り込んでしまった方が便利です。Node.jsは、オフィシャルサイトからダウンロードして簡単にインスト

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)を利用してH

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

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="ｈｔｔｐｓ://unp