フレームワークでWebサービス開発の効率アップ！
Silicon Valley Super Ware
2020年4月27日
フレームワークを使って開発のスピードアップ！
フレームワークでWebサービス開発の効率アップ！
Webサービスを作るのに必要な技術は、何回か書いている様に、 「HTML」「CSS」「JavaScript」です。HTMLとCSSは主に画面のデザイン、JavaScriptは実際の処理です。
自分自身でほぼ全部の機能を作る場合は、JavaScriptで行う処理が 開発の中心になる事が多くなります。一方で既存のサービスを取り込んだ Webサービスを作る場合は、画面のデザインの作業の方が多くなるのが 普通です。
実際に、画面デザインの比率は少なくありません！
そう考えると、画面デザイン（＝UI）の効率化はWebサービスでのビジネスにはとても 重要になってきます。お問合せフォームの制作
Webサービスの実施例として、「お問合せフォーム」のサービスを取り上げています。実際の音あい合わせの為のフォームはシンプルなので、画面のデザインも簡単で 初めてでも殆ど問題になりません。
一方で管理ページの方は初めてだと結構戸惑う内容です。
結構差が出る管理ページのデザイン
今回のお問合せフォームの目的は、2つです。一つはWebサービス開発の体験。 もう一つが、Firebaseの体験です。対象としているのが、これからWebサービスでビジネスをしようと考えている方です。
最初のサンプルは「JavaScript」だけで書いてみました。
そのうえで、実際に制作される人には「フレームワーク（ライブラリ）」を利用して 書いて頂こうという趣旨で無料の特典講座を実施しています。そこで、殆どの方が 質問したのは「どのフレームワークがいいのか？」です。選択肢として
- jQuery
- React
- Vue.js
- Angular
ということで、サンプルコードをAngular以外のフレームワークで書いてみました。 Angular以外の理由は、Angularは例題程度しか使った事がないので今回は外した というのが理由で、Angularではダメという事ではありません。
簡単なコメントを書くと
jQueryとJavaScriptのみの差は余りありません。
jQueryの方が完結に書くことはできますが、やる事はほぼ同じで JavaSctipyに埋め込む形になる、動的にHTMLを作る部分は どうしても読みにくくなります。Reactは最近一番利用しているフレームワーク（ライブラリ）なので 個人的には短時間で作る事ができました。JSXにも慣れてきたので 私の場合は当面はReact中心の開発になるかと思います。
これから、「ゼロ」から勉強するなら「Vue.js」がいいかもというのが乾燥です！
理由は、カバーできる範囲がReactよりは広いのではないかと思うからです。- CDN（HTMLのヘッダーに書くだけ）で利用できる
- 規模の大きなWebサービスにも対応できる
Vue.jsはReactとjQueryの両方の良いところを持っている！
jQueryの感覚で、HTMLファイルに簡単なサービスなら埋め込む形でも作れます。規模の大きなWebサービスはReactのように、NPM上の開発環境でも開発できます。 この方法の最大の魅力は、NPMのモジュールを使うことができるというのは便利です。 皆が使うような機能の多くは、既にモジュールとして誰かが作ったものを組み込んで 最低限のコードでWebサービスが作れます。
良いと思う理由は小規模から大規模までカバーする！
NPMを使った開発環境は使い慣れると、HTMLファイルをいじりながら開発するより はるかに効率が上がります。Vue.jsでも慣れてしまえば、CLIやGUI環境での開発 をした方が、小規模でも効率的に作れます。そこで、現在受講中の方には一度は「Vue.js」を試そう！
という事でやって頂いています。HTMLとJavaScriptが分かれば、数日あれば 何とかなるようです。２つの効率アップが可能に！
結論から言うと、初めてゼロからフレームワークを勉強する方には 「Vue.js」を勧めるという事になりました。ただし、Reactがダメというわけではなく既にReactを使っている方や、 Reactの方が好きという方はReactで良いと思います。私自身も当面は Reactを中心に使っていく方針です。
画面デザインのHTML(JSX)の記述が見やすくなる
React/Vue.jsも基本的にHTMLベースの記述で画面のデザインができるのが 魅力です。さらに、画面の書き換えも効率よくやってくれるので、 書き換え時の性能も良くなります。もう一つの大きな効率アップは豊富な「モジュールを使える」ことがあります。
よく使う共通の機能は豊富なモジュールの利用！
調べると、かなりの分野で既に誰かが開発したモジュールがあるので 自分で書かなくても多くの機能を使うことができます。これはかなりの効率アップです。既存のサービスの組み込みにも有利！
最初に書いた通り、既存のサービスを組み込んであなたのWebサービスを 作る場合、機能の実現よりはUIの開発のウエイトが高くなります。 そうした場合、UIを楽に作れるフレームワークはさらに大きな味方になります。時間のないフリーランスには大きな味方になります！
JavaScript以外のプログラミング言語を別に勉強するより、 言語はJavaScriptに絞って、フレームワーク（ライブラリ）の 勉強に時間を割いた方が開発の効率と品質を大きくアップさせる 事ができます。今回作成した、管理ページのソースコードを差し上げます！
4月中にシリコンバレースーパーウエアのニュースレターに登録された方には、 今回作成した、お問合せフォームの管理ページのソースコードを差し上げています。 フレームワークの比較にお役に立ててください！シリコンバレースーパーウエアでは、Webサービスの作り方だけではなく、作ったWebサービスを利用した ビジネスの展開までを身に着ける事が可能です。
興味のある方は今すぐお問合せください！
またよろしければ、ニュースレターの登録をお願いします！大体週一回お届けしています。ブログよりは一歩踏み込んだもっと濃い内容を発信しています。
コメント
コメントを投稿