JavaScriptを勉強し始めたけれど難しくて…という方や理屈よりも実践で楽しむ入門レベルのJavaScript記事です。
私は、HPのサイドメニューに占いやクイズのようなものを入れたいという目的で勉強し始めたので、Javascript全般を理解することは考えていないのですが、このHPのものであれば難しい規則などを理解しなくても動きますし、使うメソッドは数個でいけそうですから、ぜひ参考にして難しく考えないでJavascriptを始めてみてください。
このページは、Javascriptを始めるときの「本選び」について書いています。
記事の一覧です 【目次】
・ わからないことが次々でてくる
非推奨のwriteInやwriteは、どんな悪さをするのか調べてみました。
また、ランダム関数のランダムさを調べてみました。
・ document.write()の代わりになるもの
非推奨のwriteに変わる方法を考えてみました。
・ イベントハンドラーを知ればかなり遊べる
ボタンを押すと写真が出るJavaScriptを、onclick、getElementById、innerHTMLを使って作りました。
・ よく使うrandom()関数で知っておくと良いこと
裏か表を予想するプログラムなど、ランダムに関する話題を取り上げました。
・ この命令語が使えるといろんなことができる
このHP記事で使っている命令語を全部ピックアップ。これだけ使えると、かなり遊べます。
・ 画像クリックすると別窓に説明文がでる
onclickとarertを使って1行で書ける、画面をクリックすると説明文が出るJavaScript
・ イベントハンドラとイベントリスナーの使用例
イベントハンドラーのonclickとイベントリスナーのclickで違いを紹介しています。
・ ボタンに対応した画像を表示する
ボタンをおすと、それに対応した画像が表示されるJavaScript
・ ボタンを押すと画像と説明文を表示する
ボタンをクリックすると、それに対応した画像とともに、説明文が表示される。
・ 小さな画像をクリックすると大きな画像が表示
小さな画像をクリックすると大きな画像が表示されるJavaScript
・ セレクトボタンでえらんだ画像を表示
セレクトボックスから選択した内容の画像が表示されるJavaScript
・ 順番にヒントを表示しその後に答えを表示する
国旗の国名当てクイズで、3つのヒントを順に出して、その後に答えを表示するJavaScript
・ ヒントと答えボタンを作り、答えが出るとボタンを消す
同様に、ヒントの途中で答えがわかったら回答できるようにしたJavaScript
・ 写真を表示後少し遅れていくつかの文章を表示する
タイマーを使って、問題を提示して時間を置いて回答と説明文を表示するJavaScript
・ ランダムな数字を使う場面に
サイコロを振る例で、画像とその説明が出るJavaScript
・ 2つのサイコロを振って合計で判定する
2つのサイコロを振って、丁か半かを表示する例で、乱数、計算、表示などを示しています。
・ 配列の内容を選択してtextareaに表示する
占いプログラムを、乱数で配列を選び、テキストボックスへの表示するひとつの方法を紹介。
・ ボタンを押して漢字の問題と答えを表示する
漢字テストの例。大きな字を表示する、乱数で問題を選択するなどの基本を考えてみました。
・ 続きPart2 問題を出題して一定時間後に答えを表示する
漢字テストで出題して一定時間後に回答が出るJavaScript
・ 漢字テストで、時間が経つと答えが消えるようにする
問題と答え用のボタンを用意して、答えを表示後、時間が経つと答えを一時消す。再表示も可。
新しい記事ができれば上に追加していきます。
本を読むだけでは難解すぎる Javascript
Javascriptで挫折する人が多い… としばしばWEBや書籍に書かれています。
その理由をChatGPTで調べると、①他のプログラム言語にない概念が多く含まれる ②一連のシステムが大規模で、ライブラリーやフレームワークの選択肢も多い ③動的な言語で型エラーの発生が多い ④更新が多くて新旧の内容が混在して戸惑う …… とありました。
私の場合は、本格的に学ぶつもりはなかったので、「きっと入門者用の本を読めばわかるだろう…」 と一冊目のJavaScriptの絵本を読んだのですが、全くの見込み違いで、ほとんど理解できないし頭に残りません。
そこでさらにいろんな本を購入して読むと、かえってわからなくなりました。 JavaScriptの本の多読はしてはいけないし、じっくり最初の1冊を選ぶのは大事ですから、「最初の本選び」について私の経験を少し紹介します。
これまでに購入した本
これだけ読むと混乱するので、多読はダメです。
そして何よりも、著者（本）によって、たとえば変数の付け方などの書き方やポイントの置き方（JavaScriptに対する目標）が違っていることに気づきました。
これらの本の目指すところが異なるためで、専門家を目指すための入門書のように、全般を紹介するものから、HTMLやCSSとの関わりなどから説明するものなど様々です。
そして、最も戸惑ったのは、著者によって変数の名前の付け方がかなり違っている「自由さ」がかえってわかりにくくしています。
特に、ローマ字で書かれている「変数、関数、命令語」の区別がつきにくいので、初心者はいろいろな本を読むと戸惑うと思いますから、手にとって自分にあっているかどうかをチェックするのがいいでしょう。 ともかく、やみくもに色んな本をたくさん読むのは要注意です。
そして「新しい本であること」は重要です。
毎年のようにJavascriptは規格が追加変更されているので、概ね5年以上前のものは避けるのが良さそうです。（内容が更新されておれば問題ないでしょう）
ともかく感じたのは、JavaScriptの用途や応用範囲が広大なために、全くの初心者から、大きなプログラムでHPを操作できるようになるのは、独学では無理っぽいということです。
だから、専門家を目指す方や大きなプログラム作成をイメージしている方は、費用はかかっても、スクールなどで系統的に学ぶ（＝指導者につく）ことを考えたほうがいいでしょう。
そんな、入門者はとっつきにくいJavascriptですが、私のような小さな目的・目標のための勉強であれば、そんなに深刻に考える必要はありません。
つまり、わからなくても、本に書いてあることをマネして、自分用に少しずつアレンジしていけばどうにかなりますし、少ない出費の段階で「や～めた」と放棄しても被害は少ないでしょう。
そのためには、「自分はどんなことをしたいのか」を意識して、それから本選びをするのがいいでしょう。
この記事を読んでいただく方の中には、WEBを利用すればいい… と思う人も多いと思いますが、いつも手に取れる書籍は役に立ちますから、本に加えてWEB記事を参考にされるのがいいと思います。
結局、私の場合は、下で紹介する2冊の本を改めて買い足して、それで約1.5ヶ月間読んで演習した後に、もう一度、本にある使えそうな項目を抜書きして、自分なりに整理をして、このHP記事を書き始めたのですが、「自分で書いていく」という動作が理解を高めますし、何よりも、自分で書いたものがうまく動いてくれると楽しくなりますから、2ヶ月ぐらいは我慢するつもりで始めていただくのがいいと思います。
最初は全くわからないと思いますが、自分にあった本を選んで演習しながら進んでみることをぜひやってみてください。
PR
ワークブックが私の理解を助けてくれた
本の作者さんからすると、Javascriptが広範囲なので、入門者にわかりやすいように書くのにかなり苦労されていると思うのですが、読む側にすると、本が変わると、書き方や視点が違っているのは困ったことです。
「入門用」だといっても、JavaScriptを理解しようとすれば、HTMLやCSSが関係していますし、読む人のレベルや能力でその本の評価が変わるのですが、私のように、全くの1から始める人には「入門・初心者用」でも、ほとんどの入門書はきつすぎた感じです。
結局、初歩の前に戻ろうと思って本を選び直したのですが、私に一番役に立ったのは下の2冊で、さらに言えば、写真左の「ワークブック」が最も役に立っていますから、選択に困った初心者の方は、一度中身を確認してみてください。
下右の1冊は、初歩の初歩用に「基本」から学び直そうとおもって購入したもので、命令語や命令文をふりがな付きの日本語で書かれています。
ふりがな付きでコードを読んで、Javascriptがどんなものかの自分なりの感触をつかんで、その次に、実用的な例題の多い「ワークブック」を実習しながらこのHPを書きはじめていますから、完全初心者の方には「ふりがなプログラミング」は役立つはずです。
一からやり直し用に購入した本
この「ふりがなプログラミング」は、2022年8月発刊のもので、最新のES2020バージョンの規格も念頭にして書かれていて、ひらがなで読み下しされていると、英字アレルギーが和らぎますから、Javascriptがすこし身近に感じるようになるでしょう。（正直言って、これを読み終えても、プログラムを書くのは無理でしたが無駄ではありませんでした）
1冊が200ページ強の本で、書いてある内容や範囲は限定的ですから、あくまでも超入門者限定です。 紹介されている命令語（メソッド）は10個程度です。
 |
スラスラ読める JavaScriptふりがなプログラミング 増補改訂版 [ リブロワークス ] 価格:2178円 |
そして、何よりも、私にあっていたのは、下の「ワークブック」です。今は、この本に付箋がいっぱいついていて、いつも見れるように手元においています。
この本は、コードの行数が少なくて実際に使えて役に立ちそうなプログラムがまとめられていて、説明も的確でわかりやすく、最小限のHTMLやCSSなどを含めた例題と回答がダウンロードできるようになっているので、HTML/CSSをよく知らない人でもわかって使える内容になっています。
使われている書式はES2015と最新ではないのですが、このES2015は現在も主流なので、Javascriptの実習用・理解用としては全く問題はないでしょう。
何よりも、価格も税別900円と安価です。書店でいろいろな本を30冊以上片っ端から立ち読ると、いい本も見つかるのですが、やはりこれが私に合っていましたし、私のこのHPの内容の多くもこれを参考にしています。
「JavaScriptはわからない」と感じている方は、ぜひ手にとって見てください。
 |
JavaScriptワークブック第3版 ステップ30 （情報演習） [ 相澤裕介 ] 価格:990円 |
私はHPビルダーとVisual Studio Codeを使用
この私のHPは「ホームページビルダー22（HPB22）」を使って書いています。 HPB22の良いところは、JavaScriptのエラーを表示してくれるところですが、HTML5でHPを書いているのですが、余分なタグが付くなど、完全でないところはいただけませんが、これがないとHPがかけませんので、このHPB22にお世話になっています。
さらに、Javascript部分はタイプの間違いが多いので、マイクロソフトの「VSコード」でJavascript部分を書くようにして、エラーがなかったらそれをHPビルダーにコピーする … というやり方をしています。（ここでは詳しい紹介や使い方は省きます）
ただし、「HPビルダー」も「VSコード」もスグレモノなのですが、残念ながら、動かない原因を特定してくれたり、プログラムを修正してくれませんから、ともかく、初心者のうちは試行錯誤して、エラーと戦わないといけない点はどうにもなりませんね。
VSコードの画面
お断りその他
私のような入門者レベルでは動作が複雑なものや大きいものは作れませんし、完璧なプログラムも望めませんから、ともかく、イメージしたものが動作したらOK… ということで記事にしています。 使えるところがあれば、うまく利用してください。
ともかく「目的どおりに動けばOK」で記事を書いていますので、レイアウトや配色などの体裁などは考えていません。 これらの記事の内容は、折を見て、体裁を考えて作り直して、私のHPのサイドメニューに埋め込む予定です。
それもあって、動作トラブルの対応や質問には当面は対応できないことをご了承ください。
また、本文からコピーができませんので、コードのコピーが必要なら「ソースのコード表示」をさせてそこからコピーをしてください。
PR
