【超初心者向け】JavaScriptの基本的な書き方講座

  • このエントリーをはてなブックマークに追加
  • Pocket
javascriptの書き方

JavaScriptはHTMLの上で動いていく。

なので、HTMLファイルに直接書き込んだり、外のJavaScriptファイルをHTMLファイルから見に行くことによって動かす形になる。

このページではJavaScriptの基本的な書き方をお伝えしよう。初心者の方は参考にしてほしい。

JavaScriptの書き方

JavaScriptはHTMLを操作できるプログラミング言語だ。

他にも色々とできるが、基本的に「HTMLを色々と動かせる!」くらいに考えておけばOKだろう。

HTMLとJavaScriptは異なるプログラミング言語だ。だから、この2つを一緒にするには特定のルールに従ってプログラミングコードを書くことが必要になる。

JavaScriptコードの書き方には、大きく分けて以下の2つがある。

  • 直接定義
  • 外部定義

これらは書きたいプログラムの目的や種類によって選ばれる。どちらの方法でも対処できるように書き方を整理しておこう。

JavaScriptの記述方法1: 直接定義

直接定義とは、HTMLファイルに直接JavaScriptのコードを書く方法のことをいう。イメージ的にそのままだ。

javascriptの書き方

要するに1ファイル目も2ファイル目も、3ファイル目にもJavaScriptを書いていく方法だ。

ルールはいたってシンプルでHTMLファイルの中に<script>タグを挿入し、そこにコードを書くだけでよい。

HTMLファイルの中にJavaScriptを直接定義する最も基本的なサンプルは、以下の通りだ。実際に書いてみよう。

ファイル名はなんでもいいが、最後に「.html」をつけてHTMLファイルにしておく。

このソースコードをブラウザで実行すると以下のようになる。

直接定義したJavaScriptからの書き込み

<script>タグの定義位置

サンプルの<script>タグが挿入されている位置に注目してほしい。

いくつか流儀があり、実は決まった位置がない。

最近の流行りは<body>のエンドタグのすぐ上、つまりHTMLの最後にコードを書く方法となっている。

が、<head>タグの中に入っていることも多いので、どちらかで書くといいだろう。

どちらがいいかはもう少しJavaScriptについて理解してからで十分だ。まずは気にせず行こう。

JavaScriptのコードの書き方2: 外部定義

外部定義とは、HTMLには「このファイルを読み込む!」という宣言だけを書き、JavaScriptのコード自体は外部ファイルに分割して書く方法のことをいう。

同じJavaScriptを何度も書く必要がないし、変更があったときにJavaScriptファイルだけ編集すればいいので楽だ。

外部定義したJavaScriptからの書き込み

外部定義はscriptタグにsrc属性を指定してコードを書くだけでよい。my-sample.jsというJavaScriptファイルを用意したら

<script src="my-sample.js"></script>

とHTMLファイルに書けば、読み込んだことになる。""の中にJavaScriptのファイル名を書けば言い訳だ。

では、実際に書いてみよう。

 

HTMLファイルの中にJavaScriptを外部定義する基本的なサンプルは、以下の通りだ。

HTMLファイル

ファイル名はなんでもいいが、最後に「.html」をつけてHTMLファイルにしておく。

JavaScriptファイル

こちらはmy-sample.jsという名前をつけよう。

このソースコードを用意しておいて、HTMLファイルをダブルクリックしてみよう。

外部サーバーからのJavaScript外部定義ファイルの読み込み

ここで覚えておきたいのは、src属性は自分で用意したサーバー内のファイルだけではなく、世界中にあるサーバーのファイルURLを指定することができるということだ。

具体的なサンプルとして、JavaScriptライブラリであるjQueryを公式配信サーバーから直接自分のHTMLファイルに読み込む例を挙げておく。

ライブラリというのはまだわからないと思うが、便利な道具箱のようなものだと思って欲しい。これを読み込んでおくと、JavaScriptを簡単に書けたりする。

注意: 外部ファイルを自サーバー以外から読み込む際は、セキュリティリスクが常に付きまとうことを意識し、特に配布元に十分注意すること

直接定義と外部定義の比較

以上みてきたようなコードの書き方の違いの他に、この2つの定義方法にはそれぞれメリットデメリットがある。

 

直接定義

外部定義

メリット

読み込みが早い

HTMLとJavaScriptが分離され再利用しやすい、管理しやすい

何度も同じJavaScriptを書かなくて済む

デメリット

HTMLとJavaScriptが混在しコードが乱雑になる、管理しにくい

ファイルが増えると、読み込みが遅くなる

使いどころ

テストまたは小規模なプロジェクト、他人と共有しないもの

大規模なプロジェクト、ライブラリなど他人と共有するもの

基本的には外部に書くことのほうが多い。なんらかの理由があるときに直接書くことが多くなる。色々なファイルで呼び出して使えたほうが便利だからだ。

これらの特徴を理解しておき、JavaScriptの効果的なコーディングを心がけよう。

まとめ

このページではJavaScripの基本的な書き方についてご紹介した。まだ何を書いているかはわからないと思うが、書く場所がわからないと何もできない。

まずはこの2つの方法があることを知ることがJavaScriptの第一歩だ。

  • このエントリーをはてなブックマークに追加
  • Pocket

このページの続きや関連ページは下記から一覧で確認できる。

短期間でエンジニアになる方法

・「まったくの初心者だけどエンジニアになりたい!」

・「プログラマーとして転職をしたい!」

という方はリナックスアカデミーの資料を見てみてください。短期間で未経験からエンジニアになることができるスクールとして15年間選ばれ続けてきた理由やノウハウが載った資料です。

エンジニアの入り口に立つために必要な勉強技術の最新動向本当に使えるIT資格学習に役立つ国からの奨励金などの情報が詰まっています。

無料で2,3日中にお手元にお届けします。


資料を見てみる

SNSでもご購読できます。

コメントを残す

*