JS は好きですか？女子小学生だと思って悶々したおっさんはおまわりさん呼びましょうかねw
冗談はさておき、セブ島ロックダウン。インプットのチャンスです。もっとエンジニアとして飛躍したいですし、自分に落とし込むためにJSについて数回に分けてブログを書いてみることにしました。
JS(JavaScript)ってなんぞ？
通称JS、JavaScriptとはブラウザ専用に開発されたスクリプト言語です。生まれたのは意外と前で、インターネットが普及し始めた1990年代はじめでNetscape社が開発しました。
当時人気だった言語 Java にあやかって、JavaScript と名付けられました。ちなみに JavaScript は Sun Microsystems, Inc.の登録商標しているので、JSと呼ぶのが好まし いです。
JSはHTMLのなかに記述することで、Webブラウザ上で実行されます。ボタンをクリックしたらシュルシュル〜〜と上にページがスクロールしたり、Webサイトなどに動きやインタラクティブ（対話型）な実装ができるのが魅力です。
また、Netscape社とMicrosoft社による実装には若干の違いがあり、ECMA によって ECMAScript として標準化されています。
現在のバージョンは2019年6月に公開された10が最新です。毎年公開されているようです。ツライ。
ES6(ECMAScript2015)で破壊的なくらいいろんなものが変わって「あわわわっ」てなったと、記憶しています。
こんな話をしているとゾッとしてしまうのでもうやめましょうw
昔はクライアントサイドで使う言語でしたが、2010年以降 Node.js の登場でサーバーサイドでも使えるホットな言語になりました。
現在はSPAとか作れるエンジニアなどがとても人気があります。
JSでできることをもっと掘り下げる
目的を履き違えて使うことほどナンセンスなことはないので、まずはJSでできること、得意なことをを理解しておきましょう。
- アニメーション
- ユーザーのアクションに沿った処理
- フォーム操作
- 画像・音声・動画の取り扱い
- ローカルデータを取り扱う
とりあえず、JSを書いてみようぜ！
JS を書くためには Web の仕組みを知っておきましょう。 HTML や CSS、画像は一回一回サーバーにこのデータ欲しいから見せてーってリクエストというものを送ります。それに対してサーバー側からこのファイルだねーってい うレスポンスが返ってきます。 HTMLはWebブラウザに表示されるために上から順番に読み込まれていきます。JS は CSS 同様、コードが長くなって邪魔なので外部ファイルで読み込むのが一般的です。
JS は HTMLの中で実行されます。HTML、CSS などを解析されて初めてWebブラウザにWebサイトがレンダリング（描画）されますが、JSが変なところで読み込まれると、解析が始まってしまいページのレンダリングが阻害されてしまうことがあります。なので以前はレンダリングの阻害を避けるため、の閉じタグの手前あたりに書くのが主流でした。
ES6以降、読み込むタイミングを最適化する async と defer という属性が登場し非同期で読み込まれるようになりました。async は即時実行されるのに対し、defer はHTML解析後、読み後に実行されます。
なので要素の操作をしたい場合は積極的に defer 属性を付与すると○。
さて前置きが長くなりましたが、以下のようにファイルを早速作ってJSを書いてみましょう。 カンタンですが、警告ダイアログというものを使ってみましょう。
window.alert(【ここに表示したいメッセージ】);警告ダイアログに表示したいオプションの文字列または、文字列に変換されて表示されるオブジェクトです。 window とはDOM文書を収めているウィンドウのことで、実際コードを書くときは省略することができます。
以下のような感じで、ご自身のディスクトップにディレクトリとファイルを作ってみましょう。 プログラミングの第一歩でもある「Hello World」を一度出力してみましょう。
ファイル構造
js-lesson/
├ index.html
└ js/
└ index.jsindex.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2020年から始める JS 入門 1</title>
<script src="js/index.js" defer></script>
</head>
<body>
</body>
</html>index.js
alert('hello world');まとめ
とてもカンタンではありますが、プログラミングの大切な第一歩です。 プログラミングを始めた方は特に以下をしっかり気をつけてください。
- インデントをきちんと揃える
- 半角を全角にしないように気をつける
- 綴りを気をつける
最後までお読みいただきありがとうございました。
かみーゆ/フロントエンドエンジニア
資金ゼロからフィリピンで起業した海外ノマドエンジニア。IT業界10年以上でテクニカルディレクター（技術責任者）・エンジニア講師・ブリッジSEを経てLenzTechnologies Inc.を設立し、代表を務める。CMS concreteCMSエバンジェリスト。テックブログ以外も「磨耗しない人生」や「海外ノマド」のライフスタイルについて発信。好きなものは肉とハイボール。
