お問合せフォームのWebサービスをVue.jsで！

Silicon Valley Super Ware

2020年5月25日


お問合せフォームのWebサービスをVue.jsで！

今週は、アメリカはメモリアルデーで週末三連休でした。 ブログの連載も一日余分にお休みを頂きました。
今月は、「楽して」Webサービスを作る事をテーマに フレームワーク（ライブラリ）として、Vue.jsを導入して 4月に制作した、「お問合せフォーム」のWebサービスを作るという 事をテーマにお届けしてきました！
今週はそのまとめをしていく予定です。

フレームワークは「UI」を作る強力な武器！

繰り返しになりますが、今月取り上げたフレームワーク（ライブラリ）は、 UI（ユーザーインターフェース）を作るための道具です。 良く利用されているUIの為のフレームワーク（ライブラリ）は、 「React」「Vue.js」「Angular」などがあります。 「jQuery」なども加えればいろいろなフレームワーク（ライブラリ）が あります。

Vue.jsを選んだ理由は？

いろいろなフレームワーク（ライブラリ）がある中で今回「Vue.js」を 選んだのには幾つか理由があります。
以前の投稿でも書いた通り、個人的に好きで良く利用している フレームワーク（ライブラリ）は、実は「React」です。
個人的にはある程度の規模のUIを作るには、Reactが使いやすいと 考えています。しかし、出来る事、必要な勉強量、性能などは 大きな差はありません。
ハッキリ言ってどれか一つできれば十分です！

今回、Vue.jsを選んだ大きな理由は「初心者には一番入りやすい」事です！

「jQuery」のように、CDNを中心とした使いかたでも簡単にできますし、 いろいろな基本的な機能が簡単な設定で利用できます。 あとは、シリコンバレースーパーウエアが提唱する最小限の勉強量で Webサービスを作るというコンセプトにあっているからです。
「HTML」「CSS」「JavaScript」がわかれば後は最小限の勉強で 使えるのは大きな魅力です。「HTML」の拡張部分「v-tag」を ある程度理解できれば後はその繰り返しで利用できます。

効果的な利用方法は？

Vue.jsは、HTMLのファイルからCDNを読み込む方法でも利用できますが、 「npm」を利用した開発環境を利用した方がいろいろ恩恵を受けられます！
CDNでいちいち読み込まなくても、必要なパッケージを予め「npm」で 取り込んでしまえば、手軽に他の人が開発した、良く使う機能を 簡単に自分のWebサービスに取り込んで利用できます。
あとは、ページごとではなく、Webサービス全体をまとめて作れるのは 大きな魅力です。

Webサービスで大切なのは「完結」したサービスです

ページ単位ではなく、サービス全体を考えてUIを作れるのは とても大きな魅力です。サービス全体で使いやすいWebサービスが 簡単に作れます！

注意する事は？

一番のポイントは、UIとデータ処理を出来るだけ分けて考える事です。
Vue.jsはあくまでUIを作る道具で、データ処理は「裏方」です。 この２つをごっちゃにしてしまうと、折角のVue.jsの魅力が半減してしまいます。

部品化を進める大きなポイントは、使うデーターに依存させない事です

データ処理に依存する部分が多いと、毎回その部分を書き換える必要があります。 そうなると、折角の部品化の効果は半減してしまいます。
ポイントは、データ処理をできるだけUIから分離する事です。
今回は利用しませんでしたが「VUEX」など、データを一元管理するための プラグインなどは上手く使うとこのUIとデータ処理の分離に大きく役立てる 事ができます。

効果の最大化の方法

Vue.jsを使って効率化を最大化する方法とは何でしょうか？
このブログのような記事はインターネットには沢山あります。 最初に書いたように良く使われるフレームワークに大差はありません！
好みや、考え方によってある人が「良い」という物が必ずしも あなたに良いかは大きな疑問です。
一番の方法は、あなたが実際に使ってみて決めるのが一番！ という事です。人の話はあくまで人の話です。 実際に自分で体験する事が一番です。 シリコンバレースーパーウエアでは、あなたが「実際にやる」事を 中心にサポートをしています。 具体的な題材を提案したり、実際に使うフレームワークも提案する というのも「実践」をサポートする事に主眼を置いているからです。 興味のある方は是非、お問合せしてください！ あなたに合った「実践」を提案します！
シリコンバレースーパーウエアでは、シンプルなWebサービスの作り方だけではなく、 より複雑なWebサービスをテーマにした講座も同時に提供しています。 さらに、作ったWebサービスを利用したビジネスの展開まで考えたWebサービスの 作り方がわかるようになります。

興味のある方は今すぐお問合せください！



またよろしければ、ニュースレターの登録をお願いします！大体週一回お届けしています。ブログよりは一歩踏み込んだもっと濃い内容を発信しています。


Copyright(c) 2020 by Silicon Valley Super Ware, all rights reserved.

コメント

コメントを投稿

このブログの人気の投稿

ユーザーインターフェースの設計

イメージ
ホーム ブログ Firebase情報 ユーザーインターフェースの設計 2022年10月12日 ユーザーインターフェースの設計 前回は、入力フォームを変更して四則演算をできるようにしました。利用しているフォームは数式の穴埋め形式になっています。計算をする場合、一般的な電卓のようなインターフェースの方が一般の方には使いやすい場合が多いと言えます。今回は、ユーザーインターフェースを変更して一般的な電卓のようにする方法について考えてみました。 HTML でデザイン これまでの、ユーザーインターフェースは、数式の穴埋め形式のフォームでした。 今回は、一般的な電卓のようなユーザーインターフェースを実現します。 この記事では、プログラムの部分は取り敢えず別にして、まずはユーザーインターフェースを作成することにします。 Web アプリの場合、ユーザーインターフェースは基本的に HTML で記述します。 今回の電卓形式のユーザーインターフェースは、電卓の数字を表示する部分（ディスプレイ部分）と数字や演算子を入力する部分（ボタン部分）に分けて考えることができます。 HTML では、「input」のタグでディスプレイ部分を、「button」のタグでボタン部分を記述できます。 <!DOCTYPE html> <html> <head> <title>Calculator</title> </head> <body> <div class="calc"> <div> <input class="display" type="text" /> </div> <div class="keypad"> <div> <button class="clea
続きを読む

足し算以外もできるようにする

イメージ
ホーム ブログ Firebase情報 足し算以外もできるようにする 2022年9月29日 足し算以外もできるようにする 穴埋め形式の数式のフォームを使って足し算をするプログラムを紹介しましたが、同じ要領で、引き算、掛け算、割り算もサポートできるとさらに便利です。この記事では、足し算のプログラムを拡張して、整数の子息演算をできるようにした例を紹介します。 演算子を選べるように変更する 足し算のアプリでは、計算できるのは足し算だけだったので、フォームには「＋」を固定で表示していました。 この部分に変更を加えて、必要な演算子を選択できるようにすれば、引き算、掛け算、割り算もサポートできるようにできます。 これには、HTML の記述を変更してフォームを変更する必要があります。 <label>+</label> を以下のように変更します。 <select onchange="operatorChanged(event)"> <option>+</option> <option>-</option> <option>*</option> <option>/</option> </select> HTML の「select」タグを使って、選択肢は、「option」タグで記述するだけです。 演算子の変更を反映する プログラム側でやることは三つです。 初期状態の演算子を設定する　（最初にフォーム上で表示されている演算子をセットする） 演算子の変更を検出して、現在選択されている選択肢を更新する 「Calcullate」ボタンがクリックされたら必要な処理を呼び出す 現在どの演算子が選択されているかを知る必要があります。実装方法は幾つかありますが、今回は選択が変更される度に現在選択されている演算子を更新する方法を採用した例を紹介します。 これには、現在選択されている演算子を保存する変数「operator」を用意して管理します。
続きを読む

改良版足し算プログラム

イメージ
ホーム ブログ Firebase情報 改良版足し算プログラム 2022年9月15日 改良版足し算プログラム 前回は、入力データのチェックを工夫することで、データを処理する前に想定外のデータの入力を制限するユーザーインターフェースの設計について紹介しました。この記事では、そのコンセプトを使って、実際に足し算をするプログラムにしてみました。今回のポイントは、ユーザーインターフェースとデータ処理を分けるという点に注目してみました。プログラムの設計の際には、この二つの境界をきちんと設定する事が大切です。 データの処理は？ このプログラムは、入力された二つの整数を足して結果を表示するというシンプルなプログラムです。 このプログラムのデータ処理部分は、実は二つの整数の足し算をするだけです。 つまり、プログラムのデータ処理部分は以下の関数「add(a, b)」だけです。 function add(a, b) { return a + b; } 処理自体は、二つの整数「a」と「b」を受け取って、この二つの整数を足し算した結果を返すというシンプルなものです。 残りのプログラムは？ このプログラムのデータ処理部分は、至ってシンプルです。 では、残りのプログラムは何かというと、これがユーザーインターフェースになります。 <!DOCTYPE html> <html> <head> <title>Add Program</title> </head> <body> <div> <input id="opeland0" type="text" placeholder="Please input integer" /> <label>+</label> <input id="opeland1" type="text&qu
続きを読む