\u6982\u8981<\/h3>\n\n\n\n- Model\u306etext\u30d5\u30a3\u30fc\u30eb\u30c9\u306e\u5024\u3092template\u306b\u57cb\u3081\u8fbc\u3093\u3067\u753b\u9762\u306b\u8868\u793a\u3055\u305b\u308b\u3002<\/li>
- \u30b0\u30e9\u30d5\u3092\u753b\u9762\u306b\u8868\u793a\u3055\u305b\u308b\u3002<\/li><\/ul>\n\n\n\n
\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u69cb\u6210<\/h3>\n\n\n\n![\"\"](\"https:\/\/ito-u-oti.com\/wp-content\/uploads\/2019\/06\/017_backboneJS1.png\")
<\/figure>\n\n\n\nrequireJS+backboneJS+highchartsJS<\/h2>\n\n\n\nindex.html<\/h3>\n\n\n\n<!DOCTYPE html>\n<html lang="ja">\n <head>\n <meta charset="utf-8">\n <title><\/title>\n <script src="https:\/\/requirejs.org\/docs\/release\/2.3.6\/minified\/require.js"><\/script>\n <script src=".\/js\/config\/config.js"><\/script>\n <script src=".\/js\/views\/HelloWorldView.js"><\/script>\n <script type="text\/template" id="hello-template">\n <h2><%= text %><\/h2>\n <\/script>\n <\/head>\n <body>\n <div class="hoge"><\/div>\n <div id="container"><\/div>\n <\/body>\n<\/html>\n<\/pre><\/div>\n\n\nhoge\u30af\u30e9\u30b9\u3068containerID\u304c\u4ed8\u4e0e\u3055\u308c\u3066\u3044\u308bdev\u30bf\u30b0\u3092\u305d\u308c\u305e\u308c\u4f5c\u6210\u3057\u3066\u304a\u304d\u307e\u3059\u3002
hoge\u306bModel\u306e\u5185\u5bb9\u304c\u5165\u308a\u307e\u3059\u3002
container\u306b\u30b0\u30e9\u30d5\u304c\u63cf\u753b\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n
config.js<\/h3>\n\n\n\nrequire.config({\n packages: [{\n name: 'highcharts',\n main: 'highcharts'\n }],\n baseUrl: "js",\n paths: {\n "backbone" : "lib\/backbone",\n "jquery" : "lib\/jquery",\n "underscore" : "lib\/underscore",\n \/\/'highcharts': 'https:\/\/code.highcharts.com'\n "highcharts": "lib"\n },\n shim: {\n 'backbone' : {\n deps: ['underscore', 'jquery'],\n exports: 'Backbone'\n }\n }\n});\n<\/pre><\/div>\n\n\nbackboneJS\u3068highchartsJS\u306e\u8aad\u307f\u8fbc\u307f\u8a2d\u5b9a\u3092\u884c\u306a\u3063\u3066\u3044\u307e\u3059\u3002
highcharts\u306epaths\u8a2d\u5b9a\u3067URL\u306e\u65b9\u304c\u30b3\u30e1\u30f3\u30c8\u30a2\u30a6\u30c8\u3055\u308c\u3066\u3044\u307e\u3059\u304c\u3001\u30a4\u30f3\u30bf\u30fc\u30cd\u30c3\u30c8\u4e0a\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u4f7f\u7528\u3057\u305f\u3044\u5834\u5408\u306fURL\u6307\u5b9a\u3067\u3082\u884c\u3051\u308b\u3088\u3068\u3044\u3046\u610f\u5473\u3067\u4e00\u5fdc\u8a18\u8f09\u3057\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n\n\n\n
HelloWorldModel.js<\/h3>\n\n\n\ndefine(['backbone'], function(backbone) {\n\n var HelloWorldModel = backbone.Model.extend({\n defaults: {\n "text":"Hello World Backbone!!"\n }\n });\n\n return HelloWorldModel;\n});\n<\/pre><\/div>\n\n\ntext\u30d5\u30a3\u30fc\u30eb\u30c9\u306b\u6587\u5b57\u5217\u304c\u683c\u7d0d\u3055\u308c\u3066\u3044\u307e\u3059\u3002
\u4eca\u307e\u3067\u306e\u8a18\u4e8b\u306e\u4e2d\u3067\u4f5c\u3063\u3066\u304d\u305fModel\u3068\u7279\u306b\u5909\u308f\u308a\u304c\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n\n\n\n
HelloWorldView.js<\/h3>\n\n\n\nrequire(['backbone', 'model\/HelloWorldModel', 'highcharts'], function(backbone, helloWorldModel, hi) {\n\n var model = new helloWorldModel();\n\n var HelloWorldView = backbone.View.extend({\n el: $('.hoge'),\n initialize: function() {\n this.render();\n },\n render: function() {\n this.graph();\n var text = model.get("text");\n $(this.el).html(_.template($('#hello-template').text())({ "text": text}));\n },\n graph: function() {\n hi.chart('container', {\n chart: {\n renderTo: 'chart',\n type: 'bar'\n },\n title: {\n text: 'Hello Highcharts'\n },\n xAxis: {\n categories: ['Hello', 'World']\n },\n yAxis: {\n title: 'Value'\n },\n series: [{\n name: 'Highcharts Intro',\n \t data: [1, 2]\n }]\n });\n }\n });\n new HelloWorldView();\n});\n<\/pre><\/div>\n\n\nbackbone\u3068Model\u3068highcharts\u3092\u8aad\u307f\u8fbc\u3093\u3067\u3044\u307e\u3059\u3002
\u3061\u3087\u3063\u3068\u8a18\u8ff0\u304c\u8907\u96d1\u306b\u306a\u3063\u3066\u304d\u305f\u306e\u3067\u8aac\u660e\u3059\u308b\u3068\u3001<\/p>\n\n\n\n
- initialize\u3067render\u3092\u547c\u3073\u51fa\u3059\u3002<\/li>
- render\u306f\u6700\u521d\u306bgraph\u3092\u547c\u3073\u51fa\u3057\u3001\u30b0\u30e9\u30d5\u3092container\u306b\u63cf\u753b\u3059\u308b<\/li>
- model\u304b\u3089text\u30d5\u30a3\u30fc\u30eb\u30c9\u3092\u53d6\u5f97\u3057\u3001template\u306b\u57cb\u3081\u8fbc\u3093\u3067hoge\u306b\u633f\u5165\u3059\u308b<\/li><\/ol>\n\n\n\n
\u3068\u3044\u3046\u6d41\u308c\u3067\u3059\u3002<\/p>\n\n\n\n
\u8868\u793a<\/h3>\n\n\n\n![\"\"](\"https:\/\/ito-u-oti.com\/wp-content\/uploads\/2019\/06\/017_1_backboneJS1.png\")
<\/figure>\n","protected":false},"excerpt":{"rendered":"\u4eca\u56de\u306fRequireJS\u3067backboneJS\u3068highchartsJS\u3092\u8aad\u307f\u8fbc\u3093\u3067\u4f7f\u7528\u3057\u3066\u307f\u307e\u3059\u3002 […]<\/p>\n","protected":false},"author":1,"featured_media":975,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[211],"tags":[220,225,224,213,221],"class_list":["post-979","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-backbonejs","tag-highchartsjs","tag-model","tag-requirejs","tag-view"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=\/wp\/v2\/posts\/979","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=979"}],"version-history":[{"count":3,"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=\/wp\/v2\/posts\/979\/revisions"}],"predecessor-version":[{"id":1011,"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=\/wp\/v2\/posts\/979\/revisions\/1011"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=\/wp\/v2\/media\/975"}],"wp:attachment":[{"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=979"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=979"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=979"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u69cb\u6210<\/h3>\n\n\n\n<\/figure>\n\n\n\nrequireJS+backboneJS+highchartsJS<\/h2>\n\n\n\nindex.html<\/h3>\n\n\n\n<!DOCTYPE html>\n<html lang="ja">\n <head>\n <meta charset="utf-8">\n <title><\/title>\n <script src="https:\/\/requirejs.org\/docs\/release\/2.3.6\/minified\/require.js"><\/script>\n <script src=".\/js\/config\/config.js"><\/script>\n <script src=".\/js\/views\/HelloWorldView.js"><\/script>\n <script type="text\/template" id="hello-template">\n <h2><%= text %><\/h2>\n <\/script>\n <\/head>\n <body>\n <div class="hoge"><\/div>\n <div id="container"><\/div>\n <\/body>\n<\/html>\n<\/pre><\/div>\n\n\nhoge\u30af\u30e9\u30b9\u3068containerID\u304c\u4ed8\u4e0e\u3055\u308c\u3066\u3044\u308bdev\u30bf\u30b0\u3092\u305d\u308c\u305e\u308c\u4f5c\u6210\u3057\u3066\u304a\u304d\u307e\u3059\u3002
hoge\u306bModel\u306e\u5185\u5bb9\u304c\u5165\u308a\u307e\u3059\u3002
container\u306b\u30b0\u30e9\u30d5\u304c\u63cf\u753b\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n
config.js<\/h3>\n\n\n\nrequire.config({\n packages: [{\n name: 'highcharts',\n main: 'highcharts'\n }],\n baseUrl: "js",\n paths: {\n "backbone" : "lib\/backbone",\n "jquery" : "lib\/jquery",\n "underscore" : "lib\/underscore",\n \/\/'highcharts': 'https:\/\/code.highcharts.com'\n "highcharts": "lib"\n },\n shim: {\n 'backbone' : {\n deps: ['underscore', 'jquery'],\n exports: 'Backbone'\n }\n }\n});\n<\/pre><\/div>\n\n\nbackboneJS\u3068highchartsJS\u306e\u8aad\u307f\u8fbc\u307f\u8a2d\u5b9a\u3092\u884c\u306a\u3063\u3066\u3044\u307e\u3059\u3002
highcharts\u306epaths\u8a2d\u5b9a\u3067URL\u306e\u65b9\u304c\u30b3\u30e1\u30f3\u30c8\u30a2\u30a6\u30c8\u3055\u308c\u3066\u3044\u307e\u3059\u304c\u3001\u30a4\u30f3\u30bf\u30fc\u30cd\u30c3\u30c8\u4e0a\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u4f7f\u7528\u3057\u305f\u3044\u5834\u5408\u306fURL\u6307\u5b9a\u3067\u3082\u884c\u3051\u308b\u3088\u3068\u3044\u3046\u610f\u5473\u3067\u4e00\u5fdc\u8a18\u8f09\u3057\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n\n\n\n
HelloWorldModel.js<\/h3>\n\n\n\ndefine(['backbone'], function(backbone) {\n\n var HelloWorldModel = backbone.Model.extend({\n defaults: {\n "text":"Hello World Backbone!!"\n }\n });\n\n return HelloWorldModel;\n});\n<\/pre><\/div>\n\n\ntext\u30d5\u30a3\u30fc\u30eb\u30c9\u306b\u6587\u5b57\u5217\u304c\u683c\u7d0d\u3055\u308c\u3066\u3044\u307e\u3059\u3002
\u4eca\u307e\u3067\u306e\u8a18\u4e8b\u306e\u4e2d\u3067\u4f5c\u3063\u3066\u304d\u305fModel\u3068\u7279\u306b\u5909\u308f\u308a\u304c\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n\n\n\n
HelloWorldView.js<\/h3>\n\n\n\nrequire(['backbone', 'model\/HelloWorldModel', 'highcharts'], function(backbone, helloWorldModel, hi) {\n\n var model = new helloWorldModel();\n\n var HelloWorldView = backbone.View.extend({\n el: $('.hoge'),\n initialize: function() {\n this.render();\n },\n render: function() {\n this.graph();\n var text = model.get("text");\n $(this.el).html(_.template($('#hello-template').text())({ "text": text}));\n },\n graph: function() {\n hi.chart('container', {\n chart: {\n renderTo: 'chart',\n type: 'bar'\n },\n title: {\n text: 'Hello Highcharts'\n },\n xAxis: {\n categories: ['Hello', 'World']\n },\n yAxis: {\n title: 'Value'\n },\n series: [{\n name: 'Highcharts Intro',\n \t data: [1, 2]\n }]\n });\n }\n });\n new HelloWorldView();\n});\n<\/pre><\/div>\n\n\nbackbone\u3068Model\u3068highcharts\u3092\u8aad\u307f\u8fbc\u3093\u3067\u3044\u307e\u3059\u3002
\u3061\u3087\u3063\u3068\u8a18\u8ff0\u304c\u8907\u96d1\u306b\u306a\u3063\u3066\u304d\u305f\u306e\u3067\u8aac\u660e\u3059\u308b\u3068\u3001<\/p>\n\n\n\n
- initialize\u3067render\u3092\u547c\u3073\u51fa\u3059\u3002<\/li>
- render\u306f\u6700\u521d\u306bgraph\u3092\u547c\u3073\u51fa\u3057\u3001\u30b0\u30e9\u30d5\u3092container\u306b\u63cf\u753b\u3059\u308b<\/li>
- model\u304b\u3089text\u30d5\u30a3\u30fc\u30eb\u30c9\u3092\u53d6\u5f97\u3057\u3001template\u306b\u57cb\u3081\u8fbc\u3093\u3067hoge\u306b\u633f\u5165\u3059\u308b<\/li><\/ol>\n\n\n\n
\u3068\u3044\u3046\u6d41\u308c\u3067\u3059\u3002<\/p>\n\n\n\n
\u8868\u793a<\/h3>\n\n\n\n<\/figure>\n","protected":false},"excerpt":{"rendered":"\u4eca\u56de\u306fRequireJS\u3067backboneJS\u3068highchartsJS\u3092\u8aad\u307f\u8fbc\u3093\u3067\u4f7f\u7528\u3057\u3066\u307f\u307e\u3059\u3002 […]<\/p>\n","protected":false},"author":1,"featured_media":975,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[211],"tags":[220,225,224,213,221],"class_list":["post-979","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-backbonejs","tag-highchartsjs","tag-model","tag-requirejs","tag-view"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=\/wp\/v2\/posts\/979","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=979"}],"version-history":[{"count":3,"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=\/wp\/v2\/posts\/979\/revisions"}],"predecessor-version":[{"id":1011,"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=\/wp\/v2\/posts\/979\/revisions\/1011"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=\/wp\/v2\/media\/975"}],"wp:attachment":[{"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=979"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=979"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=979"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/figure>\n\n\n\nrequireJS+backboneJS+highchartsJS<\/h2>\n\n\n\nindex.html<\/h3>\n\n\n\n<!DOCTYPE html>\n<html lang="ja">\n <head>\n <meta charset="utf-8">\n <title><\/title>\n <script src="https:\/\/requirejs.org\/docs\/release\/2.3.6\/minified\/require.js"><\/script>\n <script src=".\/js\/config\/config.js"><\/script>\n <script src=".\/js\/views\/HelloWorldView.js"><\/script>\n <script type="text\/template" id="hello-template">\n <h2><%= text %><\/h2>\n <\/script>\n <\/head>\n <body>\n <div class="hoge"><\/div>\n <div id="container"><\/div>\n <\/body>\n<\/html>\n<\/pre><\/div>\n\n\nhoge\u30af\u30e9\u30b9\u3068containerID\u304c\u4ed8\u4e0e\u3055\u308c\u3066\u3044\u308bdev\u30bf\u30b0\u3092\u305d\u308c\u305e\u308c\u4f5c\u6210\u3057\u3066\u304a\u304d\u307e\u3059\u3002
hoge\u306bModel\u306e\u5185\u5bb9\u304c\u5165\u308a\u307e\u3059\u3002
container\u306b\u30b0\u30e9\u30d5\u304c\u63cf\u753b\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n
config.js<\/h3>\n\n\n\nrequire.config({\n packages: [{\n name: 'highcharts',\n main: 'highcharts'\n }],\n baseUrl: "js",\n paths: {\n "backbone" : "lib\/backbone",\n "jquery" : "lib\/jquery",\n "underscore" : "lib\/underscore",\n \/\/'highcharts': 'https:\/\/code.highcharts.com'\n "highcharts": "lib"\n },\n shim: {\n 'backbone' : {\n deps: ['underscore', 'jquery'],\n exports: 'Backbone'\n }\n }\n});\n<\/pre><\/div>\n\n\nbackboneJS\u3068highchartsJS\u306e\u8aad\u307f\u8fbc\u307f\u8a2d\u5b9a\u3092\u884c\u306a\u3063\u3066\u3044\u307e\u3059\u3002
highcharts\u306epaths\u8a2d\u5b9a\u3067URL\u306e\u65b9\u304c\u30b3\u30e1\u30f3\u30c8\u30a2\u30a6\u30c8\u3055\u308c\u3066\u3044\u307e\u3059\u304c\u3001\u30a4\u30f3\u30bf\u30fc\u30cd\u30c3\u30c8\u4e0a\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u4f7f\u7528\u3057\u305f\u3044\u5834\u5408\u306fURL\u6307\u5b9a\u3067\u3082\u884c\u3051\u308b\u3088\u3068\u3044\u3046\u610f\u5473\u3067\u4e00\u5fdc\u8a18\u8f09\u3057\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n\n\n\n
HelloWorldModel.js<\/h3>\n\n\n\ndefine(['backbone'], function(backbone) {\n\n var HelloWorldModel = backbone.Model.extend({\n defaults: {\n "text":"Hello World Backbone!!"\n }\n });\n\n return HelloWorldModel;\n});\n<\/pre><\/div>\n\n\ntext\u30d5\u30a3\u30fc\u30eb\u30c9\u306b\u6587\u5b57\u5217\u304c\u683c\u7d0d\u3055\u308c\u3066\u3044\u307e\u3059\u3002
\u4eca\u307e\u3067\u306e\u8a18\u4e8b\u306e\u4e2d\u3067\u4f5c\u3063\u3066\u304d\u305fModel\u3068\u7279\u306b\u5909\u308f\u308a\u304c\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n\n\n\n
HelloWorldView.js<\/h3>\n\n\n\nrequire(['backbone', 'model\/HelloWorldModel', 'highcharts'], function(backbone, helloWorldModel, hi) {\n\n var model = new helloWorldModel();\n\n var HelloWorldView = backbone.View.extend({\n el: $('.hoge'),\n initialize: function() {\n this.render();\n },\n render: function() {\n this.graph();\n var text = model.get("text");\n $(this.el).html(_.template($('#hello-template').text())({ "text": text}));\n },\n graph: function() {\n hi.chart('container', {\n chart: {\n renderTo: 'chart',\n type: 'bar'\n },\n title: {\n text: 'Hello Highcharts'\n },\n xAxis: {\n categories: ['Hello', 'World']\n },\n yAxis: {\n title: 'Value'\n },\n series: [{\n name: 'Highcharts Intro',\n \t data: [1, 2]\n }]\n });\n }\n });\n new HelloWorldView();\n});\n<\/pre><\/div>\n\n\nbackbone\u3068Model\u3068highcharts\u3092\u8aad\u307f\u8fbc\u3093\u3067\u3044\u307e\u3059\u3002
\u3061\u3087\u3063\u3068\u8a18\u8ff0\u304c\u8907\u96d1\u306b\u306a\u3063\u3066\u304d\u305f\u306e\u3067\u8aac\u660e\u3059\u308b\u3068\u3001<\/p>\n\n\n\n
- initialize\u3067render\u3092\u547c\u3073\u51fa\u3059\u3002<\/li>
- render\u306f\u6700\u521d\u306bgraph\u3092\u547c\u3073\u51fa\u3057\u3001\u30b0\u30e9\u30d5\u3092container\u306b\u63cf\u753b\u3059\u308b<\/li>
- model\u304b\u3089text\u30d5\u30a3\u30fc\u30eb\u30c9\u3092\u53d6\u5f97\u3057\u3001template\u306b\u57cb\u3081\u8fbc\u3093\u3067hoge\u306b\u633f\u5165\u3059\u308b<\/li><\/ol>\n\n\n\n
\u3068\u3044\u3046\u6d41\u308c\u3067\u3059\u3002<\/p>\n\n\n\n
\u8868\u793a<\/h3>\n\n\n\n<\/figure>\n","protected":false},"excerpt":{"rendered":"\u4eca\u56de\u306fRequireJS\u3067backboneJS\u3068highchartsJS\u3092\u8aad\u307f\u8fbc\u3093\u3067\u4f7f\u7528\u3057\u3066\u307f\u307e\u3059\u3002 […]<\/p>\n","protected":false},"author":1,"featured_media":975,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[211],"tags":[220,225,224,213,221],"class_list":["post-979","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-backbonejs","tag-highchartsjs","tag-model","tag-requirejs","tag-view"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=\/wp\/v2\/posts\/979","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=979"}],"version-history":[{"count":3,"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=\/wp\/v2\/posts\/979\/revisions"}],"predecessor-version":[{"id":1011,"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=\/wp\/v2\/posts\/979\/revisions\/1011"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=\/wp\/v2\/media\/975"}],"wp:attachment":[{"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=979"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=979"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=979"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n<!DOCTYPE html>\n<html lang="ja">\n <head>\n <meta charset="utf-8">\n <title><\/title>\n <script src="https:\/\/requirejs.org\/docs\/release\/2.3.6\/minified\/require.js"><\/script>\n <script src=".\/js\/config\/config.js"><\/script>\n <script src=".\/js\/views\/HelloWorldView.js"><\/script>\n <script type="text\/template" id="hello-template">\n <h2><%= text %><\/h2>\n <\/script>\n <\/head>\n <body>\n <div class="hoge"><\/div>\n <div id="container"><\/div>\n <\/body>\n<\/html>\n<\/pre><\/div>\n\n\nhoge\u30af\u30e9\u30b9\u3068containerID\u304c\u4ed8\u4e0e\u3055\u308c\u3066\u3044\u308bdev\u30bf\u30b0\u3092\u305d\u308c\u305e\u308c\u4f5c\u6210\u3057\u3066\u304a\u304d\u307e\u3059\u3002
hoge\u306bModel\u306e\u5185\u5bb9\u304c\u5165\u308a\u307e\u3059\u3002
container\u306b\u30b0\u30e9\u30d5\u304c\u63cf\u753b\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n
config.js<\/h3>\n\n\n\nrequire.config({\n packages: [{\n name: 'highcharts',\n main: 'highcharts'\n }],\n baseUrl: "js",\n paths: {\n "backbone" : "lib\/backbone",\n "jquery" : "lib\/jquery",\n "underscore" : "lib\/underscore",\n \/\/'highcharts': 'https:\/\/code.highcharts.com'\n "highcharts": "lib"\n },\n shim: {\n 'backbone' : {\n deps: ['underscore', 'jquery'],\n exports: 'Backbone'\n }\n }\n});\n<\/pre><\/div>\n\n\nbackboneJS\u3068highchartsJS\u306e\u8aad\u307f\u8fbc\u307f\u8a2d\u5b9a\u3092\u884c\u306a\u3063\u3066\u3044\u307e\u3059\u3002
highcharts\u306epaths\u8a2d\u5b9a\u3067URL\u306e\u65b9\u304c\u30b3\u30e1\u30f3\u30c8\u30a2\u30a6\u30c8\u3055\u308c\u3066\u3044\u307e\u3059\u304c\u3001\u30a4\u30f3\u30bf\u30fc\u30cd\u30c3\u30c8\u4e0a\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u4f7f\u7528\u3057\u305f\u3044\u5834\u5408\u306fURL\u6307\u5b9a\u3067\u3082\u884c\u3051\u308b\u3088\u3068\u3044\u3046\u610f\u5473\u3067\u4e00\u5fdc\u8a18\u8f09\u3057\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n\n\n\n
HelloWorldModel.js<\/h3>\n\n\n\ndefine(['backbone'], function(backbone) {\n\n var HelloWorldModel = backbone.Model.extend({\n defaults: {\n "text":"Hello World Backbone!!"\n }\n });\n\n return HelloWorldModel;\n});\n<\/pre><\/div>\n\n\ntext\u30d5\u30a3\u30fc\u30eb\u30c9\u306b\u6587\u5b57\u5217\u304c\u683c\u7d0d\u3055\u308c\u3066\u3044\u307e\u3059\u3002
\u4eca\u307e\u3067\u306e\u8a18\u4e8b\u306e\u4e2d\u3067\u4f5c\u3063\u3066\u304d\u305fModel\u3068\u7279\u306b\u5909\u308f\u308a\u304c\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n\n\n\n
HelloWorldView.js<\/h3>\n\n\n\nrequire(['backbone', 'model\/HelloWorldModel', 'highcharts'], function(backbone, helloWorldModel, hi) {\n\n var model = new helloWorldModel();\n\n var HelloWorldView = backbone.View.extend({\n el: $('.hoge'),\n initialize: function() {\n this.render();\n },\n render: function() {\n this.graph();\n var text = model.get("text");\n $(this.el).html(_.template($('#hello-template').text())({ "text": text}));\n },\n graph: function() {\n hi.chart('container', {\n chart: {\n renderTo: 'chart',\n type: 'bar'\n },\n title: {\n text: 'Hello Highcharts'\n },\n xAxis: {\n categories: ['Hello', 'World']\n },\n yAxis: {\n title: 'Value'\n },\n series: [{\n name: 'Highcharts Intro',\n \t data: [1, 2]\n }]\n });\n }\n });\n new HelloWorldView();\n});\n<\/pre><\/div>\n\n\nbackbone\u3068Model\u3068highcharts\u3092\u8aad\u307f\u8fbc\u3093\u3067\u3044\u307e\u3059\u3002
\u3061\u3087\u3063\u3068\u8a18\u8ff0\u304c\u8907\u96d1\u306b\u306a\u3063\u3066\u304d\u305f\u306e\u3067\u8aac\u660e\u3059\u308b\u3068\u3001<\/p>\n\n\n\n
- initialize\u3067render\u3092\u547c\u3073\u51fa\u3059\u3002<\/li>
- render\u306f\u6700\u521d\u306bgraph\u3092\u547c\u3073\u51fa\u3057\u3001\u30b0\u30e9\u30d5\u3092container\u306b\u63cf\u753b\u3059\u308b<\/li>
- model\u304b\u3089text\u30d5\u30a3\u30fc\u30eb\u30c9\u3092\u53d6\u5f97\u3057\u3001template\u306b\u57cb\u3081\u8fbc\u3093\u3067hoge\u306b\u633f\u5165\u3059\u308b<\/li><\/ol>\n\n\n\n
\u3068\u3044\u3046\u6d41\u308c\u3067\u3059\u3002<\/p>\n\n\n\n
\u8868\u793a<\/h3>\n\n\n\n<\/figure>\n","protected":false},"excerpt":{"rendered":"\u4eca\u56de\u306fRequireJS\u3067backboneJS\u3068highchartsJS\u3092\u8aad\u307f\u8fbc\u3093\u3067\u4f7f\u7528\u3057\u3066\u307f\u307e\u3059\u3002 […]<\/p>\n","protected":false},"author":1,"featured_media":975,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[211],"tags":[220,225,224,213,221],"class_list":["post-979","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-backbonejs","tag-highchartsjs","tag-model","tag-requirejs","tag-view"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=\/wp\/v2\/posts\/979","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=979"}],"version-history":[{"count":3,"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=\/wp\/v2\/posts\/979\/revisions"}],"predecessor-version":[{"id":1011,"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=\/wp\/v2\/posts\/979\/revisions\/1011"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=\/wp\/v2\/media\/975"}],"wp:attachment":[{"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=979"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=979"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ito-u-oti.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=979"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}