初めてのJavaScript~第一章~『HelloWorld』を表示してみよう!【超初心者向け】

Javascript
迷えるリス
迷えるリス

JavaScriptっていうプログラミング言語を学びたいのですが・・・。

ぴかり(夫)
ぴかり(夫)

わかりました。

では、早速やってみましょう。

迷えるリス
迷えるリス

何からやるんでしょう?

ぴかり(夫)
ぴかり(夫)

Javascriptに限らず、プログラミングを始める人が必ず最初にやることがあるんです。

それは、画面に”Hello World”の文字を表示させることです。

迷えるリス
迷えるリス

ほう。

ぴかり(夫)
ぴかり(夫)

それでは、まずJavaScriptを動作させる環境プログラム

Node.jsというものをインストールしましょう。

 

JavaScriptを起動させる方法は、色々ありますが
ぴかり(夫)が知っている中で、一番かんたんに起動できる方法が

Node.jsを利用する方法です。

 

迷えるリス
迷えるリス

インストール…。お金かかります?

ぴかり(夫)
ぴかり(夫)

安心してください。

無料です。

スポンサーリンク

Node.jsのインストール方法

まずは、下記サイトにアクセスして、「Node.js」をダウンロードして下さい。

Node.js — Run JavaScript Everywhere
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

赤丸をクリックして、ダウンロード。

ダウンロードしたファイルを開くと、

以下の画面が表示されるので、「実行」や「Next」ボタンをクリックしていきます。

 

「実行」ボタンをクリック。

 

「Next」ボタンをクリック。

 

「チェックボックス」をクリックして、チェックしてから

「Next」ボタンをクリック。

 

「Next」ボタンをクリック。

 

「Next」ボタンをクリック。

 

「Install」ボタンをクリック。

 

インストールが始まります。

少し待ちましょう。

 

「Finish」ボタンをクリックして、インストール完了です。

迷えるリス
迷えるリス

インストールできました!

ぴかり(夫)
ぴかり(夫)

これで、JavaScriptを実行できる環境ができました。

迷えるリス
迷えるリス

ワクワク。

ぴかり(夫)
ぴかり(夫)

では、”Hello World”を表示してみましょう。

 

プログラミングの第一歩。”Hello World”を表示する。

では、スタートメニューを開いて

「cmd」と入力してEnterキーを押します。

すると、こんな画面が表示されます。

 

ぴかり(夫)
ぴかり(夫)

じゃあ、この画面で「mkdir C:\javascript」と打って、Enterキーを押してください。この操作を、コマンド実行と言います。

mkdirの直後は半角スペースを忘れずに。

 

迷えるリス
迷えるリス

これは、何をしたんですか?

ぴかり(夫)
ぴかり(夫)

あんまり気にしなくても良いんですが、今回のJavascriptのプログラムを配置するフォルダを作成しました。

mkdir という フォルダ作成コマンドです。

迷えるリス
迷えるリス

ふーん・・・。ま、気にしなくても良いんですね。

ぴかり(夫)
ぴかり(夫)

はい。

では、次に「cd C:\javascript」というコマンドを実行します。

こちらもcdの直後には半角スペースを忘れずに。

 

迷えるリス
迷えるリス

コマンド実行しました。

これも何をしたのか、気にしなくても良いですか?

ぴかり(夫)
ぴかり(夫)

まあ、一旦良いでしょう。

ちなみに cd コマンドといって、さっき作成したフォルダの中に移動するコマンドです。

ぴかり(夫)
ぴかり(夫)

では次に、「notepad HelloWorld.js」とコマンド実行してください。

すると、メモ帳が出てきて、以下のメッセージが表示されますので、

「はい」をクリックしてください。

迷えるリス
迷えるリス

メモ帳が開きました。

ぴかり(夫)
ぴかり(夫)

このメモ帳にプログラムを書いていきます。

console.log("hello world!");

と書いて、メモ帳を上書き保存してください。

メモ帳は閉じずにそのままで。

迷えるリス
迷えるリス

書けました!

ぴかり(夫)
ぴかり(夫)

では、コマンド実行の画面に戻って

「node HelloWorld.js」と実行してみてください。

コマンドを実行すると・・・

「hello world!」と出力されました!

迷えるリス
迷えるリス

出ました!「hello world!」

ぴかり(夫)
ぴかり(夫)

では、先ほどのメモ帳に hello world! を好きな文字に変えてみて

実行してみましょう。日本語は使わないようにしましょうね。

迷えるリス
迷えるリス

日本語が使えないのは、何故ですか?

ぴかり(夫)
ぴかり(夫)

う~ん・・・。難しい話になるんですが、文字コードが異なるという問題で正しく表示されないことがあるためです。

この問題については、いずれぶち当たると思いますので、その時に解決しましょう!

“hello world!”“Javascript is difficult!” に変えてみます。

 

このときも保存を忘れずに!

 

それで、コマンド実行してみると・・・。

 

迷えるリス
迷えるリス

おお!変わりました。

ぴかり(夫)
ぴかり(夫)

これで、JavaScriptの第一歩が踏み出せましたね!

 


 

ぴかり(夫)
ぴかり(夫)

同じ内容を、動画でも解説しています。

文字で分かりにくい場合は、こちらもどうぞ

 


 

javascript入門編まとめページはこちらから

はじめてのプログラミング!JavaScript入門【超初心者向け】
迷えるリス ホームページを作っているのですが、もっとゴージャスなページにしたいんですよね! キラキラのエフェクトを出したりしたいんです!! ゴージャスにするには、『JavaScript』を使えるよう...

 

コメント