プログラミング初心者：「自分でWebサービスをつくってみたい。JavaScriptってよく聞くけどどんな時に使う言語なの？」
こんな疑問に答える内容の記事です。
本記事の信頼性
私はこれまで８年以上プログラミングに携わってきましたがさらにスキルを磨くため、現在 プログラミングのオンラインスクールCodeCamp
で学習しています。
そこではJavasscriptを含むWeb系言語をつかった実用レベルのWebサービス・アプリ開発スキルを学んでおり、本記事では私が学んだことをこっそりここで無料で公開しています。
まず、Javascriptを学ぶメリットについてお話します。
JavaScriptってなに？
JavaScriptを学ぶメリット
・Javascriptを使うことでWebサイトの利便性が高くなる
・Webサービス・アプリだけでなく簡単なスマホアプリもつくれる
・コードが分かりやすく初心者でも書きやすい
Javascriptを学ぶメリットは、おもにこんな感じです。
Javascriptの使い方をマスターすれば、開発できるWebサービス•アプリの機能性やデザイン性のバリエーションがぐっと広がります。
ではここで、Javascriptの特徴を簡単にまとめます。
JavaScriptの特徴
Javascriptの特徴
・Webサービス・アプリをつくるときに使われるプログラミング言語
・Webサービス・アプリ上で動くコンテンツはJavascriptでつくられている
・Webサービス・アプリのコンテンツに動きを与えて利便性と機能性を上げることができる
Javascriptの特徴について話し始めると専門的すぎて現時点では逆に混乱してしまうかもしれないので、とりあえずこの３つの大枠が分かっていれば、今後さらにJavascriptを深く学んでいくときにイメージしやすくなります。
では、これからプログラミングを勉強してWebサービスをつくりたいと考えている人は、Javascriptを使うと具体的にどんなWebサービスがつくれるの？という点が一番気になると思います。
そのあたりをわかりやすく解説していきます。
JavaScriptで具体的にできること
JavaScriptでできること
・Webサービス・アプリ上でマウスのカーソルを当てると動くコンテンツをつくれる
例）メニューバーにカーソルを当てると詳細なコンテンツ内容一覧が表示される。
・Webサービス・アプリ内の画像をマウスで動かすことができる
例）サイト内に埋め込まれたGoogle Mapの地図を拡大したり移動したりできる。
・Webサービス・アプリ上でクリックしたら動くコンテンツをつくれる
例）ボタンを押すと、ルーレットが回って抽選ができる。
Javascriptで具体的にできることはざっとこんな感じです。
このように、WWebサービス・アプリをつくるときには、HTMLやCSSといった言語だけでなく、Javascriptも合わせて使うことでWWebサービス・アプリ内のコンテンツにさまざまな動的な機能をつけることができます。
なお、HTML言語、CSS言語については、以下の記事で解説しています。
HTML言語とは？⇒ CSSの基本【今さら聞けないCSS入門編】
CSS言語とは？⇒ HTMLの基本【今さら聞けないHTML入門編】
Javascriptの書き方（２つある）
【Javascriptの書き方その１】HTMLファイルに直接Javascriptコードを書く方法
以下のコードは、HTMLファイルに直接Javascriptを書いたものです。
この中でJacvascriptのコードは、<script> と </script>で囲まれた部分です。
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptの書き方1</title>
</head>
<body>
<!-- ここにHTMLを書く -->
<script>
// ここにJavaScriptを書く
document.write('このJavascriptで書いた文字列がWebページ上に表示されます。');
</script>
</body>
</html>
・それでは、Javascriptで書いた文字列をWeb上に表示させる方法を解説します。
・まず「Sublime Text」を開き、上のコードをコピペします。
・コピペしたらファイルをデスクトップなどに保存します（ファイルの拡張子は必ず「.html」）。
・保存したファイルをダブルクリックすると、作成したWebページが開きます。
※コードを書いた「Sublime Text」の画面上で右クリックし、【Open in Browser】を押してもWebページが開きます。
・ここまでがJavascriptを書く１つ目の方法です。
【Javascriptの書き方その２】Javascriptで書いたファイルを別のHTMLファイルから読み込む方法
次に、Javascript書き方その２を解説します。
以下の２つのコードは、それぞれHTMLで書いたコード（上）とJavascriptで書いたコード（下）です。
▶︎ コード１（HTML言語）→ ファイル名「○○○.html」を保存する
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Javascriptの書き方2: 外部定義</title>
</head>
<body>
<!-- ここにHTMLを書く -->
<script src="my-sample.js"></script>
</body>
</html>
▶︎ コード２（JavaScript言語）→ ファイル名「my-sample.js」で保存する
それでは、ファイル２をファイル１で読み込むための手順を説明します。
・それでは、Javascriptで書いたファイルを別のHTMLファイルから読み込んでWebページ上に表示させる方法を解説します。
・まず、上の２つのコードを「SublimeText」の画面を２つ開いてコピペし、それぞれ別ファイルとしてデスクトップなどに保存します。
・ファイル名は必ず、上のコードは「○○○.html」、下のコードは「my-sample.js」とします。
・次に、保存したHTMLファイルの方をダブルクリックすると、Javascriptで書いた文字列がWebページが表示されます
・ここまでがJavascriptの書き方その２です。
JavaScriptを効率よく学ぶ方法は？
最後に、JavaScript を効率よく学ぶ方法を紹介します。
無料および有料の学習教材はたくさんありますが、私が実際に試しておすすめできるものだけを抜粋しています。
無料Webサービス・アプリで学ぶ
これらは、無料で基礎レベルなら十分習得できるもっともおすすめな学習ツールです。
（１）Progate（プロゲート）
（２）ドットインストール
（３）Let’sプログラミング
プログラミングスクールで学ぶ
無料Webサービス・アプリで学んだ方、または独学で分からないことがたくさんある方は、同時平行してプログラミングスクールで学ぶことがもっとも手っ取り早くスキルを伸ばす方法です。
（１）10秒で登録完了！TECH::CAMPオンライン説明会
（２）プログラミングのオンラインスクールCodeCamp
（３）TechAcademy 無料体験
（４）tech boostオンライン
本で学ぶ
JavaScriptに関する本は数多くあります。
おすすめできる本については別記事でも紹介しています。