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

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

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

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

解決済

変数の参照の仕組みが分かりません。

taka_oct092018
taka_oct092018

総合スコア97

JavaScript

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

2回答

0リアクション

1クリップ

499閲覧

投稿2022/07/28 14:11

前提

実行部分のaddEventListenerをソースコードの一番最後に記述するつもりでしたが、
勘違いして一番最初に書いたままで、作動してしまいました。
変数と関数宣言が後になるため、エラーが発生すると思うのですが、
実際には問題なく作動しました。
動いてくれたからいいものの、なぜエラーにならないのかが分かりません。

実現したいこと

  1. ロードイベントが発火するタイミングが関係あるのでしょうか。
  2. 安全なコードを書くには、定義部分を先に書いてから実行部分を記述した方がいいのでしょうか?

よろしくお願い致します。

発生している問題・エラーメッセージ

該当のソースコード

JavaScript

// グローバル汚染を避けるために即時関数を使って全体を囲う。 (() => { /** * ページのロードが完了したときに発火するloadイベント */ addEventListener('load', () => { // まず最初に画像の読み込みを開始する imgLoader('img/color.jpg', loadedImg => { // 引数経由で画像を受け取り変数に代入しておく img = loadedImg; // 初期化処理を行う initialize(); // 描画処理を行う render(); }); }, false); /** * 描画対象となるCanvas Element * @type {HTMLCanvasElement} */ let canvas = null; /** * Canvas2D APIのコンテキスト * @type {CanvasRenderingContext2D} */ let ctx = null; /** * イメージのインスタンス * @type {Image} */ let img = null; /** * 画像をロードしてコールバック関数にロードした画像を与え呼び出す * @param {string} path - 画像ファイルのパス * @param {function} [callback] - コールバック関数 */ function imgLoader(path, callback) { // 画像のインスタンスを生成する。 let target = new Image(); // 画像がロード完了したときの処理を先に記述する。 target.addEventListener('load', () => { // もしコールバックがあれば呼び出す。 if (callback != null) { // コールバック関数の引数に画像を渡す。 callback(target); } }, false); // 画像のロードを開始するためにパスを指定する。 target.src = path; } /** * canvasやコンテキストを初期化する */ function initialize() { canvas = document.getElementById('mainCanvas'); // canvasの大きさをウィンドウ全体を覆うように変更する。 canvas.width = innerWidth; // 幅 canvas.height = innerHeight; // 高さ // canvasからコンテキストを取得する。 ctx = canvas.getContext('2d'); } /** * 描画処理を行う */ function render() { // 画像を描画する(等倍) ctx.drawImage(img, 100, 100); // 画像を描画する(大きさを指定) ctx.drawImage(img, 300, 100, 200, 200); // 画像を描画する(一部を切り出し+大きさを指定) ctx.drawImage(img, 16, 16, 96, 96, 100, 300, 50, 50); } })();

試したこと

ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

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

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

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

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

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

JavaScript

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