初心者でも開発できるJavaScriptの開発環境の構築

  • URLをコピーしました!

JavaScriptをパソコン上でコーディングしてみたいけど、簡単にできるのかな?

JavaScriptについて興味があって、勉強してみたいけど
「書籍だけでなく、実際にコーディングするにはどうやったらいいの?」と疑問に思っている方も
いるのではないでしょうか。

この記事では、プログラミング初心者の方に、JavaScriptを実際にコーディングする開発環境について紹介します。
この記事を参考に一度、JavaScriptを見て・さわって・覚えていきましょう。

この記事では、プログラミング初心者の方に、JavaScriptを実際にコーディングする開発環境について紹介します。
この記事を参考に一度、JavaScriptを見て・さわって・覚えていきましょう。

この記事で解決できること
①JavaScriptをパソコン上でコーディングする方法がわかる。
②簡単なHTML、CSS、JavaScriptをコーディングして動きを確認する。

目次

1.PC上(ローカル環境)でJavaScriptを開発しよう

プログラミング初心者で、開発環境を構築したり、準備したりするのが面倒でちょっと敷居が高いなと感じている方でも、ご自身の端末でJavascriptの開発をすぐに始めることができます。

準備するのは
 ・ブラウザ
 ・テキストエディタの2つのみです!

手順①パソコン上に作業用フォルダを作成しましょう。

パソコン上の任意の場所に作業フォルダを作成します。
フォルダの作成後、HTMLファイル、CSSファイル、JavaScriptファイルをそれぞれ3つ作成していきます。

作業フォルダの作成
作業フォルダの作成

手順②HTMLファイルを作成して準備しましょう。

作業用フォルダに「index.html」ファイルを作成しましょう。エディタは、WINDOWSであれば「メモ帳」でも大丈夫です。Macであれば標準のテキストエディタ「TextEdit」でOKです。

次のソースコードをエディタで「index.html」ファイルを開いて、コピーして編集してください。

<!doctype ntml>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>JavaScriptの勉強</title>
    <meta name=description contents="初心者のためのJavaScript勉強法">
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <h1>初心者のためのJavaScript勉強法</h1>
    <p>JavaScriptはとっても楽しいプログラム言語</p>
    
    <form><input type="button" value="今日は何日?" onClick="getDate()"><script src="yyddmm.js"></script></form>
    <br>
    <span id="show_date"></span>
    
  </body>
</html>

手順③CSSファイルを作成して準備しましょう。

作業用フォルダに「style.css」ファイルを作成しましょう。エディタで「style.css」ファイルを開いて、下記のソースコードをコピーして編集してください。

@charset "UTF-8";
body {
  background-color: Pink;
}
h1{
  color: Blue;
}
p{
  font-size: 20px;
}

cssファイルは、(Cascading Style Sheet)の略称です。スタイル記述言語と言い、スタイルシートを記録したファイルです。ファイル名の標準の拡張子は「.css」。Webブラウザなどで読み込んでWebページにスタイルを適用することができます。

手順④JavaScriptファイルを作成して準備しましょう。

作業用フォルダに「yyddmm.js」ファイルを作成しましょう。エディタで「yyddmm.js」ファイルを開いて、下記のソースコードをコピーして編集してください。.js という拡張子であることを確認してください。これにより、JavaScript であることが認識されます。

function getDate() {
  document.getElementById("show_date").innerHTML = getYmd();
}

function getYmd() {
	var today = new Date();
	var year = today.getFullYear();
	var mon = today.getMonth()+1;//0 が 1 月、 1 が 2月、 11 が 12 月に相当
	var day = today.getDate();

	//出力用
	var ymd = "今日は、" + year + "年" + mon + "月" + day + "日です。" ; 
	return ymd;
}

なお、JavaScriptは、下記のようにscriptタグを用いて、HTMLファイルに直接、書くこともできますよ。
<script>
// JavaScript をここに書きます。
</script>

手順⑤HTMLファイルを表示する。

ではさっそく作成したHTMLファイルをブラウザで表示してみましょう。「index.html」ファイルをダブルクリックして開いてください。次のHTMLファイルが画面表示されます。

実行結果①

では画面にある「今日は何日?」ボタンをクリックしてください。JavaScriptが実行され、ボタンの下に今日の日付が自動表示されます。

実行結果その②
実行結果②

2.Web上でJavaScriptを開発しよう

「Web Maker」を使ってみよう①

「Web Maker」はブラウザ上でHTML、CSS、Javascript等のコードを書くことが出来るWEBアプリケーションです。
初心者がコードにJavaScriptに触れる際、とてもフレンドリーなツールです。

「Web Maker」は、Google Chromeの拡張機能として提供されており、利用するには「Google Chrome」が必要となりますので、Google Chromeをまだインストールしていない方は、先にインストールしましょう。

通常は、HTML、CSS、Javascript等にコーディングした後、保存してブラウザで動作確認を行いますが、「Web Maker」は、コーディングするとリアルタイムで実行結果が画面右側に表示され、便利なツールです。

オフラインでも使用することができますので、ネットに繋がらない時にもHTML、CSS、Javascript等にコーディング結果が簡単にできますよ。

「Web Maker」はこちらから

  

「Web Maker」を使ってみよう②

さきほどのHTMLファイル、CSSファイル、JavaScriptファイルを「Web Maker」のサイト上でコーディングしてみましょう。すると画面右側にリアルタイムに実行結果が表示することが確認できます。

web_makerの実行結果

まとめ

JavaScript開発環境のまとめ

JavaScriptの開発にチャレンジ!

今回は初心者でもできるJavaScriptの開発環境の構築&実行方法について解説しました。JavaScriptに限らず、プログラミングスキルを身につけるためには、実際に手を動かして、プログラミングをしながら学習することがもっとも近道です。avaScriptの開発環境を整え、JavaScriptについて学んでいきましょう。

この記事が気に入ったら
いいねしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次