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

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

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

ECMAScriptとは、JavaScript類の標準を定めるために作られたスクリプト言語です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

1867閲覧

JavaScriptやHTMLの言語処理系の原理・仕組みについての勉強の仕方を教えてください。

WeilSpinor

総合スコア170

ECMAScript

ECMAScriptとは、JavaScript類の標準を定めるために作られたスクリプト言語です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2019/03/31 10:21

プログラミング初心者です。
コードを書きながらの実践メインでJavaScriptやHTML、PHPの勉強をしているのですが、
度々つまることがあり、その多くが、

言語処理系の原理・仕組みという根幹の部分に関係していることが多い

と思いました。
そこで、そこらへんの基礎の勉強を、ある程度抑えておいた方が、
効率よく進められると思い、
やりたいと思っています。

たとえば、
・関数の開始と終了のモデル
・JavaScriptにおけるスタックやキューの原理(いわゆるFIFO,LIFOのモデル)
・上の原理を用いた同期処理と非同期処理の違いの説明
・HTMLドキュメント中のエレメントと、JSのスクリプト内の変数の同期性について
・JavaScriptにおける『参照』(C言語で言うポインタ)の考え方

こういった基礎的な話をを、ある程度ちゃんとまとめて説明してくれている文書や書籍はありますか?

(その場その場でわからないことを調べる、とした方が、確認の反復回数が増えるので記憶の定着という面では良いのですが、原理的な話はある程度予備知識として入れておかないと、混乱が大きくなり、トータルで損すると判断しました。)

ご回答宜しくお願いします。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

勉強スタイル

疑問が次から次への湧いてくる WeilSpinor さんには「正確で網羅的な情報」が必要なのでしょう。
しかし、それを使いこなすには相応の基礎知識が必要です(時間を書ければ、初心者にも出来るとは思います)。

過去に私は「自分自身で自分が理解できるリファレンスを探すこと」をお勧めしました。
が、いばらの道を進みたいのであれば止めません。

仕様書

Web標準の仕様書を読んでください。そこにWeb標準機能の全てがあります。

書籍

JavaScriptに関しては『JavaScript 第6版』がかなり仕様に近い内容です。
やや情報が古いため、最新機能は網羅していませんが、基礎知識を得るには十分でしょう。

HTML, CSSは仕様書の日本語訳を活用して下さい。

過去ログ

下記に全てを書き尽くしました。

言語処理系

言語処理系の原理・仕組みという根幹の部分に関係していることが多い

改めて読んで気が付きましたが、言語処理系ですか。
仕様ではないなら、上述は無視して下さい。

Firefox や Chromium のソースコードを解読して下さい。
クローズドソースのブラウザは、ブラウザベンダーの公式サイトに出ている情報が全てです。

更新履歴

  • 2019/03/31 20:27 「言語処理系」を追記

Re: WeilSpinor さん

投稿2019/03/31 11:01

編集2019/03/31 11:28
think49

総合スコア18164

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

回答

個人的な見解としては、
プログラミングを理解するには原理原則をある程度理解している方が長い目で見ると効率が良い
という意見には賛成です。

そのために必要な情報としては
https://teratail.com/questions/180593

hayataka2049さんの回答が的を射ていると思いますが、
それで足りないと思う理由は何でしょうか?

ITパスポート、基本情報、応用情報の教本などでいいと思います。というかこれらの資格を取るのがおすすめです。

この辺を一通りクリアすれば、基礎的な用語や概念は理解出来ますし、各リファレンスを読破するのに比べれば数十~数百倍くらいは効率的な学習が出来ると思いますよ。
これらの資格試験にはweb開発には関係ない分野の学習も含まれていますが、それを含めても効率的に学習できる内容だと思います。

一般的には応用情報に合格するには500時間くらい勉強すれば足りるとされていますが、500時間くらいでプログラミングを学習する下地が得られるのは「かなり効率が良い」と思います。
(勘が良い人なら1-2カ月くらいの学習で合格しちゃうので、実際はもっと効率が良いことが多いです)

「効率が良い」が数時間や数日というという範囲を想定されているのであれば、
求めている範囲が広すぎるのでそんな教材は存在しない
という回答になります。

感想

以下はWeilSpinorさんの過去の質問を眺めての感想です。

プログラミング初心者です。
コードを書きながらの実践メインでJavaScriptやHTML、PHPの勉強をしているのですが、
度々つまることがあり、その多くが、

言語処理系の原理・仕組みという根幹の部分に関係していることが多い

と思いました。

質問を読む限りはかなり高い確率で思い違いというか、誤解だと思います。

前述の通り、原理原則を理解することは効率よくプログラミング学習を行うための下地になると考えますが、詰まっているところは原理原則やアルゴリズムでは無く、もっと表面に近いところに見受けられるためです。

敢えて、たとえ話をすると、WeilSpinorさんの質問の多くは以下の様な状態です。

  1. 自動車の運転を習得したいと思っている(アプリケーションを開発出来る様になりたい)
  2. アクセルどれだけ踏めばどれだけ前に進むと教本に書いてある(リファレンスの存在は知っている)
  3. その通りに踏んでみるとその通り進むことは確認出来た(サンプルコードを動かすことは出来た)
  4. 自分で設定したゴールまで進もうとすると上手くいかない。(自分で作ろうとすると、うまくいかない)
  5. 教本を読もうとしたら知らない単語があり、自動車のエンジンとアクセルの構造を知らないと設定したゴールまで進めない気がするので、自動車のエンジンの構造とアクセルの構造がお手軽に理解できる教本を教えて下さい。(上記引用部分)

これはこれで間違ってはいないというのが回答内容ではあるのですが、最短コースでは無い事も確実で、「プログラミング初心者を脱したい」というのがゴールなのであればかなりの遠回りな質問です。

自動車そのもの(ブラウザとかプログラミング言語)を設計/制作したいのであれば必要な知識ですが、自動車を使う人が学ぶには重要度が低い内容であるからです。

アプリケーション開発者に必要な事

アプリケーション開発の目的は「プログラミング言語によって目的を実現すること」です。
自分で設定したゴールを積み上げて、大きな目的をクリアすることです。

上記で言うところの4をクリアし続ければ大きな目的を達成できるわけです。

4の状態をクリアするために効率的な方法は

  • アクセルとは何か? → 足元にあるペダルの一つ。向かって右側にある方。
  • アクセルを踏むとはどういう動作なのか → アクセル板が下に下がるように足で加重をかけること

を理解し、

  1. アクセルをどれだけ踏めばどれだけ車が進むかが記述してある説明書を読んで、設定したゴールまで進むにはどれだけ踏めばいいかを仮定する
  2. 仮定した結果を実際に実行してみて、仮定が正しいかどうかを確認する
  3. 仮定が正しくなかった場合は、「アクセルとは何かを取り違っていないか?」「アクセルをどれだけ踏むの理解が間違っていないか?」を確認し、再度仮定を立てて確認を行う

という事です。
2と3を繰り返すために必要なことは
エンジンの構造を知ることでは無く、
「アクセルとは何か」、「アクセルを踏むとはどういう動作か」

「アクセルをどれだけ踏んだらどれだか進むと教本に書かれているのか?」
「どうすれば仮定と実施、検証を繰り返すことが出来るのか?」
を理解することです。

単語の理解について

そんなこと言っても教本に書かれている単語が理解できないんじゃ無理じゃない?
まずは単語を理解出来る必要がある(言語処理系の原理・仕組みの理解に問題があると思う)

という発想に至るのも理解できます。

が、「単語」まで来るとこれは英単語(自国語でも同じですが)の学習と同じで、辞書を引いてみてざっと意味を理解して、用例を何度も読んで、演習問題を解いてみて、実際に使われている例を読んで、実際に会話や作文に使ってみて、その単語が意味する内容を理解するしかありません。

その結果として単語をかみ砕くことなくそのままイメージとして理解し、説明が出来る様になれば理想的な状態と言えます。

全ての初学者に対して頻出単語とその成り立ちを全部いい感じに体系立ててまとめて説明してくれる教本

というのはなかなか存在しないと思います。
「中学一年一学期用」ぐらいまでで限定すればあるかもしれません。

学習者の数が英語に比べると数%も無いような分野であれば、書籍として出版されていたり体系的にまとめられている可能性はかなり低くなります。

その中でも敢えて挙げれば、検定試験の学習は広く薄く体系立ててまとまっていますが、とても広範囲についてまとまっているので、「webアプリケーション開発」に限って言えば広すぎるかもしれません。

そのため、リファレンスや辞書を毎回引いた方が効率が良いことも多いですし、「検定試験の勉強でプログラミングスキルがつかない」という主張も否定できるものではありません。

プログラミング言語の特長と全プログラマが行っている事

幸いなことに全てのプログラミング言語は
「書いたようにしか動かない」
という学習に適した特長を持っていますので
「このリファレンスの記述をこう理解したから、こうコーディングしてみた。
想定通りに動かなかったのでこの理解は間違っている。」

という繰り返し学習がしやすいです。

高レベルの開発者ほど、この繰り返しの効率や方法論が優れていて、
その方法論がこれまで他の質問で繰り返されてきた回答に表れています。
リファレンスを読んで、その解釈に基づいて仮定を作って実装し、想定通り動かなかったら解釈が間違っているので解釈が間違っているので解釈を見直すことを繰り返す
です。

お勧めの学習法

とは言っても、
いきなりリファレンスとにらめっこしたり、独自機能を実装するのはハードルが高いのも事実だとは思います。

お勧めの学習方法としては

  • 一つのアプリケーションを教本に沿って作り、内部構造を理解する
  • 上記アプリケーション(仕様を詳細に把握している、作り方を大まかに把握している状態)をリファレンスを見ながら自力で作ってみる

です。

そのためには、まずは一つのアプリケーションを書籍に沿って作るために
m6uさんの回答
にあるような条件に
「書籍中でサンプルアプリケーションを作り上げている事」を追加して探してみて、
書籍中で作られているアプリケーションをとりあえず作り上げる、それぞれの部品が何をしているか理解する。

ことをお勧めします。

ポイントは

  • 全条件に合致する書籍はそんなに無いので、使いやすそうなものが見つかったら、多少の条件が外れていてもそれに決める
  • 色々躓くことや、理解しきれない部分も途中に出てくると思いますが、それに拘りだすと現状と同じ状態に陥るので、練習だと思ってとにかく本を一冊クリアすることを最優先する。
  • 理解できたと思ったら自分で作ってみる、作れなかったら理解が足りないということなので、その部品を構成しているところに絞ってリファレンスを参照して調べて理解する。
  • 全く作り方も思いつかなければ、書籍を最初からやり直す。

を繰り返すことです。

過去に専門学校で教えていた経験(+自分が初学者の時の経験)だと、上記の方法で
真面目に取り組みさえすればほぼ全員が半年(自己学習も含めて週6時間くらいの学習時間*26週 = 156時間)で、
PHPマニュアルを参照しながら基礎的なwebアプリケーションを自力で設計出来る様になっていました。

独習の場合は教師が居ないので効率は下がるでしょうが、自分が書いたとおりにしかプログラムは動かない=変な動きは自分の仮定かコーディングがミスっているという原則さえ忘れなければ、独習でもなんとかなると思います。

投稿2019/03/31 13:42

編集2019/03/31 14:20
tanat

総合スコア18713

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

WeilSpinor

2019/03/31 15:31 編集

ご回答ありがとうございます。参考にさせていただきます。 私も別に、 「『実際に体験する』より先に、机上のお勉強ばかりしようとする『頭でっかちのぶきっちょ』」 になりたいわけではないんです。(語弊のある言い方ですみません) >教本を読もうとしたら知らない単語があり、自動車のエンジンとアクセルの構造を知らないと設定したゴールまで進めない気がするので、自動車のエンジンの構造とアクセルの構造がお手軽に理解できる教本を教えて下さい。 さすがに、この発想が的外れである、ということは理解できます。 英語学習の例で挙げられましたように、 **細かい動作原理はブラックボックスのまま、例題やドリル方式で実践演習する中で覚える方が自分には向いている** と思っています。 しかし、**それが通用しない場面に度々出くわします。**  (例)コールバックの勉強をしたいが、自分から使う機会も発想もない。     →なら「1日3問、10日で完成! 小学生のためのコールバック関数ドリル」的なものを探そう。     →そんなものは都合よく見当たらない。     →結局コールバックを知らないまま終わる。     →数日後、Ajaxの勉強で非同期処理の理解を迫られる。     →また、サンプルコードで、setTimeoutやsetInterval、addEventListenerなどの非同期処理メソッドをやたら見かけるので、やはりコールバックを勉強しておこうと思う。     →頑張ってもう一度コールバックについてリサーチする。     →見つけるも、あまりにミニマムすぎて使い方がよくわからない。     →もっと実践的な使い方を調べるが、難易度が     →良い感じのサイトを見つけたが、jQueryを使っている。(初心者なのでjQueryは知らない)     →ネイティブjsで書いている良い感じのサイトを見つけたが、なんか挙げている例がやたら高度でわかりにくくて、そっちの解析に苦労する。(落ち着いてコールバックの理解に取り組めない) …そんな感じで、コールバックだけを勉強したいのに、コールバック以外のたくさんのノイズに邪魔される、といったことが起こりがちで、それならそうしたノイズも乗り越えられるような体力をつけるために、原理の勉強をしよう、という発想になるのですが…。 また、英会話学習のようなものとプログラミングの違うところは、 英語は理論や論理は後付けなのに対し、 「プログラミングは論理の塊である」という点です。 英会話に対して言語学的構造理解はほとんど重要ではないとおもいますが、 アプリ制作に対してプログラム言語の動作原理理解は、ほどほどに重要な気がしました。 でも、本当は、それも肌身で経験して覚えるべきことだというのは理解していますし、 そんなことせずとも英単語のお話のように、反復で行きたいですが、 そもそもドンピシャな参考書がすぐには見つからない…。 まぁ、こういうのは、国民に対する学習者のパーセンテージが少ない分野においては避けられないことなんでしょうね…。そこは、、気合で乗り越えるしかないですかね。
WeilSpinor

2019/03/31 15:21

おすすめ学習法はとても参考になったので、試してみたいと思います。 ご回答ありがとうございました。
tanat

2019/03/31 16:24

> 「『実際に体験する』より先に、机上のお勉強ばかりしようとする『頭でっかちのぶきっちょ』」 になりたいわけではないんです。(語弊のある言い方ですみません) そこは誤解していないと思っています。 「基礎的な部分の理解不足」を学習が進まない原因と判断してしまっているのだという認識です。 > **細かい動作原理はブラックボックスのまま、例題やドリル方式で実践演習する中で覚える方が自分には向いている** 「誰の理解度にも合致した参考書」というのはとても作りにくく、結果として出版もされません。 (人口比だけでは無く、新しめの言語だと仕様も頻繁に変わるので) そのため、自分がわかる範囲で仮定を立てて(自分で例題を作って)解いていく、少しずつ分かる範囲を増やしていくしか無いです。 (そのための一番最初の例文としてはリファレンスに記述されているサンプルコードを使うのが良いでしょう。) 自分でこの作業が出来ない場合は独習は諦めるしかないくらい重要な事だと私は思います。 (プログラマとして仕事していても、出来ない人は結構います。そういう人は年齢が上がると例外無く淘汰されます) >(例)コールバックの勉強をしたいが、自分から使う機会も発想もない。 この動機で学習を進めるのは多くの開発者にとって厳しい条件です。 プログラミング言語やその機能はあくまで手段であって目的では無いからです。 (「なんかよくわからんがロシア語を勉強すると良いらしい」 で、ロシア語の勉強を進められる人はほぼいないのです。) 先に作りたいものを決めて(ロシアからキャビアを買い付けたいとかそういう具体的な事)、その手段としてコールバック(ロシア語)が必要という事であれば、 例題も作りやすいかと思いますよ。 > →見つけるも、あまりにミニマムすぎて使い方がよくわからない。 > →もっと実践的な使い方を調べるが、難易度が ここのプロセスが問題です。 理解するには、ミニマムな状態のまま、ほんの少しずつ変更を加えて例題を作って解いてみる作業が必要です。 例えば「Javascript コールバック 入門」とかで検索してみると、この「ほんの少しずつ変更して、仮定を立ててサンプルコードを書いてみる」という作業を様々な人がしているのが見当たります。 これを読んだりリファレンスと見比べたりすると、どういう作業が必要なのか見えてくるかもしれません。(残念な記事もあるので、あくまでベースはリファレンスにするのもポイントです) ここをすっ飛ばして「実践的な使い方」のソースコードを探そうとすると > コールバックだけを勉強したいのに、コールバック以外のたくさんのノイズに邪魔される、といったことが起こりがち という事態になるのは当然のことです。 実践的な使い方=いろいろな機能が使用されている 状態ですから。 (意図せずに)自分でノイズを乗せてしまって、そのノイズに邪魔されている状態に見えます。 > 本当は、そんなことせずとも英単語のお話のように、反復で行きたいですが、 > そもそもドンピシャな参考書がすぐには見つからない…。 > こういうのは、国民に対する学習者のパーセンテージが少ない分野においては避けられないことなんでしょうね…。そこは、、気合で乗り越えるしかないですかね。 ・お金と時間を払って例題を用意してもらう(学校に通ったり、メンターを雇ったり) ・気合で自力で例題を作れるようになる。 のどちらかですね。 モチベーションが保てるのであれば、専門学校に通うというのはコストパフォーマンスに優れる方法の一つだと思いますよ。
WeilSpinor

2019/04/01 07:03

ご返信ありがとうございます。 本当は自分も、素直に学校に通うなり、メンターを雇うなりするのが良いと思うのですが、貧乏人なので仕方なく独学でやっています。 分野の先端技術(wicketとか)は独学が難しいかもしれませんが、 プログラミング自体の人口は多いですし、初心者レベルの基本的な話については、独学でもできることはあると思うので、とりあえずやってみます。 それに、何事も、結局人間は独学できる能力を身につけないと生きていけない気がするので、その訓練という意味でも、やってみたいと思います。 独学方法のアドバイス、大変参考になりました。 プログラミングに限らず、今後道に迷ったときに、何度もご回答を読みかえさせていただきたいと思います。
guest

0

度々つまることがあり、その多くが、

言語処理系の原理・仕組みという根幹の部分に関係していることが多い
と思いました。

今までの質問を見ている限り、誤解をもとに明後日の方向へ考えを進めているから行き詰まっているようにしか見えません。

逆に、「中の仕組みは考えず、書いてある仕様の通り動く」ということを徹底していったほうが、現段階ではいいと考えます。

投稿2019/03/31 10:24

maisumakun

総合スコア145184

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/03/31 10:32

これまでの指摘や回答、全く伝わってなかったんですね…
WeilSpinor

2019/03/31 10:39

ご回答ありがとうございます。 >逆に、「中の仕組みは考えず、書いてある仕様の通り動く」ということを徹底していったほうが、現段階ではいいと考えます。 サンプルコードを打ち込むだけだったら、わりと通用するのですが、 実際は新しい関数や概念を覚えたら色々自分で作りたいと思ったものを実装しながら勉強していくので、難しいですね…。 中の仕組みはそこまで説明せずに、困らない程度に使用をわかりやすく説明している、そんな良い参考書を見つけるしかないですかね…。
m.ts10806

2019/03/31 10:43

関数ならリファレンスの引数と返り値だけ見ればいい話なのに。
maisumakun

2019/03/31 11:22

コードは書いたようにしか動きません。狙った通りに動かないときは、根拠のない「推測」ではなく、実際に動かしてみたコードにデバック出力を仕掛けて、どこがどのように動いているか確認してみましょう。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問