初めてのJavaScript
筆者はこれまでWebについてHTMLとCSSには触れてきましたが、JavaScriptをつかった動きの部分をやってきませんでした。
そんなJavaScript初心者の筆者が、初心者の目線で勉強方法をまとめてみました。
これからJavaScriptを勉強する同じ初心者の仲間の役に立てれば本望です。
JavaScript学習の入り口として理解しやすい初心者本を紹介
JavaScriptを苦手とする人の多くには、そもそも記述されている構文について、読み方が分からない（何を書いているか分からない）という点が挙げられると思っています。
この本では特段難しいJavaScript文は出て来ません。
JavaScriptの基本構文を抑えつつ、その読み方のポイントを教えてくれます。
スラスラ読める JavaScript ふりがなプログラミング
1週間もあれば、日中の合間で十分読み切ってしまえました。
また、読み進めながら自身のPCでも同じように動作確認をしていくと、内容をさらに理解しやすかったです。
初心者として覚えておくべきJavaScriptの構文
下記は『1+1=2』というくらい当たり前に使われる構文です。
上記で紹介した本にももちろん出てきます。
この構文を知らないと有識者にはすごく不思議な顔をされるので覚えておくべきです。
console.log();
この構文自体はブラウザ上の表示物に対して動きをどうこうするものではなく、JavaScriptで書いたプログラムの処理の中で、指定した値を出力するためのメソッドです。
ブラウザに搭載されている「デベロッパーツール」（F12で起動する『開発モード』）のコンソールの箇所に、指定の値を出力（値を表示）させることができます。
「console.log('こんにちわ');」と記載すれば、コンソールに「こんにちわ」と表示されるわけです。
「console.log();」の主な使い方
「console.log();」の主な使用方法としては、自分が書いたJavaScriptのプログラムが、どこまで処理が正しく書けているのかを確認する際に使用します。
処理の各部に「console.log();」を埋め込んで、表示され無くなる箇所、つまりプログラム記述が誤って処理が通らなくなっている箇所を見つけるときに使われます。
初心者がJavaScriptを勉強する際にも、自分が書いた処理の成否を確認する為に使いますし、ベテランでも、自分のプログラムのチェックで使うポピュラーな方法です。
初心者として覚えておくべき用語
先程『メソッド』という言葉を使いましたが、単語の意味を理解できずに進めることは、勉強する中で辛いポイントの一つに感じます。
JavaScriptに関わらず、プログラム言語を勉強する際、様々なカタカナ単語が出てきます。
初心者がプログラムを勉強する際、単語が何を指しているのか分からず、プログラム言語を苦手に思ってしまう要因の一つだと思っています。
『メソッド』とは『方法』を意味し、プログラムにおいて「どういう方法で動くのか」が決まっている部分を指します。
先程の「console.log();」は「入力したデータが表示される」ように決まった方法で動作しています。
チュートリアルを使って動くものを作ってみる
下記はプログラムの勉強サイト「ドットインストール」にあるJavaScriptの初心者向け講座です。
初心者向けに1本3分程の動画が計11本あり、動画を見ながらプログラムコードをまねていくことで、動くものが作れるようになっています。
先に紹介した『スラスラ読める JavaScript ふりがなプログラミング』を読み終えていれば、動画を通して、今現在自分が何を理解できていて、何がまだ分からない部分なのかを感じることができました。
動画を止めながら一緒にJavaScriptをプログラミングしていけば、1時間程で終わる内容です。
JavaScriptで「どういう処理ができるのか」を知る
ひとえに、JavaScriptでWEB上の要素を動作させると言っても、細かなプログラムが記載されて動いています。
例えば『ページ上部へ戻るボタン』は、下記のような処理の要素があるかと思います。
・ある程度ページをスクロールしたら表示される。
⇒高さを取得するメソッドを用いて、ページの特定の高さが条件で表示される。
⇒クラスを切り替えるメソッドで、非表示のクラスが外れて表示される。・ボタンを押すとスルスルと上部に戻っていく。
⇒アニメーションのメソッドを用いて、指定の速度で動作する。
このようにJavaScriptで「どういう処理ができるのか」、どういったメソッド等の機能が用意されているのかを知っておくことは重要になると考えます。
そこで下記の参考書を購入しました。
この参考書は、JavaScriptに用意されている一つ一つの主だった機能がカテゴリ分けされてまとめられている参考書です。
先に挙げた「高さを取得する」「クラスを切り替える」といった処理ももちろん載っています。
JavaScriptを書いていく際、どういう処理機能を持たせれば思い通りにWEB上の要素を動かせるのかといった、予測がつけられるようになると考えました。
いきなり全部を覚えていくことは大変だとおもいますので、WEB上でよく見られるJavaScriptの動作につながるカテゴリを先に見るように使っており、これも例文をもとに自身でもコードを書いて動作を確認しながら進めます。
・chap1：javascriptの基礎
・chap2：真偽値や数値や文字列の扱い
・chap7：ユーザーアクションの取り扱い
・chap8：HTML要素の操作方法
JavaScriptを書き続けていくうちに何度も使うようなものはだんだん覚えてもいきます。
たとえ覚えられずとも知ってしまえば、必要な時に調べることができるようになると考えます。
まとめ
・理解しやすい基礎
スラスラ読める JavaScript ふりがなプログラミング
・実際に動くものを作ってみて、面白さ、楽しさを知る。
ドットインストール：はじめてのJavaScript
・javaScriptで何ができるのかを知る。
JavaScript コードレシピ集
それでは皆さんも良きコーディングライフを。