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

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

ただいまの
回答率

90.76%

  • JavaScript

    15292questions

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

  • オブジェクト指向

    270questions

    オブジェクト指向プログラミング(Object-oriented programming;OOP)は「オブジェクト」を使用するプログラミングの概念です。オブジェクト指向プログラムは、カプセル化(情報隠蔽)とポリモーフィズム(多態性)で構成されています。

  • canvas

    237questions

    HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

プロトタイプの有効性、必要性

解決済

回答 2

投稿

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

aaaaaaaa

score 461

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

プロトタイプ無し

//①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 x1 =5;
var y1 =5;

var x2 =100;
var y2 =5;

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

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

    updatePosition();
    draw(x1.y1);
    draw(x2.y2);

    //5.一定時間を置く
    requestAnimationFrame(render);
}
function updatePosition() {
    //3.位置をずらす
    x1 +=5;
    y1 +=5;
    x2 +=5;
    y2 +=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();
}

プロトタイプ

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

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

//パーティクルの数
var NUM = 2;
//new Particleを実行したぶんだけ配列particlesに代入。
var particles = [];

canvas.width =  canvas.height=500;

for(var i=0; i<NUM;i++) {
    positionX = Math.random() * 120;//X座標を0-20の間でランダムに
    positionY = Math.random() * 20;//X座標を0-20の間でランダムに
    particle = new Particle(ctx,positionX,positionY);
    particles.push(particle);
}

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

//引数には描画コンテキストと初期座標を渡している。
function Particle(ctx,x,y) {
    this.ctx = ctx;
    this.x= x||0;
    this.y= y||0;    
}
Particle.prototype.render = function() {
    this.updatePosition();
    this.draw();    
}
Particle.prototype.draw = function() {
    //.4再度図形を描画する。
    ctx = this.ctx;

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

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

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

    //円形のパスを作成。
    //ctx.arc(100,100,40,0,Math.PI*2);//第一引数と第二引数が座標(横縦)、第三引数が半径、第四が円の始まりの角度、第五が円の終わりの角度、第六が描く向き 

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

    //最後にbeginPathで開始したパスを閉じる。
    ctx.closePath();
}
Particle.prototype.updatePosition = function() {
    //3.位置をずらす
    this.x +=5;
    this.y +=5;
}

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

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

    //配列の各要素の関数renderを実行して図形を描画
    particles.forEach(function(e) {e.render();});

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


ブレイクスルーjavascript chapter3によるとパーティクルの数を3個、5個、100個…と増やしていくとプロトタイプではないほうのソースだとその都度、変数の数が増えて大変になってしまうのでプロトタイプを使ったそうですが、
いまいちプロトタイプがどう有効性を発揮したのか、どのような必然性があったのかがわかりません。ただ、プロトタイプがあるほうは、変数NUMをいじるだけでパーティクルの数を増やせるのでプロトタイプが無い奴と比べると格段に便利ですが、この便利さはプロトタイプがないと実現できないのでしょうか。
プロトタイプは、どのような場面に差し掛かったところで利用すべきものなのでしょうか。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

+4

JavaScriptで何かを実現するだけが目的で、どちらでも実行可能なのであれば、プロトタイプを使う必要性はありません。しかし、JavaScriptはプロトタイプベースのオブジェクト指向言語なので、プロトタイプを使うと便利な場面はたくさんあります。つまり、設計次第ということになります。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain

作成したプログラムの将来性を考えれば、プロトタイプベースで設計したほうが断然拡張性はあがります。小規模なプログラムでは恩恵や利便性を感じられないかもしれませんが、知っておいて損はないはずです。

いちおう誤解されているようなので、説明しておきます。下記のようなexample()でもJavaScriptの内部的にはプロトタイプチェーンを使って検索が行われます。(上のリンクのサイトにも書かれています)

function example(){}

プロトタイプチェーンの順序

example -> Function.prototype -> Object.prototype -> null

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

+3

...正直、現時点においてprototypeを覚える必要性はありません。
今の時代に覚えるべきJavascriptではClassが使えます。
昔はClassが無かったのでPrototypeを使わなければいけない時代がありました。
もうprototypeなんていうものは「古典」と見ていいかと思います。

他の人が書いたものが読めるぐらい知識があれば良いのかなと思いますので、今更覚え直したくもありません。。

Class構文は既にIE以外のブラウザではほぼ動くようです。
https://caniuse.com/#feat=es6-class

とはいっても、結局IEでも動かさなきゃいけないので、今JSでまともに仕事をしてる人はClassで書いてBabelを使ってIEでも動くようにするのが一般的です。

ちょうどつい先日、Javascriptの書き方最新版の記事がQiitaに出ましたが、この書き方を推奨します。
逆に言えば、この内容に沿わない本は古典の可能性がありますので、歴史的な経緯を知りたいという興味以外ではオススメできません。
https://qiita.com/shibukawa/items/19ab5c381bbb2e09d0d9

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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

  • JavaScript

    15292questions

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

  • オブジェクト指向

    270questions

    オブジェクト指向プログラミング(Object-oriented programming;OOP)は「オブジェクト」を使用するプログラミングの概念です。オブジェクト指向プログラムは、カプセル化(情報隠蔽)とポリモーフィズム(多態性)で構成されています。

  • canvas

    237questions

    HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。