Spring BootでAngularJSと連携したいけど、とりあえずAngularJSを配置するとこまで

2017年9月17日  追記

AngularJSを始める際に導入するAngular CLI(「@angular/cli」)をインストールするときは、「yarn」というものを使ったほうが良いのかもしれません。

Angular入門 | ぺーぺーSEのテックブログ

君の名は・・YARN! - Qiita

  

JavaScriptフレームワーク、むちゃくちゃ種類がいっぱいですね。有名どころを並べてみました。

  • AngularJS
  • React.js
  • Vue.js
  • Ember.js
  • Riot.js
  • Backbone.js
  • Knockout.js
  • Polaris.js
  • Feathers

 

JSフレームワークトレンド調査してみた 2017 | MONSTER DIVE【モンスターダイブ】

【2017年版】JavaScriptのフレームワーク比較とニーズの高まり|フリエン

知っておきたい!人気JavaScriptフレームワーク10選

 

AngularJSとは?

今回は、AngularJSにチャレンジしてみようと思います。

ご存知、Googleが生み出したJavaScriptフレームワークで、最新バーションは、2017年3月23日に「Angular 4.0.0」がリリースされたようです。

AngularJSの機能として、有名なものを取り上げると

  • テンプレートエンジン
  • 双方向データバインディング(モデル/ビュー間での値の変更をお互いに反映させる)
  • ルーティング(URLに応じてテンプレートを切り替える)
  • フィルター(ビューに出力するデータを加工する)
  • 非同期通信のサポート
  • セキィリティ対策

といったように、かなり多機能です。これ以外にもいろんな機能があるようです。AngularJSはフルスタックで、「One Framework」という謳い文句にもあるように、他のライブラリを使わなくても、AngularJSを使えばすべてやりたいことはできるよっていうようなニュアンスらしいです。

また、AngularJSはTypeScriptベースで実装されているほかにも、モダンなWeb技術を積極的に取り入れているようです。

技術 概要
SystemJS モジュールを動的にロードするためのライブラリ
RxJS JavaScriptで非同期処理を実装するためのライブラリ
Zone.js 非同期処理のコンテキストを管理/操作するためのライブラリ

Angularの特徴とは? 開発環境を構築するには? - Build Insider 

TypeScript はマイクロソフトによって開発され、メンテナンスされているフリーオープンソースプログラミング言語である。TypeScriptはJavaScriptに対して、省略も可能な静的型付けとクラスベースオブジェクト指向を加えた厳密なスーパーセットとなっている。

TypeScriptはクライアントサイド、あるいはサーバサイド (Node.js) で実行されるJavaScriptアプリケーションの開発に利用できる。 

TypeScript - Wikipedia

 学習コストが高くなりますが、AngularJSを学習していけばモダンなWeb技術も勉強していけるってことですかね。

ちなみに、AngularJS 1系とAngularJS 2系でだいぶ仕様が変わったみたいですし、AngularJS 4系も出始めたみたいなのでかなりイバラな道っぽい気はしますが....。

 

 

TypeScriptとは?

ちらっと、出てきたTypeScriptですが、TypeScriptを使うと、JavaScriptの標準であるEcmaScript仕様書の機能を先取りできます。

これは、EcmaScript(2017年9月10日 現在、ECMAScript 2017[ECMAScript 8]まで出ていますが)の仕様書が策定はされていても、実際にJavaScriptではまだそういった記述の仕方に対応できていないようです。

2017-07-03のJS: ECMAScript 2017、Prettier 1.5.0、UXのパフォーマンスメトリクス - JSer.info

TypeScriptは、EcmaScriptの仕様書に則った記述ができるため、TypeScriptで記述したコードをコンパイルしてJavaScriptコードに変換することで、いち早く新しい機能を盛り込めるようです。

TypeScriptの歴史

 TypeScriptはマイクロソフトで2年間かけて内部開発された後、2012年10月に初めて外部に公開された (version 0.8)

発表から間もなく、ミゲル・デ・イカザは、この言語そのものについては称賛しつつも、Microsoft Visual Studio以外では成熟した統合開発環境 (IDE) でのサポートがなく、LinuxおよびOS Xでは利用できないことには批判的であった。

2013年時点では、他のIDEでもサポートされており、特にEclipseでは、Palantir Technologies社が貢献したプラグインによりサポートされている。EmacsVimSublime などの多くのテキストエディタもTypeScriptをサポートしている。Atomプラグインも利用可能である。

2013年にリリースされたTypeScript 0.9では、総称型のサポートを追加した。TypeScript 1.0は Build 2014会合でリリースされた。Visual Studio 2013 Update 2ではTypeScriptが組み込まれている。

2014年7月、開発チームは新しいTypeScriptコンパイラを発表し、パフォーマンスは5倍増加したと公称している。同時に、当初はCodePlex上で公開されていたソースコードGitHubに移動された。

2016年9月22日、TypeScript 2.0がリリースされ、幾つかの機能が盛り込まれた。変数にnull値が代入されるのを防ぐオプション機能などが含まれる。

TypeScript - Wikipedia

 

TypeScriptでできること

TypeScriptはJavaScript (ECMAScript 5) に次のような言語機能の拡張を加えたものである。

ECMAScript 6由来

ECMAScript 7由来

  • デコレーター
  • Async/Await

独自

構文的には、静的型付けやクラス、継承、インタフェースのようなオブジェクト指向名前空間などの機能を追加する、ECMA-262 言語標準のマイクロソフトによる実装である JScript.NET と TypeScript はよく似ている。

 

TypeScript - Wikipedia

他にもいろいろできるようです。

 

AngularJS 2系を導入するために必要なもの

AngularJS 2系では、「angular-cli」 というコマンドラインツールが必須になるみたいです。もう、zipファイルをダウンロードして展開するような感じでは導入できなくなってるみたいですね。

そして、「angular-cli」をインストールするには、「Node.js」と「npm」コマンドが必要です。

⇩  Node.jsについては下記サイトへ

初心者向け!3分で理解するNode.jsとは何か?

【入門編】Node.JSとは|4つの特徴とおすすめ教材6選|フリエン

初心者向け | サーバーサイドJavaScript - Node.jsをわかりやすく理解する - UTALI

 

ということで、まずは、Node.jsをインストールします。ですが、Node.jsは開発のペースが早いため仕様変更などで互換性の問題が起こるそうです。

そこで、Node.jsの利用には『バージョン管理システム』を経由した導入が推奨されているようです。

Node.jsのインストール (Windows編) | WEB改善事例集(GMOソリューションパートナー株式会社)

 

⇩  Windowsだと、nodist

Node.jsのインストール (Windows編) | WEB改善事例集(GMOソリューションパートナー株式会社)

⇩  Macだと、nodebrew

[Mac, Homebrew] Node.jsのバージョン管理ツール、nodebrew導入手順 - Qiita

⇩  Linuxだと、nvm

LinuxでNode.jsのバージョンを管理する | Ystk Log 【ヨシタカログ】

 

と、てんでバラバラ ですな....。

とりあえず、nodistから導入していきます。

nodistの導入

https://github.com/marcelklehr/nodist/releases にアクセスし、「NodistSetup-v0.8.8exe」をクリック。

f:id:ts0818:20170910151109j:plain

ダウンロードされたexeファイルをダブルクリック。「Next >」をクリック。

f:id:ts0818:20170910151748j:plain

「I Agree」をクリック。

f:id:ts0818:20170910151853j:plain

インストール場所。自分はデフォルトのままにしました。「Install」をクリック。

f:id:ts0818:20170910151913j:plain

インストールが始まります。

f:id:ts0818:20170910152036j:plain

「Finish」をクリック。

f:id:ts0818:20170910152104j:plain

コマンドプロンプトなどを起動して、

nodist -V

f:id:ts0818:20170910152140j:plain

バージョンが表示されれば、インストールされています。

 

Node.jsの導入

続いて、nodistを使ってNode.jsをインストールしていきますが、まずは公式サイトで推奨版のバージョンを確認します。

https://nodejs.org/ja/ にアクセス。

f:id:ts0818:20170910152535j:plain

「v6.11.3 LTS」となっているので、コマンドプロンプトなどで、

nodist + v6.11.3

f:id:ts0818:20170910153359j:plain

インストールしたNode.jsを指定(Node.jsが複数ある場合の切り替え)

nodist v6.11.3

f:id:ts0818:20170910153411j:plain

インストールされたNode.jsのバージョンを表示。

node -v

f:id:ts0818:20170910153629j:plain

どうやら、無事、Node.jsはインストールできたようです。 

Node.jsがインストールされると、デフォルトでnpmもインストールされます。

npm -v

f:id:ts0818:20170910154226j:plain

 

angular-cliのインストール

「angular-cli」をインストールすれば、AngularJSにたどり着けます、がんばりましょう。では、 「npm」で「angular-cli」をインストールしていきます。

npm -g install angular-cli

f:id:ts0818:20170910154849j:plain

f:id:ts0818:20170910155002j:plain

なんか、「警告」が出てるっぽい...。

unmet peer dependencies? · Issue #4721 · angular/angular-cli · GitHub

Angular CLIをアップデートしたメモ〜angular-cliから@angular/cliへ - Goalist Developers Blog

⇧  によると、 「angular-cli」じゃなく、「@angular/cli」でインストールして、ということみたい、情報の変化の速さについていけない...(涙)。

「@angular/cli」と「@angular/cli」で作ったプロジェクトは

  • Node 6.9.0
  • npm 3.0

以上が必須みたいです。

というわけで、いま入れてしまった「angular-cli」をアンインストールして、「@angular/cli」をインストールしていきます。

まずは、「angular-cli」をアンインストール

npm -g uninstall angular-cli

f:id:ts0818:20170910161028j:plain

f:id:ts0818:20170910161120j:plain

キャッシュとか無くす感じですかね。

npm cache clean

f:id:ts0818:20170910161147j:plain

そしたら、グローバルで「@angular/cli」をインストールする

npm install -g @angular/cli@latest

f:id:ts0818:20170910161426j:plain

f:id:ts0818:20170910161453j:plain

 で、見事に...「警告」出てるし...。さっきとはちょっと違ったエラーになったけど。

I am facing warning · Issue #6467 · angular/angular-cli · GitHub

⇧  によると、この「警告」は出ていても気にしなくて良いらしい...なんだかな~。

ローカルのnode_modules(ローカルに落としたパッケージが入ってるフォルダ)を削除し、ローカルで@angular/cliを利用パッケージに登録する

rm -rf node_modules dist
npm install --save-dev @angular/cli@latest

f:id:ts0818:20170910164245j:plain

で、ローカルの利用パッケージを新しく入れ直すようです。

npm install

f:id:ts0818:20170910164911j:plain

見事に、「警告」の雨あられ。 

JavaScript - "npm install"実行時にエラーが出ます(25181)|teratail

⇧  によりますと、「package.json」ファイルをあらかじめ作っていないと、「npm WARN enoent ENOENT: no such file or directory, open 'C:¥Users¥ユーザ名¥package.json'」という「警告」が出るみたいです。

 

あと、「

The node binary used for scripts is C:\Program
Files (x86)\Nodist\bin\node.exe but npm is using C:\Program Files
(x86)\Nodist\v-x64\6.11.3\node.exe itself. Use the `--scripts-prep
end-node-path` option to include the path for the node binary npm was executed with

」って部分の警告は、

npm runコマンドを実行したら警告が出るようになった - Qiita

npm config set scripts-prepend-node-path true

で消えました。

 

そもそも、「npm install」を「-g」オプションなしで実行すると、カレントディレクトリ(ここだと『C:¥Users¥Toshinobu』)でしか「npm install」でインストールされるモジュールが使えなくなるみたいなので、まったく意味ない気がする...。

GitHub - angular/angular-cli: CLI tool for Angular

⇧  プロジェクト先にいる状態で「npm install」してるってことかな?

 

【Angular2】npm installしてるパッケージの簡単な説明 – rdlabo.inc

⇧  こちらのサイトの説明では、プロジェクト先で「npm install」してるっぽいですし。

Angularの環境構築(Angular CLIで構築) - Qiita

⇧  こちらのサイトもどこのフォルダでやってるか分からんです。

f:id:ts0818:20170910185117j:plain

モジュールが大量にインストールされてはいますが....。

 

勉強メモ/npmの使い方(node.js=v0.11.16, npm=2.3.0, 2015-03時点) - Qiita

 ⇧  こちらのサイト様を参考に、やはりプロジェクト先で「npm install」することにします。

Angular CLIをアップデートしたメモ〜angular-cliから@angular/cliへ - Goalist Developers Blog

 ⇧  こちらのサイト様も、やはりプロジェクト先で「npm install」してるようです。

ということで、「node_modules」フォルダを削除します。

f:id:ts0818:20170910190349j:plain

f:id:ts0818:20170910190653j:plain 

Windowsでのnode.jsとnpmのインストールと基本的なセットアップ | ぱーくん plus idea

 

プロジェクトに移動

Eclipseを起動し、前回作成した、Spring Bootのプロジェクトの中の「src/main/resources」>「static」フォルダを選択した状態で右クリックし、「新規(W)」>「フォルダー」を選択。

f:id:ts0818:20170910192140j:plain

「フォルダー名(N):」を入力し、「完了(F)」。

f:id:ts0818:20170910192355j:plain

作成したフォルダを選択した状態で、「Alt + Enter」を押すと「プロパティ」が開きます。

f:id:ts0818:20170910192509j:plain

「ロケーション(L):」のパスをコピーしときます。「OK」クリック。

f:id:ts0818:20170910192658j:plain

コマンドプロンプトに戻り、

cd C:¥workspace¥firstSpring¥src¥main¥resources¥static¥js

で、まずは「package.json」を作成します。

npm init

f:id:ts0818:20170910194506j:plain

 色々聞かれますが、すべて空Enterで問題ないようです。(たぶん、後から編集とかもできると思うので)

f:id:ts0818:20170910194615j:plain

そうすると、「package.json」ファイルができてます。

f:id:ts0818:20170910194800j:plain

それでは、コマンドプロンプトでプロジェクトに「 @angular/cli 」をインストール。

npm install --save-dev @angular/cli@latest

f:id:ts0818:20170910195405j:plain

f:id:ts0818:20170910195418j:plain

「node_modules」フォルダができ、その中にAngularJSを使うためのモジュールがいろいろ入りました。

f:id:ts0818:20170910195602j:plain

https://angular.io/guide/quickstart を見た感じ、

「npm install」をしなくても、「AngularJS」は使えると思いますが、

GitHub - angular/angular-cli: CLI tool for Angular で「npm install」してるので、一応「npm install」しておきます。

f:id:ts0818:20170910195857j:plain

 

 

AngularJSのプロジェクトを作成

ちょっと、プロジェクトを作成すべき場所が分からないのですが、「js」フォルダ内に作ってしまいます。

ng new my-app

はい、エラー。これは、「Angular CLI」がインストールされてるのと同じ階層のフォルダではAngularのプロジェクトは作れないということらしいです。ということで、

cd ../
ng new my-app

f:id:ts0818:20170910205352j:plain

f:id:ts0818:20170910205812j:plain

 作成できました。

f:id:ts0818:20170910210050j:plain

AngularJSの内蔵サーバー(開発用の簡易サーバーが入ってるみたい)を起動します。

cd my-app
ng serve --open

f:id:ts0818:20170910210341j:plain

http://localhost:4200」でAngularJSのテストページが表示されました。

f:id:ts0818:20170910210546j:plain

サーバーを止めるときは「Ctrl + C」で停止できます。「^Cバッチ ジョブを終了しますか?」と聞かれるので「Y」を入力し「Enter」。

f:id:ts0818:20170910213605j:plain

停止できました。

f:id:ts0818:20170910213735j:plain

 

【Angular】開発環境の構築(Angular 4対応) - STDIO

 

ちょっと、インストールされたのが、AngularJS2系なのかAngularJS4系なのか 判断付かないですが、とりあえず、配置には成功できました。

f:id:ts0818:20170910220731j:plain

「my-app」(AngularJSのプロジェクト)の中の「package.json」ファイルを見ると、

{
  "name": "my-app",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.2.4",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "core-js": "^2.4.1",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.4.1",
    "@angular/compiler-cli": "^4.2.4",
    "@angular/language-service": "^4.2.4",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }
}

となっていて、「"@angular/core": "^4.2.4"」とあるので、AngularJS 4系ってことですかね?

 

Javaとの連携ができるかやっていきたいですね。