JavaScript超入門!① とりあえずプログラムを動かしてみよう! 素人監修

素人監修とは

僕の素人の友人がブログ記事のみで内容が理解できたものをアップするというシリーズです!

まずはとりあえず動かせる環境を用意しよう

素人の人が最初に覚える言語のおすすめとしてJavaScriptがよく挙げられます。

その理由は何と言っても開発環境を整えるのが他言語と比べて圧倒的に容易だからです。

なのでとりあえずJavaScriptが動かせる環境を作っていきましょう!

用意するものは

  • テキストエディタ – Atomがおすすめ!
  • ブラウザ – 普段使用しているものでOK!
  • index.html

上記の3つだけです。

JavaScriptはhtmlファイルに直接書き込むことができます!

なのでまずはindex.htmlから用意していきましょう!

<!DOCTYPE html>
<html lang="js" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>JavaScript 入門</title>
  </head>
  <body>
    <script type="text/javascript">
   </script>
  </body>
</html>


基本的なhtmlの雛形の中に<script>というタグがありますね!

この中にJavaScriptのコードを書くことでJavaScriptを動かすことができます!

では超入門として一番簡単なプログラム文のalertを使ってみましょう!

<script>タグの間に下記のコードを記入してみてください。

alert("Hello World!");


全体像としてはこんな感じです。

<!DOCTYPE html>
<html lang="js" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>JavaScript 練習</title>
  </head>
  <body>
    <script type="text/javascript">
     alert("Hello World!");
    </script>
  </body>
</html>


このファイルをブラウザで開いてみてください!

開き方はファイルをブラウザ常にドラッグ&ドロップするか、

Macの場合はファイルを右クリック→このアプリケーションで開く→開きたいブラウザをクリックします。

Windowsの場合はファイルを右クリック→プログラムから開く→開きたいブラウザをクリックします。

そうするとこのようなポップアップが表示されると思います。


このような形で表示されれば成功です!

alertの後ろの()に記入した文字が表示されているのがわかるかと思います。

alert("あいうえお");


と入力すると


このようになります!

開発環境が整ったところでJavaScriptのいろはを学んでいきましょう!

JavaScriptの基本的なルール


JavaScriptを扱っていく上で大原則のルールがあるので何点か挙げさせていただきます!

実際にコードを書いていかないとイメージが湧きにくいと思うので今はふ〜んくらいの認識で構いません!

大文字と小文字の使い分け


JavaScriptでは大文字と小文字は別の文字となります。

あとで紹介させていただく変数に大いに絡んできます!

コード間のスペースや改行は無いものとなる!


JavaScriptではスペースや改行を自由に設けることができます。

このおかげで読みやすい綺麗なコードを書くことが可能になります!

文の区切りには ; を必ずつける


記事のはじめに動かしたalert文にもalert(“Hello World!”);

のように文章の終わりに ;(セミコロン)をつけることが絶対となります。

はじめのうちは忘れてしまうことが多いので注意しましょう。

次回は変数とデータ型について学んでいきましょう!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です