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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

8312閲覧

配列データを外部JSに渡して処理したい

aKusano

総合スコア3763

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2016/09/03 05:49

###前提・実現したいこと
各HTMLごとに異なる月数のカレンダーが掲載されるページがあり、
それぞれのカレンダーをスライド表示(slick.js使用)する際に、当月のカレンダーを1番目に表示するようにします。
各HTMLにそれぞれベタに下記のスクリプトを記述して、渡すカレンダー月配列を書き換えればやりたいことは実現できています。

ただ、サイト規約によりJSは原則外部ファイル化することが求められており、このままでは通りません。
何月分のカレンダーが掲載されているのか、という情報は複数の運用担当者がHTMLを書き換える際に情報更新することになるので、
処理するJS関数本体は外部化しつつ、各HTMLから渡される掲載月の情報はHTML側に持たせることが出来れば一番良いと思うのですが、具体的なやり方が分かりません。(そもそもできるのかどうかも分かってないのですが…)

###該当のソースコード

JavaScript

1<!-- ※現在はHTML側にベタ書き --> 2<script> 3$(function(){ 4 //掲載カレンダー月 5 var arr = [5,6,7,8,9] //カレンダー掲載月情報を配列で指定 6 7 //初期実行 8 slideHuck01(arr); //引数で関数に渡す 9 10 //リサイズ時実行 11 var timer = false; 12 $(window).resize(function() { 13 if (timer !== false) { 14 clearTimeout(timer); 15 } 16 timer = setTimeout(function() { 17 slideHuck01(arr); //リサイズされた時も同様 18 }, 200); 19 }); 20 21 function slideHuck01(a){ 22 var calArray = []; //受け取った配列を新たな配列に格納(この処理必要??) 23 for(i=0;i<a.length;i++){ 24 calArray[i] = a[i]; 25 } 26 27 var w = $(window).width(); 28 var size = 639; 29 var d = new Date(); 30 var month = d.getMonth()+1; 31 var num = $.inArray(month, calArray); //当月が配列の何番目かを取得 32 33 if (w <= size) { 34 //639px以下の時 35 $(".jy-calendar").slick({ 36 initialSlide: num //当月をスライドの1番目として表示 37 }); 38 $(".jy-calendar .cal").matchHeight({ 39 remove: true 40 }); 41 } else { 42 //640px以上の時 43 $(".jy-calendar").unslick(); //スライド表示を解除 44 $(".jy-calendar .cal").matchHeight(); 45 } 46 } 47}); 48</script>

###試したこと
HTML側に配列を引数に持たせた関数呼び出しのコード(slideHuck01(arr))だけ書いて、他は外部ファイルにしてみましたが、受け取り側で引数の内容をconsole.logで確認すると全てundifinedになっていてうまく渡せていないようでした。
(何かトンチンカンなことをやっているかもしれません)

各ページごとの掲載月の配列データをjsonか何かの外部テキストに持たせておくことも考えましたが、
呼び出したページごとに該当の配列データを正しく選択する仕組みをどう作ればよいのか謎だったので頓挫しました。

###教えていただきたいこと
・外部JSの関数に、HTML側から配列データを渡す方法
・もしくは上記のやりたいことを実現するためのもっと上手い方法
・この手のことをやりたい場合に必要となる前提知識の名称(検索キーワードを何にすればいいのか迷うので…)
など

よろしくお願い申し上げます。

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

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

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

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

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

guest

回答2

0

ベストアンサー

指定した要素の data-* 属性に値を埋め込んでみてはどうでしょうか。
埋め込んだデータを DOMContentLoaded のタイミングで得るコードを JavaScript に書いておけばいくらでも拡張できると思います。

HTML

1<!-- (1) CSV --> 2<div class="jy-calendar" data-month="5,6,7,8,9"></div> 3 4<!-- (2) 範囲指定 --> 5<div class="jy-calendar" data-month="5-9"></div> 6 7<!-- (3) CSV + 範囲指定 --> 8<div class="jy-calendar" data-month="3,5-9"></div> 9 10<!-- (4) array --> 11<div class="jy-calendar" data-month="[5,6,7,8,9]"></div>

Re: aKusano さん

投稿2016/09/03 11:33

think49

総合スコア18156

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

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

aKusano

2016/09/03 11:58

ご回答有り難うございます。 data-*属性に書く、、、今回のサイト規約を忠実に守るのであれば このやり方が一番良いかもしれません。 data-*属性拾ってくる前提のコードも考えてみます。 あまりやったことがないので上手く処理できるか自信ありませんが・・・(苦)
aKusano

2016/09/03 13:50

ご提案いただいたdata-*属性を使った方法で希望通りの実装をすることができました! こちらの方法ですと異なる複数の掲載月情報にも対応が簡単にできるので、 think49さんのご回答をベストアンサーとさせていただきます。 ありがとうございました!
aKusano

2016/09/03 14:02

ちなみにこんなコードになりました。 function initCalendar(){ var $cal = $(".jy-calendar"); var d = new Date(); //日時情報を取得 var month = String(d.getMonth()+1); //当月を取得して文字列に変換 var w = $(window).width(); var size = 639; $cal.each(function(){ var calMonthText = $(this).data("month"); //掲載月データを取得 var calArray = calMonthText.split(","); //掲載月データを配列に変換 var num = $.inArray(month, calArray); //当月が何番目にあるかを取得 if (w <= size) { $(this).slick({ initialSlide: num }); $(this).find(".cal").matchHeight({ remove: true }); } else { $(this).unslick(); $(this).find(".cal").matchHeight(); } }); }
guest

0

まず、slideHuck01関数はJQueryの$(function(){});の外に出します。前に置いた方がいいです。
無名関数の中に入っていると、外から呼び出すことはできません。

その後、html側で呼び出す際は、どこかのイベントに、"slideHuck01([5,6,7,8,9])"と書いてやれば、html側から配列を渡せます。
例えば、

html

1<body onload="slideHuck01([5,6,7,8,9])"> 2```とやれば、onload時にコールできます。 3 4追記 5-- 6イベントハンドラの付け方の質問が来たので、回答します。 7 8[JQueryのonメソッド](http://api.jquery.com/on/)は第4引数にFunctionオブジェクトを入れるようになっています。 9(第2,第3引数は省略可) 10aKusanoさんのソースだと、`slideHuck01([5,6,7,8,9])`を実行した返値が渡されることになります。 11slideHuck01関数がreturnで明示的に値を返していないので、undefinedが返って来て、onに渡されているはずです。 12なので、一度だけは実行されますが、resize時にはイベントが設定されていないので、実行されないという訳です。 13 14もし、 15```Javascript 16$(function(){ 17 $(window).on("load resize",slideHuck01); 18}); 19```とやれば、Functionオブジェクトが渡されますが、今度はデータが渡されません。 20 21そこで、こうやれば渡すことが出来ます。 22```Javascript 23$(function(){ 24 $(window).on("load resize",{months: [5,6,7,8,9]},slideHuck01); 25}); 26 27function slideHuck01(event){ 28 var a = event.data.months; 29 var calArray = []; //受け取った配列を新たな配列に格納(この処理必要??) 30

投稿2016/09/03 06:03

編集2016/09/03 14:22
shi_ue

総合スコア4437

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

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

aKusano

2016/09/03 10:36

ご回答有り難うございました。 >>まず、slideHuck01関数はJQueryの$(function(){});の外に出します。前に置いた方がいいです。 無名関数の中に入っていると、外から呼び出すことはできません。 確かに! 外部JSにした時も$(function(){});の中に入ってしまっていました。 これでは外から呼び出せないのも当然ですね。。。全く気づいていませんでした。 ご指摘ありがとうございます。m(_ _)m 関数を無名関数の外に置いて外部化し、HTML側からは <body onload="slideHuck01([5,6,7,8,9])" onrisize="slideHuck01([5,6,7,8,9])"> のように記述してあげたら、無事に配列を渡すことができました! ひとまずこれで最低限の仕様はクリアなのですが、 <body onload="slideHuck01([5,6,7,8,9])" onrisize="slideHuck01([5,6,7,8,9])"> という形で呼び出した場合はロード時もリサイズ時も両方ちゃんと関数が呼び出せるのに、 $(function(){ $(window).on("load resize",slideHuck01([5,6,7,8,9])); }); とするとリサイズ時には関数が呼び出せませんでした。 最初の質門とは別件ですが、これって何が悪いのかお分かりになりますでしょうか?
shi_ue

2016/09/03 10:42 編集

$(function ( ) {   $(window).on("load resize", function ( ) {     slideHuck01([5,6,7,8,9]);   }); }); じゃだめなんですか?(見やすいように全角スペース入れてるので、コピペしないようにしてくださいね)
kei344

2016/09/03 11:39

To: aKusanoさん タイプミスでは? × onrisize=" ○ onresize="
aKusano

2016/09/03 11:54

>shi_ue さん そちらだとOKでした!ありがとうございます。が、お恥ずかしながら最初に書いたものと教えていただいたもので何故挙動が変わるのか分かりません・・・。「この仕様読めばわかるよ!」みたいな参考がございましたらご教授いただけますと幸いです。 >kei344さん onrisizeはタイプミスですね。。が、こちらへの書き込みだけ間違っただけで実際のファイル法はonresize=""で動作しております。紛らわしくてすみません。
aKusano

2016/09/03 14:29

>shi_ueさん 追記ありがとうございました。 なんとなく分かってきたような気がします。 もう少しリファレンスとか読んで精進したいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問