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

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

ただいまの
回答率

90.52%

  • JavaScript

    16348questions

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

javascriptにおけるクラスの定義について

受付中

回答 4

投稿 編集

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

satoudayo

score 11

タイトルについてる初心者マークの通りプログラミング初心者なので意味不明なことを書いてるかもしれません。訳の分からないことを書いていたら訂正するので教えてください;;

本題です。Javascriptの勉強をしていて自分で調べても分からないことがあったので質問を投稿しました。クラスの定義というやつです。元々javaScriptはクラスがない言語だけど最近クラスが出来たよとか、それまではprototypeを使って書いてたよとか記事によって内容がまちまちでどうも分かりません。過去の記事を遡って勉強することも多いのでprototypeによるクラスの定義と普通のクラスの定義どちらとも覚えたいんですけど初心者向けに解説してるサイトがどうも見当たらなくて...。
クラスの意味はなんとなく分かります。クラスにはプロパティとメソットがあって、インスタンス化する時に引数を渡してプロパティの値に代入されていって、簡単にオブジェクトが出来るみたいな感じですよね。
ほんでクラスについていくつか聞きたいことがあるので質問を箇条書きしていきます。

①最近出来るようになったというprototypeを使わないクラスの定義方法を教えて欲しいです。またクラスの定義方法を見ているだけではイメージがわかないので、定義したクラスを用いて何かをするところまで教えていただけるとすごく助かります;;

②確認の為の質問です。オブジェクトというのはプロパティとメソットの集合体のことであり、クラスとはオブジェクトを作る設計図のことである。プロパティとは連想配列のようなものであり、値には番号ではなく名前がつけられている。メソットとはクラスやオブジェクトの中に書かれている関数のことである。
この解釈に間違いはないでしょうか。間違いがあれば教えて欲しいです。

③配列の書き方に種類があるように、クラスの定義方法にも種類があるのでしょうか(prototypeによる書き方は全て除く)。もし複数種類があればそれも教えて欲しいです。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • 退会済みユーザー

    2018/04/27 11:44

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 4

+2

限定した内容の範囲で、回答(とヒント)を書いておきます。

 回答

➀回答なし

ただヒントとなる記事を挙げておきます こちら

#最近出来るようになったというprototypeを使わないクラスの定義方法・・・ の文を読むと
実は定義方法をご存知ではないか?と思えるからです。

オブジェクトというのはプロパティとメソットの集合体のことであり、クラスとはオブジェクトを作る設計図のことである。プロパティとは連想配列のようなものであり、値には番号ではなく名前がつけられている。メソットとはクラスやオブジェクトの中に書かれている関数のことである。

出典はどちらの本でしょうか。ネットでしたらURLを教えてください。
この種の情報は良い回答をもらうための必須条件だと思います。

言語はrubyですが一般的なクラスの解説を引用します。 こちら

「クラスとメソッド」を読んでみてください。これが正解だと思います。

➂回答なし

回答してもらうためのヒント
こちら
も読んでみてください。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

+2

混乱が激しいですね。あちこちに知識が不足している箇所があるように思えます。
webで必要な部分だけで勉強しようとしてないでしょうか?

他にも誤りがありますが②の理解は誤りです。(失礼ですが、山ほどの指摘があるため割愛します。)

prototypeによるオブジェクトの定義とclassを使ったオブジェクトの定義は初心者であれば使い方も含めどちらか片方をキチンと理解すべきです。両方を一気に覚えるのは初心者向けではないと思います。そのため初心者用の説明がないのだと思われます。

体系だった入門書(webも可)などを順を追って読んでいく必要があると思われます。

③に関しては、javascriptは他の言語と比べいろいろな方法を許しています。ついでにこたえられるような分量ではありません。自由度が高いのが魅力でもありますが、この点ではあまり初心者向けではない言語かもしれません。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/04/27 11:31 編集

    function ningen(name,age,sintyou,taijuu,seibetu){
    this.name=name;
    this.age=age;
    this.taijuu=taijuu;
    this.sintyou=sintyou;
    this.seibetu=seibetu;
    }

    var ningenichi= new ningen("ゆうすけ",20,170,60,"男");
    var ningenni= new ningen("ひとみ",30,150,50,"女");

    キャンセル

  • 2018/04/27 11:33

    functionを用いて擬似的なクラスを作って、newを用いてインスタンス化ってこんな感じであってますか...?。?

    キャンセル

  • 2018/04/27 11:45

    その書き方もありますね。あまり推奨される書き方でないかもしれませんが、javascript特有の面白い書き方です。

    キャンセル

  • 2018/04/27 11:54

    あっ、ごめんなさい。この場合、newはいりませんね。
    var ningenichi= ningen("ゆうすけ",20,170,60,"男");

    キャンセル

  • 2018/04/27 11:58

    function ningen(name,age,sintyou,taijuu,seibetu){
    this.name=name;
    this.age=age;
    this.taijuu=taijuu;
    this.sintyou=sintyou;
    this.seibetu=seibetu;
    return this;
    };

    var ningenichi= ningen("ゆうすけ",20,170,60,"男");
    var ningenni= ningen("ひとみ",30,150,50,"女");

    キャンセル

  • 2018/04/27 11:59

    "return this;"とfunctionの最後は"};"です。

    キャンセル

  • 2018/04/27 12:07

    console.log(ningenichi);
    と書いてコンソールのぞくとウィンドウオブジェクトが出てきました;;

    キャンセル

  • 2018/04/27 12:22

    ほんとだ、私が根本的に間違ってる。
    console.log(ningenichi.name)
    -> ひとみ
    thisが新しく作らていない。javasriptのthisは扱いが難しいですね。

    自分で書いていたのに”ついで”で答えて失敗した。ショボ。
    この件の質問をおこしたら、詳しい人が速攻回答くれると思うのであらためて質問してみてください。

    キャンセル

  • 2018/04/27 14:36

    new 演算子は this をインスタンスに束縛し、インスタンスの[[prototype]]の参照をコンストラクタのprototypeにします。
    new 演算子なしでのクラス記述はできないことではないですが、かなり分かりにくいコードになると思います。

    キャンセル

  • 2018/04/27 14:51

    なるほど。
    (とりあえず、new相当としててthat={};を定義してthatにプロパティを追加したらちゃんと出ました。でもこれはちょっと違う気がする・・・)

    キャンセル

  • 2018/04/28 09:58

    To: iwamoto_takaaki さん
    普通に関数呼び出しした場合、this 値の初期値はStrict Modeならundefined、非Strict Modeならグローバルオブジェクト(ブラウザならwindow)が適用されます(アロー関数は少し違いますが)。
    new 演算子を使う時と使わないときでthis値の挙動が変わるので、一部のビルトイン関数はnew演算子による呼び出しを強制しています。
    Map(); // TypeError: Constructor Map requires 'new'

    キャンセル

+2

元々javaScriptはクラスがない言語だけど最近クラスが出来たよとか、
それまではprototypeを使って書いてたよ

これは本当です。
JavaScriptには言語仕様としてクラスはありません。
ES2015という3年前に出来た新しい規格でclass構文が実装された事で、
見てくれだけはJavaやPHP等のクラスベースの書き方が出来るようになりました。

しかし、JavaScriptは下位互換を意識する言語ですので、
内部ロジックでは昔のバージョンから変わらず、
既製品の関数をnewで分裂させていくプロトタイプベースならではの手法を使っています。

1. 最近出来るようになったというprototypeを使わないクラスの定義方法を教えて欲しいです。

これは「ES2015 クラス」等のワードで検索してみてください。

2. プロパティとは連想配列のようなものであり、値には番号ではなく名前がつけられている。メソットとはクラスやオブジェクトの中に書かれている関数のことである。

前半は合ってます。

恐らく意味合いとしては大丈夫だと思いますが、一応日本語的に微妙なので突っ込みます。
プロパティが連想配列なのではありません。
プロパティの集合であるオブジェクトが連想配列なのです。
なのでプロパティはキーと値のセットみたいなものだと解釈して下さいね。

メソットは外国人の名前で、メソッドの方ですね。
解釈は大まかには大丈夫ですが、関数との違いはそのクラスやオブジェクトに属するという意味合いが強い事でしょうね。

基本的に関数というのはAの値をBの値に加工して返すのが一般的です。
数学のf(x)みたいなやつですからね。
所がオブジェクトやクラスから生成したインスタンスは、具体的な値であるプロパティをいくつも持っています。

なのでその値を見せて!というメソッドを用意すれば、
同じメソッド名を実行したのに、得られる結果が変わるわけですね。

3. クラスの定義方法にも種類があるのでしょうか

ありません。ES2015で追加されたクラスの定義方法1個だけです。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/04/28 06:21

    どうも丁寧にありがとうございます;;
    調べてみてとりあえず書いてみたんですけど、合っていますかね。おしえてほしいです;;

    ソロバン教室に通う子ども達を作りたいです。そろばん教室にいる子どもたちにはそれぞれ名前や性別年齢という情報があります。そして彼らは暗算が得意で礼儀正しいので挨拶をすることも出来ます。

    function kodomo(name,age,seibetu){
    this.name=name;
    this.age=age;
    this.seibetu=seibetu;
    this.aisatu=function(){
    console.log("私の名前は"+this.name+"です");
    }
    this.kakeizan=function(suuziichi,suuzini){
    console.log("数字"+suuziichi+"×"+suuzini+"は"+suuziichi*suuzini+"です");
    }
    }

    var seitoichi=new kodomo("たろう",10,"男");
    var seitoni=new kodomo("あやこ",12,"女");

    キャンセル

  • 2018/04/28 06:27

    上の方に書いてあるコンストラクタ?関数?がクラスと呼ばれる設計図。this.nameやthis.ageがプロパティで受け取った引数を代入する。ほんでkodomoクラスを元にnewを用いて作られたのがたろうくんやあやこちゃんといったインスタンスである。こんなかんじであってますか...?。?

    キャンセル

  • 2018/04/28 06:28

    それからfunctionがついてたらとりあえず全部関数なんじゃないかと勝手に思っているんですけど、間違いなのでしょうか...?。?

    キャンセル

  • 2018/04/28 10:32

    > こんなかんじであってますか...?

    ES5までのクラス(ぽいものと)インスタンスの作り方を前提としたら合ってますよ。

    メソッドの作り方はそれだと毎回関数のオブジェクトを生成する作りなってしまい、kodomoのインスタンスを沢山(100人、1000人)生成する場合だと重くなってしまいます。
    記述が同じだけど別のメモリ空間を消費するメソッドが大量に作られますからね。

    一度kodomo関数のお外に出てから、
    kodomo.prototype.aisatu = function ...
    と続けるように書き直してみてください。

    まぁ、これからの時代はES2015の書き方の方が良いのでこのクラスの作り方は忘れてしまって構いません。

    > functionがついてたらとりあえず全部関数なんじゃないかと勝手に思っているんですけど、間違いなのでしょうか...?

    functionにも色々あります。
    数学の厳密な定義ではf(a) = bが保証されるものが関数ですが、JSのような言語だと命令を束ねたサブルーチンとしても扱います。

    オブジェクト指向の条件というのはクラスじゃなくて、インスタンスを作れるか否かなんですよ。
    なので別に元ネタはクラスという特別なものを用意しなくても、別に関数でいいじゃんって思想がJavaScriptです。
    だからfunctionからインスタンスを作るのが普通の風変わりした実装なんですね。

    キャンセル

+1

 ①

class wallet{
  constructor(name, cash){
    this.name = name;
    this.cash = cash;
  }
  show(){
    return `${this.name}のお財布には${this.cash}円入っています。`
  }
  payment(x){
    this.cash -= x;
    return x;
  }
  income(x){
    this.cash += x;
    return x;
  }
}

let tanakaWallet = new wallet('田中', 1000);
let satoWallet = new wallet('佐藤', 1000);
satoWallet.income( tanakaWallet.payment(500) );
alert( tanakaWallet.show() );
alert( satoWallet.show() );

 ②

違和感はありますが、「javascriptに限った範囲では」それほど間違ってはいないと思います。 
 

 ③

function wallet(name, cash){
    this.name = name;
    this.cash = cash;
}
wallet.prototype.show = function(){
  return `${this.name}のお財布には${this.cash}円入っています。`
}
wallet.prototype.payment = function(x){
  this.cash -= x;
  return x;
}
wallet.prototype.income = function(x){
  this.cash += x;
  return x;
}

let tanakaWallet = new wallet('田中', 1000);
let satoWallet = new wallet('佐藤', 1000);
satoWallet.income( tanakaWallet.payment(500) );
alert( tanakaWallet.show() );
alert( satoWallet.show() );

 「prototypeによる書き方は全て除く」を読み落としていたので、③を再回答

let wallet = class{
  constructor(name, cash){
    this.name = name;
    this.cash = cash;
  }
  show(){
    return `${this.name}のお財布には${this.cash}円入っています。`
  }
  payment(x){
    this.cash -= x;
    return x;
  }
  income(x){
    this.cash += x;
    return x;
  }
}

let tanakaWallet = new wallet('田中', 1000);
let satoWallet = new wallet('佐藤', 1000);
satoWallet.income( tanakaWallet.payment(500) );
alert( tanakaWallet.show() );
alert( satoWallet.show() );

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

  • 解決済

    javascript prototypeのインスタンスに関して

    初めまして、javascript prototype/インスタンス化に関しての質問です。 使い始めてから日が浅いので不手際ございましたら申し訳ありません。 またコードに不備があっ

  • 受付中

    prototypeについて

    すべてのオブジェクトはプロパティを持っている ←わかる。 prototypeプロパティはコンストラクタ(に定義しているメソッド)のprototypeオブジェクトを参照している。←ち

  • 解決済

    javascriptでメソッドを定義する際にprototypeを使う理由を教えて下さい

    javascriptについてまだ理解が浅いので分かるように教えていただきたいのですが、 javascriptでメソッドを定義しようとするときに「prototype」をつかって定義す

  • 解決済

    return this; について

    あるコードをみていて、 javascriptのクラスの定義時に プロトタイプのメソッドの中に return this;としているのは、なぜでしょうか? また、prototy

  • 解決済

    [[prototype]]とprototypeと__proto__について

    お世話になります。 [[prototype]]とprototypeとprotoの違いを端的にご教授をお願い致します。

  • 解決済

    javascriptのlengthプロパティにつきまして

    お世話になります。 var a = [5, 10]; alert(a.length); // → 2が表示される 当たり前のようにある、JSコードですが、ちょっと謎で

  • 受付中

    this.className #btn.pushed;

    <!DOCTIPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>おみくじ</title> <

  • 解決済

    なぜメンバも一緒に表示されるのか

    javascriptにおいて連想配列ではない配列を、連想配列で使うfor inで、下記のように処理をすると var hairetu = ["あ","い","う"]; Array

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

  • JavaScript

    16348questions

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