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

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

質問する

ただいまの
回答率

88.20%

javascriptの勉強方法

解決済

回答 5

投稿

  • 評価
  • クリップ 3
  • VIEW 2,037
tony

tony

score 89

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

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 5 件

link

+4

初めは基礎を覚えてそこからレベルを上げていきましょう。
初めに覚えておくといいと思うのは 
var a=50;
console.log(window.a)//50
グローバルに定義した物はwindowオブジェクトのプロパティになることでしょう。
次にJavaScriptは関数スコープを持ちます。同名であっても関数内で宣言した物はローカル変数になります。 
var a=50;
function b(){
    var a=20;
    console.log(a);
};
b();//20
console.log(a);//50
しかし例外があります。それが次のようなコードです。 
var a=50;
function b(){
    c=45;
    console.log(a);
};
b();//50
console.log(c);//45
関数内で定義した変数cが外部から参照できています。これは変数宣言にvarを付けなかったのが原因です。
基本的にこのような書き方は変数の有効範囲を認識しづらくし、バグの原因になることが多いです。 
//イベントのセットですが様々な書き方があります。
window.onload//documentのload完了時
window.addEventListener("load",function,useCapture);
//<div onclick="function">など
addEventListenerを使用するのが良いと考えますがIE8以下では使えません。その点を補助するコードやライブラリを使用することを検討してもいいでしょう。しかしながらまずは基礎を覚えるといいかと。
また他のコードとの変数等の激突を防ぐため、グローバルは極力減らせるほうが好ましいと考えます。その際役に立つのが即時関数です。 
(function (_Str){
    var _String=_Str+"CODE";
    console.log(_String);//TESTCODE
}("TEST"));

console.log(_String);//undefined

他のことに関しては徐々に覚えていくといいと思うので以下単語と概要だけ。
クロージャ:ローカル変数を保持することができる。現状プライベートに近いものを実現できる方法の1つ。
プロトタイプチェーン:そのオブジェクトが持たないプロパティをprototypeを辿り、見つけた場合それを使うという一連の処理のこと。JavaScriptのオブジェクト指向はクラスベースではなくプロトタイプベース。
メソッドチェーン:オブジェクトのメソッドが自身のオブジェクトを返すことによって連結してメソッドを実行できること。 
function OutputWrapper(_String){
    OutputWrapper.prototype.Value=_String;
    OutputWrapper.prototype.SetValue=function (_String){
        this.Value=_String;
    };
    OutputWrapper.prototype.Console=function (){
        console.log(this.Value);
        return this;
    };
    OutputWrapper.prototype.Alert=function (){
        alert(this.Value);
        return this;
    };
};
//メソッドチェーンとプロトタイプチェーンを使用しています
var Output=new OutputWrapper("TEST");
Output.Console();//TEST
Output.Console().SetValue("AAAA");//TEST
Output.Console().Alert()//console:AAAA alert:AAAA
書籍に関してですが私の手元にあるもので詳しく本気で勉強するのに向いているのは
・パーフェクトJavaScript　著：井上誠一郎　土江拓郎　浜辺将太
でしょうか。分かりやすく書かれた図鑑という印象です。理解を深めるにつれこの本を手元においていることが正しい判断だったと思えるようになる本だと思います。個人的には初級者から中級者向けかと。
また手元にはありませんが定番としてオライリーの
・JavaScript第6版
があります。何かおすすめがありますか？と聞かれてこれを答える人が多いと思います。しかしながらこれも前述のパーフェクトJavaScript寄りの内容の多い物でしょう。恐らく予想になりますがパーフェクトJavaScriptが知識寄りなのに関して、こちらは基礎をおさえたうえで実装と実践に関する知識に重きを置いているのではないでしょうか。(手元にある方の意見が伺いたいところ)

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

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2015/01/24 03:10

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

    キャンセル

link

checkベストアンサー

+3

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

http://dotinstall.com/lessons/basic_javascript_v2

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2015/01/23 19:46

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

    キャンセル

link

+1

１）一通り基本を覚える
２）jQuery などの フレームワークの "便利さ" を痛感する
３）jQuery などの フレームワークの "重さ" も体感する 
<!DOCTYPE html lang="ja">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
<style>
#debug {
    font-family:"FixedSys";
    width: 100%;
    height: 300px;
    overflow:auto;
}
</style>
<script>
var DENTAKU = (function() {
    function init() {
        this.config = {
            stack:[],
            pos:0,
            next:function() {
                if (this.pos < this.stack.length) {
                    this.val = this.stack[this.pos++];
                } else {
                    this.val = null;
                }
            },
            reset:function() {
                this.pos = 0;
            },
            val:null
        };
    }
    init.prototype.express = function(s) {
        var arr = s.replace(/\s*/g, "").split(/([+-]?\d*\.?\d*[eE]\d{1,3}|[+-]?\d+[eE]\d{1,3}|[^\w])/g);
        var arr2 = [];
        for (var x=0;x < arr.length;x++) {
            if (arr[x] != "") {
                arr2.push(arr[x]);
            }
        }
        this.config.stack = arr2;
        this.config.reset();
        return this;
    }
    init.prototype.calc = function() {
        var self = this;
        self.config.next();
        print("@--------------------------");
        try {
            var ans = _calc(self);
            
            if (self.config.val != null && self.config.val != "") {
                throw "unknown operand: " + self.config.val;
            }
            
            print("ANSWER: " + ans);
            self.config.ans = ans;
            return ans;
        } catch (e) {
            alert("ERROR: " + e);
            return null;
        }
    }
    function _calc(s) {
        var left = _term(s);
        
        while (true) {
            if (s.config.val == "+") {
                s.config.next();
                var right = _term(s);
                print("add: L:" + left + " + R:" + right);
                left = left + right;
            } else if (s.config.val == "-") {
                print("sub:");
                s.config.next();
                var right = _term(s);
                print("sub: L:" + left + " - R:" + right);
                left = left - right;
            } else {
                return left;
            }
        }
    }
    function _term(s) {
        var left = _element(s);
        
        while (true) {
            if (s.config.val == "*") {
                print("mul:");
                s.config.next();
                var right = _element(s);
                print("mul: L:" + left + " * R:" + right);
                left  = left * right;
            } else if (s.config.val == "/") {
                print("div:");
                s.config.next();
                var right = _element(s);
                print("div: L:" + left + " / R:" + right);
                
                if (right == 0) {
                    throw "zero division.";
                }
                
                left = left / right;
            } else if (s.config.val == "%") {
                print("mod:");
                s.config.next();
                var right = _element(s);
                print("mod: L:" + left + " % R:" + right);

                if (right == 0) {
                    throw "zero division.";
                }

                left = left % right;
            } else {
                return left;
            }
        }
    }
    function _element(s) {
        print("input: " + s.config.val);
    
        var num = parseFloat(s.config.val);

        if (isNaN(num)) {
            if (s.config.val == "(") {
                print("par:start");
                s.config.next();
                var left = _calc(s);
                print("par:close, L:" + left + " , V:" + s.config.val);
                if (s.config.val == ")") {
                    s.config.next();
                    return left;
                } else {
                    throw "')' expected.";
                }
            } else {
                return num;
            }
        } else {
            s.config.next();
            return num;
        }
    }
    function print(s) {
        document.getElementById("debug").value += s + "\n";
    }
    return new init();
})();

window.onload = function() {
    DENTAKU.express("(1 + (12 / 5) * 2").calc();
    DENTAKU.express("1e3 + 22").calc();
    DENTAKU.express("e3 + 22").calc();
    DENTAKU.express("3 / 0").calc();
}

</script>
</head>
<body>
<pre>
【eval 使わない電卓】
優先順位↑　数値（符号付・指数）、左括弧
　　　　↑　＊　／　％
　　　　↑　＋　－
※eval 使わない、とは、使っちゃいけないのではなくて、eval する前にやっていいのか評価する仕掛けを入れなさいという意味。
※このPGは、eval を使わないでさらに自前で解析する。
　　　　
</pre>
<HR />
<textarea rows="10" cols="80" id="debug"></textarea>

</body>
</html>

追記ここから

-(1+2) とか計算できませんね。。。
  • と + の評価をしてないからです。

追記ここまで

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

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

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

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2015/01/23 15:01

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

    キャンセル

  • 2015/01/23 19:40

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

    キャンセル

link

+1

書籍で言うと、

  • JavaScript Ninjaの極意
  • Effective JavaScript

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

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

俺も修行中です。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

link

0

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

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2015/01/23 18:48

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

    キャンセル

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

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

関連した質問

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

SNSアカウントでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る