/【超初心者向け】JavaScriptの基本的な書き方講座2017.03.01【超初心者向け】JavaScriptの基本的な書き方講座JavaScript入門TweetPocketJavaScriptはHTMLの上で動いていく。HTMLファイルに直接書き込んだり、外のJavaScriptファイルをHTMLファイルから見に行くことによって動かす形になる。このページではJavaScriptの基本的な書き方をお伝えしよう。初心者の方は参考にしてほしい。定義と外部定義の比較JavaScriptの書き方JavaScriptはHTMLを操作できるプログラミング言語だ。他にも色々とできるが、基本的に「HTMLを色々と動かせる!」くらいに考えておけばOKだろう。HTMLとJavaScriptは異なるプログラミング言語だ。この2つを一緒にするには特定のルールに従ってプログラミングコードを書くことが必要になる。これらは書きたいプログラムの目的や種類によって選ばれる。どちらの方法でも対処できるように書き方を整理しておこう。定義とは、HTMLファイルに直接JavaScriptのコードを書く方法のことをいう。イメージ的にそのままだ。要するに1ファイル目も2ファイル目も、3ファイル目にもJavaScriptを書いていく方法だ。ルールはいたってシンプルでHTMLファイルの中に<script>タグを挿入し、そこにコードを書くだけでよい。ここにJavaScriptコードを書く</script>HTMLファイルの中にJavaScriptを直接定義する最も基本的なサンプルは、以下の通りだ。ファイル名はなんでもいいが、最後に「.html」をつけてHTMLファイルにしておく。ここにJavaScriptを書くdocument.write('直接定義したJavaScriptからの書き込み');</script></body></html>このソースコードをブラウザで実行すると以下のようになる。<script>タグの定義位置サンプルの<script>タグが挿入されている位置に注目してほしい。いくつか流儀があり、実は決まった位置がない。最近の流行りは<body>のエンドタグのすぐ上、つまりHTMLの最後にコードを書く方法となっている。<head>タグの中に入っていることも多いので、どちらかで書くといいだろう。どちらがいいかはもう少しJavaScriptについて理解してからで十分だ。外部定義とは、HTMLには「このファイルを読み込む!」という宣言だけを書き、JavaScriptのコード自体は外部ファイルに分割して書く方法のことをいう。同じJavaScriptを何度も書く必要がないし、変更があったときにJavaScriptファイルだけ編集すればいいので楽だ。外部定義はscriptタグにsrc属性を指定してコードを書くだけでよい。src="my-sample.js"></script>とHTMLファイルに書けば、読み込んだことになる。""の中にJavaScriptのファイル名を書けば言い訳だ。HTMLファイルの中にJavaScriptを外部定義する基本的なサンプルは、以下の通りだ。HTMLファイルファイル名はなんでもいいが、最後に「.html」をつけてHTMLファイルにしておく。src="my-sample.js"></script></body></html>JavaScriptファイルこちらはmy-sample.jsという名前をつけよう。JavaScriptdocument.write('外部定義したJavaScriptからの書き込み');1document.write('外部定義したJavaScriptからの書き込み');このソースコードを用意しておいて、HTMLファイルをダブルクリックしてみよう。外部サーバーからのJavaScript外部定義ファイルの読み込みここで覚えておきたいのは、src属性は自分で用意したサーバー内のファイルだけではなく、世界中にあるサーバーのファイルURLを指定することができるということだ。具体的なサンプルとして、JavaScriptライブラリであるjQueryを公式配信サーバーから直接自分のHTMLファイルに読み込む例を挙げておく。ライブラリというのはまだわからないと思うが、便利な道具箱のようなものだと思って欲しい。これを読み込んでおくと、JavaScriptを簡単に書けたりする。メリット読み込みが早いHTMLとJavaScriptが分離され再利用しやすい、管理しやすい何度も同じJavaScriptを書かなくて済むデメリットHTMLとJavaScriptが混在しコードが乱雑になる、管理しにくいファイルが増えると、読み込みが遅くなる使いどころテストまたは小規模なプロジェクト、他人と共有しないもの大規模なプロジェクト、ライブラリなど他人と共有するもの基本的には外部に書くことのほうが多い。なんらかの理由があるときに直接書くことが多くなる。色々なファイルで呼び出して使えたほうが便利だからだ。これらの特徴を理解しておき、JavaScriptの効果的なコーディングを心がけよう。まとめこのページではJavaScripの基本的な書き方についてご紹介した。何を書いているかはわからないと思うが、書く場所がわからないと何もできない。この2つの方法があることを知ることがJavaScriptの第一歩だ。TweetPocketこのページの続きや関連ページは下記から一覧で確認できます。・「様々な分野や言語の講師にチャレンジしてみたい」という方はぜひIT講師募集のページをご覧ください。リスキルテクノロジーでは「受講している方々にITを好きになってもらう」ことを目標に、同じ目標に向かって歩んで行ける講師の方を常に探しています。システム開発やインフラ構築などのエンジニアリング経験を活かし、新入社員などの未経験者や経験の浅い初学者の方々に対してITトレーニングを行っていただくことになります。テキストやカリキュラムは事前に用意されており、それらを元に講義を進めていくため、IT講師をはじめて実施する方でも安心してトレーニングを実施できます。IT講師募集のページを見るSNSでもご購読できます。【IT研修専門企業のリスキルテクノロジーです。】エンジニアの入り口に立つために役立つようなコンテンツを日々ご提供していきます。講師や代表やスタッフ陣が毎日楽しく書いています。ご質問・ご指摘等はぜひコメントください。*メールアドレス(公開はされません。*次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。講師スキル向上も目指せますIT講師に応募する。