質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
Backbone.js

Backbone.jsはRESTfulなウェブアプリケーションを構築するJavaScriptフレームワークです。

オブジェクト指向

オブジェクト指向プログラミング(Object-oriented programming;OOP)は「オブジェクト」を使用するプログラミングの概念です。オブジェクト指向プログラムは、カプセル化(情報隠蔽)とポリモーフィズム(多態性)で構成されています。

プログラミング言語

プログラミング言語はパソコン上で実行することができるソースコードを記述する為に扱う言語の総称です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

解決済

グローバル変数を使用しない設計方法

tarotarosu
tarotarosu

総合スコア114

Backbone.js

Backbone.jsはRESTfulなウェブアプリケーションを構築するJavaScriptフレームワークです。

オブジェクト指向

オブジェクト指向プログラミング(Object-oriented programming;OOP)は「オブジェクト」を使用するプログラミングの概念です。オブジェクト指向プログラムは、カプセル化(情報隠蔽)とポリモーフィズム(多態性)で構成されています。

プログラミング言語

プログラミング言語はパソコン上で実行することができるソースコードを記述する為に扱う言語の総称です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

6回答

1リアクション

1クリップ

7614閲覧

投稿2016/10/27 03:53

編集2016/10/27 08:24

###前提・実現したいこと
今、下記のようなグローバル変数が定義されているとします。
このグローバル変数はプログラム中のいたるところで使用されます。
(例えばボタンがクリックされたらクリックされたボタンに応じてグローバル変数の値を書き換えたり、これらの値を使って計算したり、色々です。)
実現したいこととしましては、これらのグローバル変数を使わないような設計にしたいということです。

最近Backbone.jsを勉強し始め導入を試みているのですが、グローバル変数があらゆるViewのメソッド内で乱用されています。
これでは、疎結合化を図るBackbone.jsの理念(?)からは大きく外れてしまうのではないかと懸念しています。
例の場合だと、ファイルを分割したときにglobal_1が様々なファイルをまたいでいるので、保守性のことなどを考えるとこれではいけませんよね…

Backbone.jsに限った話ではないですが、様々な処理で変数を共有させたい場合、どのような設計方法がベストなのでしょうか?
あまり具体例がなくぼんやりした質問ですが何かご回答を頂けると助かります。

###例

javascript

global_1; global_2; global_3;

###追記
より具体的な例で説明します。

<li>をクリックしたらその<li>内のテキストを取得して、<button>がクリックされたら先ほど取得したテキストを表示する。 という処理をjQueryだけでは以下のように記述しました。

###HTML

html

<div class="demo"> <ul> <li id="list1">list1</li> <li id="list2">list2</li> <li id="list3">list3</li> </ul> <button type="button" id="button">Button</button> </div>

###jQueryでの記述

javascript

$(function(){ var listText; $('.demo li').click(function(){ listText = $(this).text(); }); $('#button').click(function(){ console.log(listText); }); });

これを私なりにBackbone.jsを使って書き換えると、以下のようなコードになりました。

###テンプレート

html

<script type="text/template" id="text-template"> <%- text %> </script>

###Backbone.jsでの記述

javascript

var listText; //liのModel var LiModel = Backbone.Model.extend({ defaults: { text: 'list1' } }); //liのView var LiView = Backbone.View.extend({ tagName: 'li', template: _.template($('#text-template').html()), events: { 'click': 'getText' }, getText: function(){ listText = this.model.get('text'); }, render: function(){ var template = this.template(this.model.toJSON()); this.$el.html(template); return this; } }); //ボタンのView var ButtonView = Backbone.View.extend({ el: '#button', events: { 'click': 'showText' }, showText: function(){ console.log(listText); } }); var liModel = new LiModel(); var liView = new LiView({model: liModel}); $('.demo').append(view.render().el); var buttonView = new ButtonView();

このような処理をBackbone.js的に実装しようとしても、「listText」というグローバル変数を記述するような方法でコーディングしてしまいます。
この程度ならlistTextが存在しても何の問題もないのですが、実装したい機能としてはもっと複雑で、listTextが様々な処理に絡み、listTextのような変数もかなり増えてくることが予想されます。

Backbone.jsに関係なく、クラス間でうまいこと変数を受け渡しできればいいのかなーと思うのですが、良い実装方法が思い浮かびません…

###追記2
liのViewがおかしかったので少し修正しました

yuu208👍を押しています

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Backbone.js

Backbone.jsはRESTfulなウェブアプリケーションを構築するJavaScriptフレームワークです。

オブジェクト指向

オブジェクト指向プログラミング(Object-oriented programming;OOP)は「オブジェクト」を使用するプログラミングの概念です。オブジェクト指向プログラムは、カプセル化(情報隠蔽)とポリモーフィズム(多態性)で構成されています。

プログラミング言語

プログラミング言語はパソコン上で実行することができるソースコードを記述する為に扱う言語の総称です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。