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

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

ただいまの
回答率

91.25%

  • JavaScript

    11798questions

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

  • 関数

    160questions

    関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

  • 関数型プログラミング

    21questions

    関数型プログラミングとは、関数を用いて演算子を構築し、算出し、コンピュータプログラムを構成する枠組みです。

どんな理由があって分散したのか

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 101

aaaaaaaa

score 427

下記のソースは、canvasのパーティクルを動かすソースです。

処理をdrawにぶちこんだもの

//①canvas要素の取得
var canvas = document.getElementById("canvas");

//②canvas要素から描画コンテキストの取得
var ctx = canvas.getContext("2d");

window.requestAnimationFrame =
    window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(cb) {setTimeout(cb,17);};

var x =5;
var y =5;

//1.図形を描画する。(描画サイクルの開始)
draw();

function draw() {
    //2.一度図形を消去する
    ctx.clearRect(0,0,500,500);

    //3.位置をずらす
    x +=5;
    y +=5;

    //.4再度図形を描画する。

    //パスを初期化。ここでいうパスとは、領域の境界線のようなものだという。
    ctx.beginPath();

    //塗りつぶす色を指定。
    ctx.fillStyle = "#99ff66";//緑色

    //長方形のパスを作成。第一引数がx座標(横)、第二引数がy座標(縦)、第三引数が横幅、第四引数が高さだ。座標というのは、ブラウザの表示領域のX軸とY軸のことだ。0,0にすれば、ブラウザの左上に表示される。
    ctx.rect(this.x,this.y,10,20);//rectは、rectangel(長方形、矩形)の略である。

    //fillで長方形を塗りつぶす。何も指定しないと黒色となる。
    ctx.fill();//fillは、容器や場所などをいっぱいにする、満たすという意味だ。

    //最後にbeginPathで開始したパスを閉じる。
    ctx.closePath();

    //5.一定時間を置く
    requestAnimationFrame(render);
}


処理をいくつかの関数に分けたもの

//①canvas要素の取得
var canvas = document.getElementById("canvas");

//②canvas要素から描画コンテキストの取得
var ctx = canvas.getContext("2d");

window.requestAnimationFrame =
    window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(cb) {setTimeout(cb,17);};

var x =5;
var y =5;

//1.図形を描画する。(描画サイクルの開始)
render();

function render() {
    //2.一度図形を消去する
    ctx.clearRect(0,0,500,500);

    updatePosition();
    draw(x.y);

    //5.一定時間を置く
    requestAnimationFrame(render);
}
function updatePosition() {
    //3.位置をずらす
    x +=5;
    y +=5;
}
function draw(posx,posy) {
    //.4再度図形を描画する。

    //パスを初期化。ここでいうパスとは、領域の境界線のようなものだという。
    ctx.beginPath();

    //塗りつぶす色を指定。
    ctx.fillStyle = "#99ff66";//緑色

    //長方形のパスを作成。第一引数がx座標(横)、第二引数がy座標(縦)、第三引数が横幅、第四引数が高さだ。座標というのは、ブラウザの表示領域のX軸とY軸のことだ。0,0にすれば、ブラウザの左上に表示される。
    ctx.rect(this.x,this.y,10,20);//rectは、rectangel(長方形、矩形)の略である。

    //fillで長方形を塗りつぶす。何も指定しないと黒色となる。
    ctx.fill();//fillは、容器や場所などをいっぱいにする、満たすという意味だ。

    //最後にbeginPathで開始したパスを閉じる。
    ctx.closePath();
}


drawにぶちこんだ処理をわけるさい、描画する位置をずらす処理をupdatePositionに、描画する処理をdraw、それらをまとめたもの?をrenderに分けましたが、なぜこのような分け方になったのでしょうか。
またこのようにわけるとブレイクスルーjavascriptの72頁によれば再利用性(使いまわしやすさ?)が向上するそうですが、なぜ分けると向上するのでしょうか。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+1

GameEngineの一つであるUnityでは
https://docs.unity3d.com/ja/current/Manual/ExecutionOrder.html
こんな感じに分かれてます。

歴史的な経緯はわからないので例をあげます

3次元空間に立方体が2つあったとして、描画する順は基本的に奥にある方から書くとうまく描画できますが、
そのためには位置が決まってからじゃないと判断できないので、update関数で位置を決め、draw関数で決まった位置をもとに描画順を決めていくって決めておけば間違いないよねっていう感じですね。
(Zバッファとかでそんなルールなくてもいいとかはありますが、それは今回はないものとして)

また、updateを2回呼び出してからdrawを呼ぶだけで倍速になったりしたりして便利です

ハード的にも例はあるんですが、これに関しては難しいので割愛

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

ただいまの回答率

91.25%

関連した質問

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

  • JavaScript

    11798questions

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

  • 関数

    160questions

    関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

  • 関数型プログラミング

    21questions

    関数型プログラミングとは、関数を用いて演算子を構築し、算出し、コンピュータプログラムを構成する枠組みです。