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

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

ただいまの
回答率

89.54%

functionは$(function(){が不要か

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 431
退会済みユーザー

退会済みユーザー

<button onclick="functionName();">実行</button>

<script>
$(function(){
  $('button').click(function(){
    alert('hoge');
  });
};

function functionName(){
  alert('hoge');
}
</script>

functionName()は何処に置いてもonclickで実行されますが、画面表示から速攻でonclickすると処理できないケースなどあるのでしょうか?

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

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

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2019/05/23 14:35

    回答した後に気づいたのですが
    メソッドなのでfunction を冒頭につけておかないとエラーになりますよ。 > functionName(){

    キャンセル

  • x_x

    2019/05/23 17:01

    質問内容が編集されて$(function(){についての文言がなくなりましたが、不要になったということなのでしょうか?
    見出しと合わなくなってしまいますし、すでについた回答とも不整合を起こしています。

    キャンセル

  • miyabi_takatsuk

    2019/05/23 17:19

    しかもくっつきの
    functionName()じゃなくなってるし。
    それはちょっとずるいのでは?質問者さん。
    そこは、指摘があったので、修正しましたなど、一言追加しましょう。

    キャンセル

回答 4

+4

呼び出されて初めて実行されるからです。

すごーーーく厳密にいうと、<button onclick="functionName();">実行</button>が読み込まれてからfunctionName(){が読み込まれるまでの間にボタンがクリックされれば未定義エラーになるはずです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/23 14:36 編集

    気になった
    > HTML→CSS→JS→画像の順番で読み込みされるはず

    これは、HTMLに書いた順番に読み込まれるはず、です。
    読み込み=実行というわけでもないですね。

    キャンセル

checkベストアンサー

+3

混同されているのでは。

buttonをクリックした際の挙動でclickメソッドを使う場合は「要素がきちんと読み込まれてから」処理するために「$(function(){...});」を使用しますが、

「要素がきちんと読み込まれてから」とは、ハンドラ|リスナを定義する対象要素の話です。ここで言うとbutton要素のことです。

「onclick」でfunctionを実行する場合はそれが不要なのはなぜでしょうか?

そういうわけで、「onclick」でハンドラを定義する場合、その属性を持っている要素が存在することは自明ですから、必ず「要素がきちんと読み込まれてから」処理されることになります。

画面表示から速攻でonclickすると処理できないケースなどあるのでしょうか?

たとえば、↓これはエラーになります。

<button onclick="functionName();">実行</button>
<script>
$('button').click();
</script>
<script>
function functionName(){
  alert('hoge');
}
</script>

しかし、これは関数定義と実行のタイミングの問題であって、「要素がきちんと読み込まれてから」という話とは関係ありません。

質問の変更にあわせて追記

functionName()は何処に置いてもonclickで実行されますが、画面表示から速攻でonclickすると処理できないケースなどあるのでしょうか?

上記のとおり、ありえます。
さらに言えば、イベントとかDOMとか、その辺のわずらわしい話を取っ払って、↓このように書いてもエラーになります。

<script>
  functionName();
</script>
<script>
  function functionName(){
    alert('hoge');
  }
</script>


JavaScript はこのような依存関係を記述することを苦手(というか放棄)しています。
ただ、最近のJavaScriptには便利なものがありますので、こちらをご利用になるといいでしょう。
import - JavaScript | MDN

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/23 16:30

    script要素またぐパターンを忘れていた・・・。
    質問者さん>あと、
    <script>
    functionName();
    </script>
    <script src="hoge.js"></script>
    hoge.jsの中身:function functionName(){}
    も同様にエラーになるはずですよ。

    キャンセル

  • 2019/05/23 17:09

    > miyabi_takatsukさん
    補足ありがとうございます。

    ついでに言えば、

    $(function(){
    $('button').click(function(){
    ……

    のようにロードイベントで関数を定義しても、その前にクリックしてしまえば同様にエラーになりますね。

    キャンセル

  • 2019/05/23 17:13

    それは何も起こらないだけでは?

    キャンセル

  • 2019/05/23 17:19 編集

    あ、そうですね。
    こっちが混同してしまった。

    $(function(){
    function functionName(){
    ……

    のつもりでした。

    キャンセル

+3

そのコード動きますか?
functionキーワードと、メソッド名の間には半角スペースが必要です。

さて、回答ですが、functionキーワードにて関数を定義した場合は、
定義前の行にて実行をしても、しっかりと実行されます。
そして、クリックイベント追加自体が、
$(function(){});の中に記載されているため、
速攻で押そうが何しようが、そもそも、読み込みが完了してから初めてクリックイベント自体が追加されるため、読み込み前に押しても、反応しない、が正しい挙動です。
(そもそも、まだクリックイベントが追加されてないタイミングだから)
なので、functionキーワードでの定義であれば、どこに書いても基本的には大丈夫です。

ただ、下記の場合は、定義が先でないと動きません。

var Name = function(){
  // 処理
};

function定義と、変数定義、これの違いに関しては、なんでかと言うと、申し訳ございません、私自身も今調べてるところです。

そして、

HTML→CSS→JS→画像

これどこで得た知識ですか?
JSの方がCSSより先に読み込ませてたら、当然JSの方が先に読み込み開始しますが。
正しくは、書いた順に、読み込まれる、です。
たとえ、async属性をつけても、読み込みしてる間に次の読み込みも開始できるってだけで、
書いた順に読み込みが開始されるのは変わりません。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/23 15:11 編集

    書いた順に読み込まれるということは、最下層にfunctionを定義した場合にタイミングによっては未定義エラーにならないでしょうか。
    グローバルの場合は何処に記述しても未定義エラーにならないということでしょうか
    例えば、var window.Name = function(){の場合など

    キャンセル

  • 2019/05/23 15:21

    そうですね、var定義の場合は、関数呼び出しが先にあれば、未定義エラーになります。
    function定義の場合はエラーになりません。
    というか、自分でやって試した方が早いのでは・・・・。

    キャンセル

+1

コールバックの仕様というだけ
必ずしも無名関数は必須ではない

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $('#func2').click(function(){
    functionName();
  });
  $('#func3').click(functionName);
});

function functionName(){
  alert('hoge');
}
</script>
<button onclick="functionName();" id="func1">1</button>
<button id="func2">2</button>
<button id="func3">3</button>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 89.54%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる