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

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

ただいまの
回答率

88.57%

APIやJavascriptという言葉の意味について教えて欲しいです。

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 10
  • VIEW 4,030

chiba_kun

score 16

※回答文で指摘されているように、私は「仕様」という言葉の意味を履き違え文章を記していたようです。。恥ずかしい。。;;

経緯

ウェブフロントの関する記事を読んでいると分からない単語がいくつも出てきます。

最近分からなかったのは「DOMはAPI」であるという文脈です。

私の中でのAPIの解釈は、外部のプログラムを簡単に使えるようにしたもの、またはそのプログラムを使わせてもらう為の窓口という解釈でした。

DOMとはjsファイルから容易にHTMLファイルを弄れるやつくらいの解釈です。

なので「DOMがAPI」という文脈を読んだ時の私の頭の中は

「APIって外部のプログラムの簡単に使えるあれでしょ、DOMってjavascriptという言語の仕様の一部なんじゃないの。何でDOMがAPIなの?」

という感じでした。

調べてみたこと考えてみたこと

ということで疑問だったので調べてみることにしました。参考にしたのが以下の記事です。

javascript wiki

API wiki

API MDN

記事の内容は難しく全ての内容は分かりませんでしたが、何となくの意味は分かったような気がします。

私が知っていたAPIの意味は狭義の意味で、いわゆる「webAPI」や「サードパーティAPI」。

しかし、APIにはいくつか種類があり、ブラウザAPIと呼ばれるものもあるんですね。

前述のとおりAPIは各種システム/サービスがそのシステム/サービスを利用するアプリケーションに対して公開するインタフェースである。APIの重要な役割は、システム/サービス提供者が公式に仕様(外部仕様)を定義し管理している各種機能を利用するための操作方法(インタフェース)を提供することである。

上記はAPI wiki からの引用文です。この引用文にはAPIは外部の仕様を指すという旨が書かれています。

ブラウザAPIというものがあるのは理解したけれど、でも何でAPIという呼ぶのは依然よく分かりません。

前述した通りAPIは外部の仕様、もしくはそのインターフェースを指し、DOMはjavascriptの仕様の一部だと思っているからです。

そんな訳で、そもそもDOMとはjavascriptの仕様ではないのかもしれない。そもそもjavascriptって何だ?というところに疑問が深まっていきました。

そんな時に以下のサイトを思い出しまsi
た。javascriptに関する説明を記載したウェブサイトです。

javasscriptの説明

画像はリンク先のサイトのスクリーンショットです。ECMAscriptという仕様に色々なものが肉付けされ、それがjavascriptだという旨が書かれています。

イメージ説明

質問

ECMAScriptという仕様に、DOMやwebglなどの色々な仕様をあわせたのがjavascript。ECMAscriptという仕様から考えると、DOMやwebglは外部の仕様なので、APIという枠組みに入る。

自分なりに考えてみた結果、こんな感じの解釈になったのですが、はたしてこの解釈は当たっているのでしょうか?教えて欲しいです。

※正直こんな言葉の意味について深く知る必要は全くないのですが、疑問を深堀りしていったら凄く気になってしまって質問を投稿しました。

追記

言葉を意味を間違え文章を書いていたため、改めて質問文を書きます。

APIとは、あるコンピュータプログラム(ソフトウェア)の機能や管理するデータなどを、外部の他のプログラムから呼び出して利用するための手順やデータ形式などを定めた規約のこと。

引用文のリンク

APIとは外部のプログラムを使う為の手順や規約だという旨が書かれています。

※文脈によっては手順や規約ではなく、外部のプログラム自体をAPIと呼んだりするみたい?

そしてDOMはAPIです。

webAPIを使う時はAPIシークレットとAPIキーが必要でした。しかしDOMを用いてHTML操作をする時、特別な手順などを特にに意識することなくHTML操作が出来ました。なのでDOMはJavascriptという言語の中の一つの仕組みだと思っていました。

しかしAPIということは外部のプログラムもしくはその手順。ということはDOMはjavascriptの中の一つの仕組みではないのかな。

もしかするとECMAscriptという標準から考えると、DOMは外部のプログラムということになるから、DOMはAPIという括りに入るのかな?

という感じです。表現がつたなく言葉がくだけてしまいましたが、こんな感じです;;

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • kei344

    2020/01/03 21:25

    WikipediaにはNode.jsにも触れられていますが、そのあたりは読まれていますか?

    キャンセル

  • chiba_kun

    2020/01/03 22:16

    コメントありがとうございます!
    参考先のリンクとしてはったサイトについてですが、関係がなさそうな部分やとても難しく自分には理解できそうにない部分については、読み飛ばしてるところもあります。すみません。。
    node.js関する知識はあまりなく、サーバサイドでECMAScriptが動かせる実況環境くらいのことしか分かっていません。コメントで質問されるということは、そこに何かしらのヒントがあるはずだと思い、コントロールFでnode.jsで検索をかけ、その辺りについて読んではみましたが、疑問の解決には至りませんでした。すみません。。;;

    キャンセル

  • kei344

    2020/01/03 22:33

    解決したようですが、本文中の「JavaScript」は大文字小文字が正しくありませんので、修正することをお勧めします。

    キャンセル

回答 3

checkベストアンサー

+12

こんにちは、chiba_kunさん

質問拝見しました。

下記解釈が正しいかとのことですが、

ECMAScriptという仕様に、DOMやwebglなどの色々な仕様をあわせたのがjavascript。ECMAscriptという仕様から考えると、DOMやwebglは外部の仕様なので、APIという枠組みに入る。

大枠、正しく理解されていると思います。
少し補足させていただくとすると、

いま、一般的に利用されてされているJavaScriptの実行環境は、

  • Browserなどで利用されるクライアントサイドJavaScript
  • Serverなどで利用されるサーバーサイドJavaScript(node.js)

の2つに大きく別れます。
DOMやWebGLについては、主にクライアントサイドで利用される機能です。

最近分からなかったのは「DOMはAPI」であるという文脈です。

上記の観点から説明を加えると、「DOMはブラウザにおいて実装されている機能群」のようなものです。
以下のリンクはもうご覧になっているかもしれませんが、

DOM の紹介の「DOM と JavaScript」の項目で、

DOM はいかなるプログラミング言語からも独立して作られていて、一つの一貫した API から構造的な表現を作ります。このリファレンスでは、 JavaScript に特別な焦点を当てますが、DOM の実装はいかなる言語でもできます。ここに、 Python の例を挙げます。

と書かれているように、DOM自体はJavaScriptのみに対しての実装というわけではありません。なので、各言語から、ブラウザの「文書」にアクセスするための一貫したインターフェースを提供しているという意味「仕様」を示しているので、「DOMはAPI」と表現しても、差し支えはないと思います。

「仕様」については以下のリンクで規定されています。
DOM

余談として、最近はモダンブラウザという新しいブラウザが利用されることが多くなり、ブラウザごとの差異はだいぶ減ってはきたのですが、まだ特定のブラウザでは利用できない機能などが存在します。DOMを含めたWeb APIが利用できるブラウザは以下のサイトで確認できます。

Can I use

以上、雑多な感じとなりましたが、参考になれば幸いです。


2020/01/07 9:34追記
コメントを受けて、「仕様」の項目を追加しました

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/01/03 22:30

    回答ありがとうございます!
    DOMがPythonでも使えるということは、完全に独立した機能なのですね。
    知りませんでした、めちゃくちゃ驚きました。。!
    参考どころか疑問の解決に至りました!
    ところどころ私の質問文におかしなところがあったのですが、私の質問の意図を汲み取っていただいて、ほんとうに感謝です;;
    以前にも回答をくださかった方ですよね!今回もとても助かりました。ありがとうございます!;;

    キャンセル

  • 2020/01/07 09:05

    横から失礼。
    > DOMがPythonでも使えるということは、完全に独立した機能なのですね。
    という部分の「機能」の解釈が広義すぎて、これを「実装のみ」と誤解している人がたくさんいます。
    「機能」という抽象的な言葉は、「仕様(Specification)」と「実装(Implementation)」に分けて考えることが重要です。
    DOMの「M」は「Model」の略であり、APIの「I」は「Interface」の略です。ModelもInterface共に「仕様」を言い換えた用語にすぎません。つまりDOMやAPIは「実装」ではないということです。
    DOMという「共通モデル(仕様・ルール)」が規定されており、その仕様に従ったJavaScriptでの具体的な実装やPythonでの実装が提供されているということです。

    キャンセル

  • 2020/01/07 09:26

    amadablamさん

    補足ありがとうございます。確かに「仕様」と「実装」を明確に表現できていませんでした。


    chiba_kunさん

    上記で言う「仕様」は以下のリンクで規定されていますので、参考にしていただければと思います。
    https://dom.spec.whatwg.org/

    キャンセル

+6

この引用文にはAPIは外部の仕様を指すという旨が書かれています。 

は、「外部仕様」という言葉のことを言ってるのですかね?

「外部仕様」「内部仕様」というのは、システム設計の用語です。
外部仕様・・・・システムがどういう動作(WHAT)をするか規定したもの
内部仕様・・・・その外部仕様をどのように実現(HOW)するかの記述

自販機の外部仕様・・・お金を入れて品物に対応するボタンを押すと品物が出てくる(をもっとちゃんと書いたもの)
自販機の内部仕様・・・直径や重量センサー、光学センサーで硬貨の識別をし、(以下略)

teratailAPI・・・teratailの質問・回答データベースに対して、HTTPでどういうリクエストをすればどういうレスポンスがあるかを規定した外部仕様

DOMは、ブラウザの保持するHTMLデータに対して、どういう関数を呼べばどういう結果を返してくれるかを示した外部仕様です。

外部仕様のうち、プログラムから利用することを目的として書かれたものがAPIです。
(「お金を入れてボタンを押す~」は外部仕様だがAPIじゃない)
(呼び出す側が「アプリケーション」と呼べないようなもの例えばOS Kernelの場合にAPIと呼ぶかどうかは微妙か)

追記

質問に回答していませんでした。

JavaScriptはECMAScriptをベースに、各ブラウザ開発者がそれぞれ独立して実装した言語です(歴史的な矢印は逆向きですが)。現在ではブラウザの外で動くJavaScriptもありますが。

元祖JavaScriptと言えるMozillaサイトのJavaScriptリファレンスでは、DOMやconsole.log()などについては別建てとなっています。それらが記述してある「WebAPI」のページには、

Web API は通常 JavaScript とともに使用されますが、常にそうとは限りません。

とあります。当然、ECMAScriptにもそれらは無いわけで、DOMなどはJavaScriptの外であると考えられているようです。

あと、

APIとは外部のプログラムを使う為の手順や規約だという旨が書かれています。 

まだ間違えていますね。引用している部分の記述とは、「外部」の向きが逆方向です。
文章は名詞だけじゃなく助詞も正確に読み取りましょう。

また、

webAPIを使う時はAPIシークレットとAPIキーが必要でした。

それらが必要ない(利用者登録不要の)WebAPIなどいくらでもあります。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/01/03 21:46

    ありがとうございます!
    実は仕様という言葉も意味がよく分かっておらず使っていました。勉強になりました。
    あと間違えていたのがすごく恥ずかしいです;;
    改めて質問文を書きますね!

    キャンセル

+3

記事の内容は難しく全ての内容は分かりませんでしたが

次の2つは別のものとして考えます。

  1. JavaScript はECMAScript の仕様に基づいて実装された「プログラミング言語」です。
  2. API はご質問でもリンクされている API MDN の「APIって何?」のセクションの通りです。

Application Programming Interfaces (APIs) は、開発者が複雑な機能をより簡単に作成できるよう、プログラミング言語から提供される構造です。複雑なコードを抽象化し、それにかわる簡潔な構文を提供します。

「プログラミング言語から提供される構造」とありますが、
「プログラミング言語で利用できるように提供される構造(機能)」と解釈すると良いかもしれません。

APIは、他のプログラミング言語でも実装され利用できたりもします。

  • DOM はマークアップ文書の作成、変更を簡便にするAPI
  • WebGL は OpenGLの機能を絞ったものでビデオカードの3Dグラフィックス描画を簡便にするAPI
  • XMLHttpRequestやfetchは HTTP通信を利用してデータのやり取りを簡便にするAPI

APIは「webAPI」や「サードパーティAPI」とカテゴライズして表現されることもありますが、
プログラミングにおいて、何かしらの処理を簡便にするために提供されます。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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