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

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

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

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

Q&A

解決済

5回答

2357閲覧

javascriptの勉強方法

tony

総合スコア86

JavaScript

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

0グッド

3クリップ

投稿2015/01/23 03:40

javascriptが全くのド素人前提で
どのように勉強を進めていったらよいでしょうか?

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

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

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

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

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

guest

回答5

0

初めは基礎を覚えてそこからレベルを上げていきましょう。
初めに覚えておくといいと思うのは

lang

1var a=50; 2console.log(window.a)//50

グローバルに定義した物はwindowオブジェクトのプロパティになることでしょう。
次にJavaScriptは関数スコープを持ちます。同名であっても関数内で宣言した物はローカル変数になります。

lang

1var a=50; 2function b(){ 3 var a=20; 4 console.log(a); 5}; 6b();//20 7console.log(a);//50

しかし例外があります。それが次のようなコードです。

lang

1var a=50; 2function b(){ 3 c=45; 4 console.log(a); 5}; 6b();//50 7console.log(c);//45

関数内で定義した変数cが外部から参照できています。これは変数宣言にvarを付けなかったのが原因です。
基本的にこのような書き方は変数の有効範囲を認識しづらくし、バグの原因になることが多いです。

lang

1//イベントのセットですが様々な書き方があります。 2window.onload//documentのload完了時 3window.addEventListener("load",function,useCapture); 4//<div onclick="function">など

addEventListenerを使用するのが良いと考えますがIE8以下では使えません。その点を補助するコードやライブラリを使用することを検討してもいいでしょう。しかしながらまずは基礎を覚えるといいかと。
また他のコードとの変数等の激突を防ぐため、グローバルは極力減らせるほうが好ましいと考えます。その際役に立つのが即時関数です。

lang

1 2(function (_Str){ 3 var _String=_Str+"CODE"; 4 console.log(_String);//TESTCODE 5}("TEST")); 6 7console.log(_String);//undefined

他のことに関しては徐々に覚えていくといいと思うので以下単語と概要だけ。
クロージャ:ローカル変数を保持することができる。現状プライベートに近いものを実現できる方法の1つ。
プロトタイプチェーン:そのオブジェクトが持たないプロパティをprototypeを辿り、見つけた場合それを使うという一連の処理のこと。JavaScriptのオブジェクト指向はクラスベースではなくプロトタイプベース。
メソッドチェーン:オブジェクトのメソッドが自身のオブジェクトを返すことによって連結してメソッドを実行できること。

lang

1function OutputWrapper(_String){ 2 OutputWrapper.prototype.Value=_String; 3 OutputWrapper.prototype.SetValue=function (_String){ 4 this.Value=_String; 5 }; 6 OutputWrapper.prototype.Console=function (){ 7 console.log(this.Value); 8 return this; 9 }; 10 OutputWrapper.prototype.Alert=function (){ 11 alert(this.Value); 12 return this; 13 }; 14}; 15//メソッドチェーンとプロトタイプチェーンを使用しています 16var Output=new OutputWrapper("TEST"); 17Output.Console();//TEST 18Output.Console().SetValue("AAAA");//TEST 19Output.Console().Alert()//console:AAAA alert:AAAA

書籍に関してですが私の手元にあるもので詳しく本気で勉強するのに向いているのは
・パーフェクトJavaScript 著:井上誠一郎 土江拓郎 浜辺将太
でしょうか。分かりやすく書かれた図鑑という印象です。理解を深めるにつれこの本を手元においていることが正しい判断だったと思えるようになる本だと思います。個人的には初級者から中級者向けかと。
また手元にはありませんが定番としてオライリーの
・JavaScript第6版
があります。何かおすすめがありますか?と聞かれてこれを答える人が多いと思います。しかしながらこれも前述のパーフェクトJavaScript寄りの内容の多い物でしょう。恐らく予想になりますがパーフェクトJavaScriptが知識寄りなのに関して、こちらは基礎をおさえたうえで実装と実践に関する知識に重きを置いているのではないでしょうか。(手元にある方の意見が伺いたいところ)

また判断に悩むところですが2ちゃんねるのスレッドなども参考にすると良いでしょう。最近は様々な問題を抱えており派閥、宗教戦争のような状態に見えます。得られる知識は以前に比べ実用的ではなく量も少ないと思われます。情報の取捨選択を行うべきでしょう。
自分が調べ続けている中でも様々なブログ、ホームページで実用的な知識、または検証結果などがあるため自分に合った資料となるサイトを見つけ出すことも大切でしょう。

その上で悩んだときはMDNを調べてみるのも手でしょう。一度目を通すことをお勧めします。

投稿2015/01/23 14:29

Cf_cwd

総合スコア730

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

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

tony

2015/01/23 18:10

まずは言語仕様からですよね。 パーフェクトシリーズは言語仕様に定評があるような記事を見かけた記憶があります。 MDNはWeb系にそんなに関わってこなかったのでノータッチでした。参考にします。
guest

0

ベストアンサー

ではドットインストールで勉強してはどうでしょう。
動画のため、ある程度時間は拘束されますが、1本あたりの動画時間はそれほど長くないため、こちらも空いた時間に勉強するのに適しているかと思います。

http://dotinstall.com/lessons/basic_javascript_v2

投稿2015/01/23 09:51

k.tada

総合スコア1679

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

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

tony

2015/01/23 10:46

紹介ありがとうございます。 ドットインストールはうわさには聞いていましたが利用したことはありませんでした。 こちらは日本語なので(笑)取りかかりやすそうです。 ちょっとまとまった時間がとれれば初歩的なことは一通り学べる感じですね。 さっそくやってみたいと思います。
guest

0

1)一通り基本を覚える
2)jQuery などの フレームワークの "便利さ" を痛感する
3)jQuery などの フレームワークの "重さ" も体感する

lang

1<!DOCTYPE html lang="ja"> 2<html lang="ja"> 3<head> 4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5<meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 6<script src="jquery.js"></script> 7<script src="jquery-ui.js"></script> 8<style> 9#debug { 10 font-family:"FixedSys"; 11 width: 100%; 12 height: 300px; 13 overflow:auto; 14} 15</style> 16<script> 17var DENTAKU = (function() { 18 function init() { 19 this.config = { 20 stack:[], 21 pos:0, 22 next:function() { 23 if (this.pos < this.stack.length) { 24 this.val = this.stack[this.pos++]; 25 } else { 26 this.val = null; 27 } 28 }, 29 reset:function() { 30 this.pos = 0; 31 }, 32 val:null 33 }; 34 } 35 init.prototype.express = function(s) { 36 var arr = s.replace(/\s*/g, "").split(/([+-]?\d*.?\d*[eE]\d{1,3}|[+-]?\d+[eE]\d{1,3}|[^\w])/g); 37 var arr2 = []; 38 for (var x=0;x < arr.length;x++) { 39 if (arr[x] != "") { 40 arr2.push(arr[x]); 41 } 42 } 43 this.config.stack = arr2; 44 this.config.reset(); 45 return this; 46 } 47 init.prototype.calc = function() { 48 var self = this; 49 self.config.next(); 50 print("@--------------------------"); 51 try { 52 var ans = _calc(self); 53 54 if (self.config.val != null && self.config.val != "") { 55 throw "unknown operand: " + self.config.val; 56 } 57 58 print("ANSWER: " + ans); 59 self.config.ans = ans; 60 return ans; 61 } catch (e) { 62 alert("ERROR: " + e); 63 return null; 64 } 65 } 66 function _calc(s) { 67 var left = _term(s); 68 69 while (true) { 70 if (s.config.val == "+") { 71 s.config.next(); 72 var right = _term(s); 73 print("add: L:" + left + " + R:" + right); 74 left = left + right; 75 } else if (s.config.val == "-") { 76 print("sub:"); 77 s.config.next(); 78 var right = _term(s); 79 print("sub: L:" + left + " - R:" + right); 80 left = left - right; 81 } else { 82 return left; 83 } 84 } 85 } 86 function _term(s) { 87 var left = _element(s); 88 89 while (true) { 90 if (s.config.val == "*") { 91 print("mul:"); 92 s.config.next(); 93 var right = _element(s); 94 print("mul: L:" + left + " * R:" + right); 95 left = left * right; 96 } else if (s.config.val == "/") { 97 print("div:"); 98 s.config.next(); 99 var right = _element(s); 100 print("div: L:" + left + " / R:" + right); 101 102 if (right == 0) { 103 throw "zero division."; 104 } 105 106 left = left / right; 107 } else if (s.config.val == "%") { 108 print("mod:"); 109 s.config.next(); 110 var right = _element(s); 111 print("mod: L:" + left + " % R:" + right); 112 113 if (right == 0) { 114 throw "zero division."; 115 } 116 117 left = left % right; 118 } else { 119 return left; 120 } 121 } 122 } 123 function _element(s) { 124 print("input: " + s.config.val); 125 126 var num = parseFloat(s.config.val); 127 128 if (isNaN(num)) { 129 if (s.config.val == "(") { 130 print("par:start"); 131 s.config.next(); 132 var left = _calc(s); 133 print("par:close, L:" + left + " , V:" + s.config.val); 134 if (s.config.val == ")") { 135 s.config.next(); 136 return left; 137 } else { 138 throw "')' expected."; 139 } 140 } else { 141 return num; 142 } 143 } else { 144 s.config.next(); 145 return num; 146 } 147 } 148 function print(s) { 149 document.getElementById("debug").value += s + "\n"; 150 } 151 return new init(); 152})(); 153 154window.onload = function() { 155 DENTAKU.express("(1 + (12 / 5) * 2").calc(); 156 DENTAKU.express("1e3 + 22").calc(); 157 DENTAKU.express("e3 + 22").calc(); 158 DENTAKU.express("3 / 0").calc(); 159} 160 161</script> 162</head> 163<body> 164<pre> 165【eval 使わない電卓】 166優先順位↑ 数値(符号付・指数)、左括弧 167    ↑ * / % 168    ↑ + - 169※eval 使わない、とは、使っちゃいけないのではなくて、eval する前にやっていいのか評価する仕掛けを入れなさいという意味。 170※このPGは、eval を使わないでさらに自前で解析する。 171     172</pre> 173<HR /> 174<textarea rows="10" cols="80" id="debug"></textarea> 175 176</body> 177</html>

追記ここから

-(1+2) とか計算できませんね。。。

  • と + の評価をしてないからです。

追記ここまで

数値を抽出する正規表現のところ、極めて遺憾ですが、、、、全然いけていません。

ここで一杯質問して、知識の幅を広げましょう。

jQuery は、ここから DL できますよ。
http://jquery.com/download/

このサンプルは、jQuery は読み込むけど使っていません。

投稿2015/01/23 04:10

ipadcaron

総合スコア1693

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

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

ipadcaron

2015/01/23 06:01

サンプルとしてはあまり適当ではないかもしれませんが、このソースには 配列の操作方法、再帰処理、字句解析、正規表現、文字列分割、先読み処理(正規表現の中身がやってるのと似たやり方)、jqueryのように、ドットで繋いでメソッドを記述する方法などが盛られています。かなり難しいかもしれないので参考にならないかもしれません。 理解できるようになれば、色々応用がきくかもしれませんね。 マイナス記号、プラス記号が処理出来ないですが、拡張できれば、電卓の完成です。 ** で階乗計算とか、/^ でルート計算とか、関数電卓も視野に入ります。 とりあえず、時間は一杯あるとおもうので、基本を押さえるように勉強してください。 解らないことは、ここで聞くなりして解決しましょう。 以上です
tony

2015/01/23 10:40

サンプルありがとうございます。 画面を開いたときにwindow.onload = で指定した関数が自動実行される感じですかね?(もはやそのレベル。。) 実行時に出るエラーはコメントにも書いている電卓の機能不足ですよね。0で割ったときのエラーだけは経験上すぐにわかりましたw if分やwhile分などの基本文法はJavaとかやってたのでわかるんですが、明確な型宣言がないのはとっつきづらいですね。 あとjQueryは一通りjavascriptの基礎を理解してからという感じですかね。
guest

0

書籍で言うと、

  • JavaScript Ninjaの極意
  • Effective JavaScript

はかなり有益ですよ。どちらか一冊は読んでみてはどうでしょ。
ただ、内容が難しいので、頭の中を通過させるだけでいいと思います。

あとはMDNのサイトでコマンド覚えれば、
自然とJS使いになれます。

俺も修行中です。

投稿2015/01/27 14:56

Seiji_Ogawa

総合スコア112

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

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

0

まずはCodecademyなどの学習サイトを使って勉強してはどうでしょうか。
CodecademyはiPhoneアプリもあるので、時間が空いた時とかに勉強するには良いかと思います。

ただ多少の英語力が必要ですが。

投稿2015/01/23 06:27

k.tada

総合スコア1679

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

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

tony

2015/01/23 09:48

ありがとうございます。 さっそくCodecademyに行ってみました。 英語を前に撃沈しました。 英語も勉強しようと思いました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問