JavaScriptでプログラミングを始める方法【プログラミング初心者の入門講座】
どうも、UT(@ut_1029)です。
JavaScriptでプログラミングを始める方法について紹介します。
この記事を書いている僕は、プログラミング歴10年以上のプログラマーです。
詳細：プログラミング未経験の新卒が10年間プログラマーとして仕事して思うこと
JavaScriptでプログラミングをする方法
JavaScriptでプログラミング勉強を始めようと思っている人は
- どうやって始めたらいいのかわからない
と悩んでいると思います。
実はめちゃ簡単な方法があります。
では、JavaScriptでプログラミングの勉強を始める方法について解説します。
簡単にJavaScriptでプログラムを実行する方法
まずはJavaScriptのプログラムを実行する一番簡単な方法である「Chromeブラウザを使った方法」について解説します。
本格的にJavaScriptでプログラミングする方法は後述します。
手順1：ブラウザを表示
まずChromeブラウザを起動します。
手順2：ブラウザで開発ツールを表示
そしてChromeの開発ツール(デベロッパーツール)を表示します。
- メニューから表示
- Mac
- [表示] – [開発/管理] – [デベロッパーツール]
- Windows
- 右上アイコン横の三点リーダー – [その他のツール] – [デベロッパーツール]
- Mac
- ショートカットキーで表示
- Mac
- [optionキー] + [commandキー] + [iキー]
- Windows
- [ctrlキー] + [shiftキー] + [iキー]
- Mac
デベロッパーツールを開くと以下のような画面が表示されます。
手順3：JavaScriptのプログラムを書く
そして以下のプログラムコードをデベロッパーツールへコピー＆ペーストします。
alert('はじめてJavaScriptのプログラムを実行！');
手順4：プログラムを実行
そしてデベロッパーツールで[Enterキー]を押下して、プログラムを実行します。
すると、以下のように「はじめてJavaScriptプログラムを実行！」っとダイアログメッセージが表示されます。
どうでしょう？思った以上に簡単だったと思います。
- ChromeブラウザのデベロッパーツールでJavaScriptを実行する
本格的にJavaScriptでプログラミングする方法
さきほどは簡単にJavaScriptでプログラミングする方法を紹介しました。ここからは本格的な方法を解説します。
テキストエディタとブラウザを用意します。
- テキストエディタ
- JavaScriptでプログラミングコードをコーディングするために必要。
- ブラウザ
- JavaScriptのプログラミングコードを実行するために必要。
本格的なJavaScriptのプログラミングは、この2つあれば始める事ができます。
エンジニアもテキストエディタでプログラミングします。
テキストエディタを用意
テキストエディタは「Visual Studio Code」を用意します。
Windowsで有名なMicrosoft製のテキストエディタです。最近のシステム開発ではよく利用されるエディタです。
Visual Studio Codeの設定：インストールしてからする日本語化とかの初期設定
JavaScriptを実行
ステップ1：テキストエディタへプログラムを書く
テキストエディタを開き、以下のJavaScriptのソースコードを記述します。
“JavaScriptで「Hello World.」とダイアログを表示する"サンプルコード
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptをプログラミングの始め方</title>
</head>
<body>
<h1>JavaScriptをプログラミングする方法</h1>
<script>
alert('Hello World.');
</script>
</body>
</html>ステップ2：ファイルを保存
そしてテキストファイルを保存します。
- ファイル名は「index.html」とします。
- ファイルを作成する場所は「デスクトップ」とします。
ステップ3：JavaScriptを実行
上記で作成したファイル(index.html)をブラウザで表示します。
index.htmlをブラウザで表示する方法は、
- まずブラウザ(EdgeでもChromeでもFireFoxどれでもOK)を開きます。
- 次にデスクトップへ保存した「index.html」ファイルをブラウザへドラッグ＆ドロップします。
すると、ブラウザに「Hello World.」と表示されます。
本格的なJavaScriptのプログラミング方法は以上です。
めちゃ簡単です！
おまけ：サンプルコードの解説
ここからは少しおまけの内容でJavaScriptのサンプルコードの解説をします。
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptをプログラミングの始め方</title>
</head>
<body>
<h1>JavaScriptをプログラミングする方法</h1>
<script>
alert('Hello World.');
</script>
</body>
</html>実はこのサンプルコードは、HTMLとJavaScriptが混在しています。
HTMLもWebサイト制作では重要ですが、いったん無視して大丈夫です。
JavaScriptは、<script>から</script>で囲まれた部分の
<script>
alert('Hello World.');
</script>が、JavaScriptのプログラミングです。
このプログラミングは『Hello World.とダイアログメッセージを表示』です。
サンプルコードを変更してみる
では、おまけついでにテキストエディタでJavaScriptのサンプルコードを変更してみます。
ステップ1
テキストエディタでindex.htmlファイルを開いてください。
ステップ2
そして以下のソースコード
alert('Hello World.');を以下の様に変更します。
alert('こんにちは。');変更したら上書き保存([ctrlキー]+[sキー])をします。
ステップ3
そしてブラウザを再読み込み([F5キー])します。
「Hello World.」というダイアログのメッセージが表示されていたのが、「こんにちは。」というメッセージ変わったと思います。
これがJavaScriptのプログラミング方法の基本手順です。
まとめ：JavaScriptでプログラミングを始める方法
今回はJavaScriptでプログラミングする方法を解説しました。
- 簡単にJavaScriptでプログラムを実行する方法
- 本格的にJavaScriptでプログラミングする方法
- JavaScriptでプログラミングする手順
わからない事だらけなので最初が一番つらいと思います💦
ですが、プログラムでは
1つのプログラミング言語である程度プログラムできるようになると他の言語でも通用する
特徴があります。
プログラミング言語1つ習得すると他の言語の習得が容易になります。
最後までご覧いただきありがとうございました。
UTの日常では、プログラミングを0から始める方法や基礎知識を解説しています。ぜひ他の記事もご覧ください。
/system/6329/プログラミング未経験から今すぐに始める方法について解説します。なにから始めたらいいのかわかない人は是非ご覧ください。
プログラミング未経験から独学で基礎勉強を始めた人向けに理解するコツやポイントをサンプルコードを使って解説します。
プログラミング基礎だけを使った問題集を用意しました。ぜひ基礎知識の勉強に利用してください。
基礎学習ばかりだと勉強に飽きたり身につかなかったりします。プログラミング初心者からステップアップする基礎知識を使ったプログラムのサンプルコードをまとめて紹介します。
1985年生まれ1児の父親です。ブログとか副業で収入を得る手段を模索中であります。(無理しない程度が理想ｗだから実績が出ないorz)
→UTのプロフィール
→Amazon欲しいものリスト