こんにちは、フジシロです。
ジャニオタの私ですが、現場がほぼ無いのと在宅ワーク＆仕事が超絶ヒマなので、
突然ですが、仕事中の合間にもできるJavaScriptの勉強をはじめました。
この記事は、私が「確かな力が身につく JavaScript「超」入門」
というJavaScript初心者向けの本に沿って、
JavaScriptの勉強をしたことを、アウトプットしてまとめたメモ的なもの になります。
初心者の方にわかりやすく教える記事ではありませんので、ご注意ください。
さて、この本を実行し、どのくらい理解を深め、
実際に仕事として役立てることができるのか？
「確かな力が身につく JavaScript「超」入門」という名の通り、
確かな力が身に付くのか？ 最後までやりきりたいと思います。
まずは1日目、56/320ページ分のまとめです。
もくじ
JavaScriptとはなんぞや？を解説してくれる1章
以前Webデザイナーをしていたこともあり、htmlとcssの理解度はそこそこあるのですが、
JavaScriptはプログラマーがやるものっしょ！
と思っていたので、1%ぐらいしかJavaScriptが何をするのか知りません。
そんなプログラミング初心者の私にも、「確かな力が身につく JavaScript「超」入門」は、何に使われているのか、イチからわかりやすく例が記載されていました。
- 郵便番号を入れたら住所が出てくる
- ダイアログを出す
- ショッピングサイト（楽天とかAmazonとか）の数量×単価の合計結果を出す
あ〜なるほど、わかりやすい例です。
「確かな力が身につく JavaScript「超」入門」では
サンプルデータがWeb上からダウンロードできるので、
そのデータをダウンロードして中身を書き換えたりして、
実際に手を動かしながら進めていきます。
2章から実際に手を動かして進めていく
「確かな力が身につく JavaScript「超」入門」は7章の構成になっています。
内容に沿ってデータをダウンロードして、実際に手を動かしながら、順番に進めていきます。
- ブラウザによってはデベロッパーツール、Webインスペクタなどと呼ばれている
- JavaScriptでプログラムがうまく動いているか確かめるための道具
コンソールは色々な呼ばれ方があるようなので、
「開発ツール」という名前で統一して書かれています。
Firefox、Chrome、Edge、Safariの開発ツールの開き方も丁寧に書かれています。
ちなみに、私はChromeを標準ブラウザとして使っています。
コンソールを使ってみた
最初はコンソールの使い方から教えてくれます。
ハイパー初心者なので、こんなことから説明してくれてめちゃくちゃ理解が深まります。
- console.log( ) を使う。
- console.log( ‘テスト’ ) ;
シングルクォートで囲うと文字列として認識される。 - console.log( 2+3 ) ;
囲わないと数式として扱われる。その結果が表示される。
何かを実行させたい時は「○○は××しなさい」と命令する。
console.log( ‘テスト’ ) ; の場合は
consoleは ‘ テスト ‘ を logしなさい
日本語に置き換えるとこんな感じ。
- 「○○は」の部分はオブジェクト
- 「××しなさい」の部分はメソッド
- 「△△を」の部分はパラメータ
これを先ほどのプログラムに当てはめると以下に。
console がオブジェクト
log(‘テスト’); がメソッド、その中の
’テスト’ がパラメータ になる。※メソッドには必ず最後に（）がつく。
（）が「××しなさい」を意味している。
logだけだと、「何」を出力しようとしてるのかわからないので
（）内に何をするのか書いてあげる。
△△の部分がこれにあたる。
ちなみに、文字列は’’でも””で囲っても認識されるが、
一般的に文字列として””を使う機会の方が多いので’’で記述している。
日本語で言うと「。」の役割。
JavaScriptをhtmlに書いてみる
この辺りは2-2めちゃくちゃ基本的なことなので頭にぶちこんでおきます。
- <script>タグを置く場所は</body>の直前。
- ’use strict’; をプログラム冒頭に記述。
新しいJavaScriptを実行するモード。 - JavaScriptを外部ファイルで作成する場合は必ず文字コードを「UTF-8」に。
- 外部ファイルの読み込み
<script src=”ファイルパス”></script>
imgのようだけど空要素ではないので、閉じタグ必須。
//単一コメント
/*
複数行にまたがる場合の
コメント
*/
ちょっとしたhtmlとかのコメントを入れる際も、忘れがちなのでメモ。
ダイアログボックスを表示
2-3の部分ここも考え方の基礎部分。
コンソールに文字列をアウトプットするには、consoleオブジェクトのlogメソッドを使う。
アラートダイアログボックスを表示してそこに（）内の文字列を出力するには、alertメソッドを使う。
window.alert(出力したい文字)
という風に理解しました。とりあえず。
インプット→加工→アウトプット
（）内にパラメータを指定しておかないと、アウトプットするものがない。
なので、アウトプットするものをインプットしておく必要がある。
（）内に含めるパラメータがインプットの役割を果たしている。
加工は、パラメータが文字列の場合は、特に何もせずに出力されるので加工は発生しない。
パラメータが数式の場合は、自動的に計算されてから結果が出力されるので、この自動で計算される部分が、インプットに対する加工になる。
(10+3) がインプット
10＋3＝13 の計算している部分が加工
alert の部分がアウトプット
HTMLを書き換える
2-4から実践的な内容で、htmlのを現在の日時を表示させます。
具体的に、html内の
<p id=”choice”>日付を表示</p>
の日付を表示 の部分に日時を表示させる。
つまり、書き換えたい部分のHTMLタグとコンテンツ（要素）を取得、
取得した要素のコンテンツを書き換える。
console.log(document.getElementById(‘choice’));
でコンソールに出力したり、しましたが、
getElementByIDと「D」を大文字で書いてしまったためエラーになったり…。
しかも全く間違えに気づけず、いきなりちょっと詰まりました…とほほ。
コンソールでHTMLの要素がきちんと取得できるようになったら、
取得した要素のコンテンツを実際に書き換えます。
document.getElementById(‘choice’).textContent = new Date();
new Date()の意味とはなんぞ？となりましたが、後で詳しく取り上げてくれるみたいですので、とりあえずスルーします。
このままだと、日時は国際規格で定められたフォーマットで取得されます。
要素のコンテンツを書き換える、読み取る
document.getElenentById(‘id名’).textContent = 書き換えたい文字
※文字列で書き換える場合は文字列をシングルクォートで囲む。
’通知を受け取りますか？’ など。
※囲まずに数式（2＋1）などを書くと、計算結果が表示される。
console.log(document.getElementById(‘choice’).textContent);
コンテンツ部分を変えてコンソールに出力もできる。
全てのオブジェクトは、メソッド以外に「プロパティ」を持っている。
○○オブジェクトの□□は☆☆である
○○オブジェクトの□□を☆☆にする
□□が「プロパティ」
☆☆が「プロパティの値」
プロパティの値は一般的に、読み取りと書き換えが可能。
document.getElementById(‘choice’).textContent = new Date();
を当てはめると、
<p id=”choice”></p>のtextContentをnew Date()にする
になる。
オブジェクトのまとめ
日付や文字列などのデータは、JavaScriptでは「オブジェクト」として扱われる。
オブジェクトにはwindowオブジェクト、consoleオブジェクト、documentオブジェクトなどがありそれぞれ固有の、
プロパティ（オブジェクトの状態を表す）
を持っている。
メソッドには、必ず後ろに（）がついて、メソッドによっては（）内にパラメータを含めることができる。
※パラメータは’’で囲った文字列や数式のこと
1日目終わり
休日だったので、「確かな力が身につく JavaScript「超」入門」を読みながら
じっくりみっちり、6時間くらいやってました。
2章まで終わりました。3章もさわりの部分はやったのですが、2日目にもう一度やり直します。
理解するのが遅いので、こんな感じに紙にもメモしつつ本を見返したりしましたが…
かなり、理解が深まりました！（嬉しい）
- JavaScriptを勉強したいけど、何から初めていいかわからない人
- プログラミングスクールに入るか悩んでる人
- Youtubeなどの動画を見たが具体的に何をすればいいかわからなくて挫折した人
はい、すべて私です。
ちなみに、この他にはディズニーのプログラミング教材「テクノロジア」の無料体験もしました。
ですが、何がどうなっているかの理屈の部分の説明が無く、全く頭に入らず挫折してました…（小、中学生のお子様などにプログラミングへの興味を持ってもらえるきっかけには良さそうでしたが）
スクールもテクノロジアも本格的にやろうと思うと十万円以上かかります。
もし、JavaScriptの勉強を初めるなら、2,480円(税抜)で初められますので
「確かな力が身につく JavaScript「超」入門」でチャレンジしてみてください！
もちろん、htmlの知識がある程度ある前提ですが。
こんな風に、表紙に書いてある通りの本です。
2日目以降も勉強した内容をちまちま載せるので、
初心者が本だけでどこまでいけるか楽しみにしていてください。
