重要度JavaScript(ジャバスクリプト)は主にWebサイトの開発で活用されているプログラミング言語です。システム開発の現場では「ジャバスク」とか「JS」などと略語されたりします。この記事では、JavaScriptで何ができるのか?をテーマに、JavaScriptの特徴を実際のソースコードを見ながらご紹介いたします。ななころTwitter(@nana_korobi04)でも情報発信していますので、フォローいただけると嬉しいです!目次JavaScriptとはJavaScriptは、ブラウザ上で行われるユーザー操作に対してポップアップを出すなど、Webページの利便性を向上させるために使わるフロントエンドエンジニア必須のプログラミング言語です。HTML/CSSで構築されたWebページに動きを加えたり、データベースにアクセスすることができます。名前が似ているプログラミング言語でJava(ジャバ)がありますが、JavaScriptとは開発元も文法も全く異なる別の言語なので混合しないように注意が必要です。Javaは企業のサーバーマシンで動くWebアプリケーションの開発で使われており、バックエンドエンジニアの領域です。JavaScriptでできることJavaScriptで開発された最も有名なサービスはGoogleマップです。今では当たり前にWebページをリロード(更新)せずに画面をスクロールすると地図やコメントが表示されますが、JavaScriptの登場以前はWebページの一部だけを更新する機能はありませんでした。XML」という正称から分かる通り、Webブラウザ上で非同期通信ができるプログラミング言語として、JavaScriptは一躍脚光を浴びるキッカケとなりました。皆さんが良くインターネットで目にする、以下のようなWebページもJavaScriptのAjaxが活用されています。シュミレーションサイト検索サイトSNSサービスシュミレーションサイト旅行サイトで宿泊人数や日付を入力するとプラン一覧が出てきたり、保険サイトで年齢や性別を入れると見積りが表示されることがあります。これらはJavaScriptの計算機能とHTMLのフォームを使って実装されています。検索サイト検索サイトでキーワードを途中までしか入力していないのに候補が出てくることがあるかと思います。あれは「サジェストキーワード」というもので、JavaScriptで途中まで入力された文字列をサーバーから検索してきて一覧で表示させています。SNSサービスチャット形式でメッセージをやりとりするSNSサービスで、相手が文字を打っている最中に「・・・」と吹き出しがでていることがあります。これは「タイピングインジケーター」と呼ばれ、相手が入力画面に1文字でもタイピングすると、その情報を検知してJavaScriptがアニメーションを表示させています。JavaScriptのはじめかたJavaScriptは特別な実行環境を用意せずとも、ブラウザとエディタがあればすぐに始めることができます。簡単にJavaScriptの動きを体験するには「alert」というメソッドを使うのが良いでしょう。/></head><body><script>window.alert('Warning');</script></body></html>補足となりますが、<script>から</script>の間がJavaScriptで、それ以外はHTMLのソースコードです。Warning.htmlをダブルクリックするとブラウザが起動して、ポップアップで「Warning」という文字が表示されたかと思います。(ブラウザによってポップアップの見た目は異なります)Webページに動きをつけるというイメージがお分かり頂けましたでしょうか?Ajexを体験しよう続いて、先ほどご紹介したAjexを体験してみましょう。ソースコードの説明は1行づつ切り出して説明すると冗長となってしまうため、ソースコードのコメント行に記載しています。コメント行とはコンピューターでは処理されない行で、人間が後からソースコードを見て何の処理かを判断するためのものです。プログラミング言語によって記述方法は異なりますが、HTMLとJavaScriptでは「<!–」から「–>」で括られた文字列がコメント行として認識されます。逆にコンピューターがプログラムとして認識するコメント行以外は「実行行」や「ステップ」と呼ばれます。円</td></tr></table></form></body></html>Calc.htmlをブラウザで起動し、個数のリストボックスから1...2...3と個数を変えるとどうでしょうか?リアルタイムで合計が120円...240円...360円と掛け算されているかと思います。このようにWebページをリロードすることなく、ユーザー操作を即時反映できるのがJavaScriptの特徴です。まとめ今回はJavaScriptでポップアップと簡単なシュミレーションページを作成しました。JavaScriptはインターネットでも参考情報やサンプルコードが多く、学習しやすいプログラミング言語です。動くWebページを作れるようになるとフロントエンドエンジニアとして一歩成長したような気持になりますよね。実際にHTMLとJavaScriptを組み合わせて実装できれば、初心者の域は超えていますのでプログラマとして胸を張って下さいね。【html/css開発に必須】ツールや開発環境をご紹介!2023年3月26日ななころ32歳のサラリーマンブロガー。プログラミングやAIについて研究した過去があり、現在はシステムエンジニアとして大手IT企業に勤めています。経験を活かし、皆さんに役立つ情報をお届けしたいと思います。