フロントエンド、ハイブリッドアプリの技術メモ

フロントエンド、スマホアプリの用語や技術トレンドがさっぱりわからないので、自分メモに

目次

  1. SPAとは
  2. MVCフレームワークとは
  3. node.jsとは
  4. AngularJSとは
  5. Jqueryとは
  6. jQueryとAngulerJSの違い
  7. altJSとは
  8. ハイブリッドアプリとは
  9. cordovaとは

SPA(Single Page Application)

  • Webアプリケーションのアーキテクチャ

  • 単一ページによるWebアプリケーション

  • ユーザがアプリケーションを使っている間、Webページ全体をロードすることがなく、レスポンスが高速でUI/UXに優れているという利点を持っています。

  • HTML全体の書き換えは行わず、変更が必要な部分だけをJavaScriptで動的に書き換えていくことにより、反応がよくユーザー体験にすぐれたWebアプリケーションを実現できる

  • 従来のServer-Client形のアーキテクチャでは、画面を遷移するたびにサーバにリクエストし、返却された HTML を描画するという処理を行っていましたが、SPAアーキテクチャでは、初回通信時にHTML ファイル、CSS ファイルJavaScript ファイルといった静的ファイルを取得し、初期画面を表示します。初期画面が表示された後に、Ajax によって、非同期に API リクエストし、レスポンスが返ってき次第、結果を反映するために DOM を書き換えるという処理を行っています。また、API のレスポンス結果は、ブラウザにキャッシュとして保持しておき、変更がない場合は、できるだけ再利用しています。

  • ページはハッシュの変更や DOM の操作によって切り替わる

  • サーバとの通信は Ajax や WebSocket などで行う

  • DOMとはDocument Object Modelの略でHTMLを構成する要素をコンピュータプログラムで参照したり操作したりするための取り決め(API)の一つ。HTMLで記述されたWebページの構成要素(見出し、段落、領域、画像、リンクなど)と、それらの配置や見栄えなどを定めた属性情報などを参照、制御する手法を定めている。 Webブラウザなどに実装されており、ページ上にJavaScriptなどで記述されたスクリプトからページ内の各要素を読み取ったり、内容や設定の変更、要素の追加や削除などを行う標準的な手段として用いられる。HTML文書をDOMで表したデータは、文書の最上位の要素を頂点として、各要素が包含関係に従って枝分かれしていく木構造(ツリー構造)となっており、これを「DOMツリー」(DOM tree)と呼ぶ。DOMではHTMLをノードと呼ばれるものの階層的な構造として識別する。

  • RIA(Rich Internet Application)とは、柔軟でリッチなUIをもったWevアプリ。代表的なものでフラッシュ、Javaアプレットなど使ったWebアプリ。衰退した。

クライアントサイド用のJavaScriptMVCフレームワーク

  • model-View-controllerモデルをアプリを作るフレームワーク
  • これまでは、サーバで動くMVCモデルのアプリ作成した。今はクライアントサイドで動くMVCモデルのアプリを作成するのがはやり。つまりSPA
  • 代表的なMVC
    • AngulraJS
    • Knocout.js
    • Sencha touch

AngularJS

jQuery

  • DOM操作ライブラリ
  • JavaScriptの(DOM周りの)拡張ライブラリ
  • 基本的にjQueryはDOM要素の操作・処理に適したツールです。

jQueryとAngularJSの違い

jQuery: JavaScriptの(DOM周りの)拡張ライブラリ

AngularJS: ブラウザ用MVCフレームワーク+継承機能拡張

ライブラリは部分コンテキストにおける機能や処理に着目し、再利用を目指した部品であり、 フレームワークは全体コンテキストにおける機能や構造に着目し、再利用を目指した部品です。

node.js

  • サーバーサイドのJavaScript
  • 非同期(I/Oの処理結果を待たず処理を進める)
  • Node.jsは、フレームワークではありません。ライブラリでもありません。
  • JavaScript アプリケーションのプラットフォーム
  • Node.jsでは、Webサーバとアプリケーションが同じ PHPのWebサイトで無理やり例えると、Apache + mod_php + Webアプリ です。なので、Node.js の Hello Worldのサンプルは、HTTPを受付け、200とヘッダーと内容を返す、というのが多い
  • リアルタイムなアプリケーションにあう
    • SPA(Single Page Application)にあう
    • WebSoketを利用するアプリにあう

altJS

JavaScriptというのはなかなか軟弱というか、良い意味で言うと自由度が高い。 言語仕様をよーく理解していないとバグを出しやすいし、使いにくかったりするワケです。 そういう部分をaltJSは賄ってくれます。

これは、JavaScriptで苦労した経験のある人しか分からない事かもしれません。 特にクラスや型のサポートという点では JavaScriptには弱さがある印象です(動的型付けに慣れてないだけかもしれないですが)。

ハイブリッドアプリ

  • ハイブリッドアプリとは、ネイティブアプリの中にWebViewと呼ばれる簡易ブラウザのようなものを表示し、その中にHTMLを表示させるアプリのこと
  • Cookpadのアプリがよい例
  • HTML、CSSJavascriptなどwebの技術でアプリ開発が可能。avaやObjective-CといったAndoroid、ios用の開発言語を覚えなくてもいい
  • AndroidiOSBlackberryWindows Phone、Palm WebOS、Bada、Symbianのプラットフォームに対応
  • 、モバイル端末で動作するブラウザ(safari,chorme,webview)の違いは意識する必要あり

cordova

  • ハイブリッドアプリの開発が行えるフレームワーク
  • カメラやキャプチャなどのプラグインがあり各プラットホームに対応

  • cordovaとAngularJSの違いって何?

参考

HTML5ハイブリッドアプリ開発、最新動向はやわかり!

5カ月でAngularJSとTypeScriptでSPA

SPAがネイティブアプリをぶっ壊す:HTML5/Javascriptが変えるWebの未来

Node.js を5分で大雑把に理解する

SPAを構築するときに知っておいた方がいい7つの課題

【JavaScript】なんとか.jsのお話(Backbone.js、AngularJS、Node.js、altJS、Underscore.js、prototype.js....etc)