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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

Q&A

解決済

2回答

2896閲覧

JavaScriptで名前空間を使ってみたら、ファイル結合の順序で困ったことに

usugita_san

総合スコア221

JavaScript

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

0グッド

0クリップ

投稿2016/09/14 03:10

編集2016/09/14 04:06

JavaScriptの名前空間について興味があって、以下のサイトを参考にして、簡単な名前空間を使ったJavaScriptの実装を行ってみました。

http://qiita.com/kenju/items/0d8f85df205ea4978508

定義した名前空間はこんな感じです。

JavaScript

1var HOGEAPP = { 2 VIEW:{}, 3 MODEL:{}, 4 CONF{} 5};

こんな感じでファイルを分割して書いてます。
init.js

lang

1var HOGEAPP = { 2 VIEW:{}, 3 MODEL:{}, 4 CONF{} 5}; 6 7HOGEAPP.init = function(){ 8 //アプリの初期化処理 9};

view.js

lang

1HOGEAPP.VIEW.addEvent = function(){ 2 //viewに関する処理 3};

model.js

lang

1HOGEAPP.MODEL.getData = function(){ 2 //modelに関する処理 3};

conf.js

lang

1HOGEAPP.CONF.getConfig = function(){ 2 //confに関する処理 3};

これらのファイルを、grantのconcatというのを使って1つのファイルにしています。
chromeで読み込んで実行したら、なぜかHOGEAPP.CONF.getConfig = function(){ の箇所でエラーになっていました。

どうも、先に名前空間の定義をしていないため、「HOGEAPP.CONF」が見つからないよって言われているんです。

先に名前空間の定義をしちゃえばいいんですが、ファイルを結合しているため、ファイルの先頭に名前空間の定義を持ってくる事が出来ません。

このような場合、どうやって先に名前空間の定義を持ってくるのでしょうか?
HTMLソースに書いておけば一応可能かもしれませんが、綺麗な方法とも思えません。
別のJavaScriptファイルを先に読み込んでおくのでしょうか?それだとせっかくファイルを結合して1つにしているのに無駄になる気がします。
皆様はどうやっているのでしょうか?

追記です。
Gruntfile.jsの記述は以下の通りです。

JavaScript

1module.exports = function (grunt) { 2 var pkg = grunt.file.readJSON('package.json'); 3 grunt.initConfig({ 4 concat: { 5 files: { 6 // 元ファイルの指定。 7 src : 'src/*.js', 8 // 出力ファイルの名前・パス指定 9 dest: 'test/lib/hogeapp.js' 10 } 11 } 12 }); 13 // プラグインのロードやタスクの登録 14 grunt.loadNpmTasks('grunt-contrib-concat'); 15 16};

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

「grunt で結合したコード」と「コンソールに出力されたエラーログ」を開示した方が良いと思います。
何となく、名前空間とか関係なしにコロン、セミコロン漏れが原因が気がするのですが…。

以下、単純結合したコード。

JavaScript

1var HOGEAPP = { 2 VIEW:{}, 3 MODEL:{}, 4 CONF{} // SyntaxError: Unexpected token { 5} 6 7HOGEAPP.init = function(){ 8 //アプリの初期化処理 9};HOGEAPP.VIEW.addEvent = function(){ 10 //viewに関する処理 11};HOGEAPP.MODEL.getData = function(){ 12 //modelに関する処理 13}HOGEAPP.CONF.getConfig = function(){ // SyntaxError: Unexpected identifier 14 //confに関する処理 15}

修正後のコード。

var HOGEAPP = { VIEW:{}, MODEL:{}, CONF:{} // コロンを入れる }; // セミコロンを入れる HOGEAPP.init = function(){ //アプリの初期化処理 };HOGEAPP.VIEW.addEvent = function(){ //viewに関する処理 };HOGEAPP.MODEL.getData = function(){ //modelに関する処理 };HOGEAPP.CONF.getConfig = function(){ // セミコロンを入れる //confに関する処理 }

Re: usugita_san さん

投稿2016/09/14 03:46

編集2016/09/14 03:49
think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

usugita_san

2016/09/14 03:51

すみません、どうもgruntのconcatの順番指定をすればいい話らしく、今試しているところです。これでダメでしたら、仰る通り結合後のJavaScriptファイルとか、追記したいと思います。 大変申し訳ありませんでした・・・。
usugita_san

2016/09/14 04:12

すみませんでした。セミコロンは、私が投稿するときに間違えて消してしまっていました。先ほど編集しました。失礼しました。
guest

0

自己解決

自己解決しましたー

gruntの設定ファイルをいじって、concatの順序を変更する事で解決しました。

JavaScript

1module.exports = function (grunt) { 2 var pkg = grunt.file.readJSON('package.json'); 3 var BUILD_ORDERED_LIST = ["src/init.js","src/*.js"]; 4 grunt.initConfig({ 5 concat: { 6 dist:{ 7 src: BUILD_ORDERED_LIST, 8 dest: 'test/lib/hogeapp.js' 9 } 10 } 11 }); 12 // プラグインのロードやタスクの登録 13 grunt.loadNpmTasks('grunt-contrib-concat'); 14};

要するに、名前空間とか宣言する前に、名前空間の中身を使おうとしちゃってエラーになってたみたいです。
concatってただ結合するだけじゃないんですね。順番とか指定できるんですね。・・・そりゃそうか。
ちなみに、"src/init.js","src/*.js"っていう指定方法だと、init.jsが重複するんじゃないかと思ってたんですが、重複したものは省いてくれるみたいです。良かった良かった。

投稿2016/09/14 04:11

usugita_san

総合スコア221

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問