こんにちは！Donyです。
今日はJavascriptの基礎についてお話したいと思います。
基礎と言っても、本で書いている歴史とか、変数、配列のようなものより、どのような機能が作れるとかなどの機能面についてお話します。
私自身もそんなにJavascriptをめちゃくちゃ強いです！と言えるレベルではないですが、自分が作りたい機能は無理なく作れます。
ほぼ独学でやっているため、他の方達と書き方が違うかもしれません！
ただ私がいつも気をつけているのは「分かりやすく、シンプルに」プログラミングをしているので、自分の知識が参考になったらうれしいです！
Javascriptでできること
私がプログラミング言語を学ぶ時に、一番最初に見るのが、「どんなものを作れるか？」です。
作れるものの想像ができない言語は、勉強する意欲が出てこないですね･･･自分の場合ですけど
だからまず先はどのようなものが作れるかを説明しますね。
身近な機能はスライドショーみたいな動的に動く機能
あなたがWEBサイトを見て、「サイトの中に何か動きがあるもの」は90%はJavascriptで作ったものです。たとえば
- スライドショー
- メニューの表示・非表示
- ボタンクリックで非表示になるもの
- クリックしたら、ポップアップが出てくる
- 下にスクロールしたら、ポップアップが出てくる
- 住所入力中、郵便番号を入力したら住所が表示される などなど
上記以外も数え切れないくらい、Javascriptで作った機能はいっぱいあります。
非同期通信のAJAX
これは文章で説明するのは、ちょっと難しいですが簡単に説明するとしたら
「泳ぐ白鳥の水面下の足のようなもの」ですね。
･･･
逆に分かりづらいのかな･･･
要するに表では目立つ動きがないですが、見えない裏では活発に処理をしている機能です。
例えば、Javascriptで作れる機能で説明した「郵便番号を入力したら、自動で住所が表示される」機能もAJAXです。
- 住所入力（表）
- 郵便番号に一致する住所があるデータベース（以下DB）から検索（裏）
- 一致する住所を取得する（裏）
- 表示する（表）
表は入力して表示するだけですが、裏では見えないところから検索して結果を取得する機能になっています。
他にも色々機能例がありますが、とりあえずここまでにして次にいきましょう。
Javascriptの特徴的な機能
Event処理
マウスでボタンをクリックした場合の処理や、スマホから指でタッチした場合などのアクションに対して、機能を実行することができます。
イベントの種類（抜粋）
- click：要素をクリック
- load：ページを完全読み込んだ後
- mouseup：マウスボタンを離した
- mouserdown：マウスでボタンを押している
- mousemove：マウスが動いている
- touchstart：スマホなどでタッチした
- touchend：スマホなどでタッチを外した
より詳しいイベント情報はMDN Web Docsの「イベントリファレンス」をご覧ください！
上記のイベントをきっかけ（フック：hook）にして、実行させたい機能を設定します。
ちなみにこのサイトの表示は全てJavascriptによるものです。各イベントに合わせて、情報を表示していますね！
要素の取得
イベントを実行するためには、その対象が必要ですね？
要素を取得するのも、Javascriptの特徴と言えるでしょう。
今、画面内に表示されている全てをJavascriptから取得することができます。
ボタンそのものを取得する場合や、テキストの一部を取得する場合もあります。
その取得した要素に対し、イベントを使ったり、直接修正をしたりしますね。
また現在の場所から別の場所に移動もできたり、要素をコピーして新しい場所に追加することもできます。
まとめ
簡単にJavascriptでできることを書いてみましたが、いかがでした？
私はHTMLコーダーの時にJavascriptを学ぼうとしていまして、HTMLやCSSしか知らない自分では、Javascriptは難しくてできないものだと思ってました。
しかし自分が作ってみたい機能がJavascriptを学ばないといけないと分かったので、必死に勉強して今は自分が作りたい機能は作れるようになりましたね。
やはりスキルが伸びるきっかけは「やってみたい！」が一番だと思います。
この記事を読むあなたはきっと初めて勉強しようとしている方だと思います。
最初は難しいと思いますが、自分がやってみたいもののために頑張ってください！