ジャンボモナカ

34歳のハゲデブがHTML5ハイブリッドアプリ開発プラットフォームmonacaを始めました。

monacaではOnsen UIをベースにソースを組むか？angularをベースにソースを組むか？

angularjs angular onsenui onsen ui monaca JavaScript cordova

monacaでの開発で、Onsen UIとangularを使ってフロントを構築する方法を調査しているのですが、AngularJS 1.x - Onsen UIを読みながらソースを組んでみると、だいたい、下のような感じになっている。

<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.7.0/css/onsenui.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.7.0/css/onsen-css-components.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.7.0/js/onsenui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.7.0/js/angular-onsenui.min.js"></script>
<body>
<div ng-controller="ViewPageController">
  <button ng-click="alert()">click me!</button>
</div>
<script>
var module = angular.module('mainApp',['onsen']);
module.controller('ViewPageController', ['$scope',function($scope) {
  $scope.alert = function(){
    alert('hello angular');
  };
}]);
</script>
</body>
</html>

一方で、bootsrapメソッドを使って下のように実装することもできる。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.7.0/css/onsenui.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.7.0/css/onsen-css-components.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.7.0/js/onsenui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.7.0/js/angular-onsenui.min.js"></script>
<body>
<div ng-controller="ViewPageController">
  <button ng-click="alert()">click me!</button>
</div>
<script>
var module = ons.bootstrap();
module.controller('ViewPageController', function($scope) {
  $scope.alert = function(){
    alert('hello angular');
  }
});
</script>
</body>
</html>

どちらも実行結果は同じなんだけど、angularをベースに実装するか、Onsen UIをベースに実装するかの違いなのだが、果たして、どちらがいいのだろうか？

超個人的な意見を言わせてもらうと、angularの方が汎用性が高く他のプロジェクトでも使えるので、angularベースに実装して、その上で足りない部分をOnsen UIで組み立てた方がいいのではないだろうか？