100日後にエンジニアになるキミ - 18日目 - Javascript - JavaScriptの基礎1 #JavaScript

今日からプログラミングの方に入って行きます。
本日はJavaScriptというプログラム言語についてのお話です。

JavaScriptについて

JavaScriptはwebブラウザーなどで動作するスクリプト言語で
ESxxというバージョンで呼ばれたりしています。

6th editionの「ECMAScript2015」以降は年号で呼ばれており
新仕様は従来のものよりも効率的にコードが書けます。

JavaScriptはHTMLのスクリプトタグに直接記述するか
jsファイルとして分離しておく方法があります。

jsファイルはスクリプトタグの中身を書き
.js と拡張子を付けて保存します。

なおJavaScriptとJavaは別物であるため
略称をJavaにすることは混乱を招きます、間違えないようにしましょう。

もしJavaって呼んでいる人がいたら
DS(だっせえ！！！)って言ってあげましょう。

略称は js です。jkでもjdでもなくwwwwww

Javascriptはブラウザ上ではwebサイトの機能部分を司ります。
PCやスマホなど、ブラウザ側のことをクライアントと読んでいます。

一方で、JavaScriptはサーバー上でも動きます。
こちら側はサーバーサイドと読んでいたりします。

クライアントサイドだけでなく
Node.jsなどでサーバー側でも処理をさせることができるので
両側を同じ言語で書けることも大きな利点となります。

フロントエンドエンジニアになるならば必須
サーバーサイドエンジニアになるとしても覚えておいて
損はないと思います。

習得にはやや癖があるので初めて覚える言語としては
難しいかもしれません。

もし難しいと感じた場合は、後日行うPython言語の講義を先に見てから
こちらを参照してみてください。

JavaScriptの動かし方

HTMLのscriptタグに書く方法

jsファイルに書いてHTMLから呼び出す方法

ブラウザーで直接記述して動かす方法

などがあります。

もっとも簡単な方法として
ブラウザーから動かしてみましょう。

GoogleChromeを立ち上げて「右クリック」から「検証」を選択。

検証ツールを開いたらメニューの中から「Console」を選択。

これでスクリプトを直接打ち込む準備ができました。

試しに 1 + 1 とか打ち込んで「エンターキー」を押して実行してみましょう。

コードの実行結果が反映されるはずです。
短めのコードの確認は簡単に行うことができます。

次にHTMLに打ち込んでみましょう。

sample.html

<!DOCTYPE html>
<html>
  <head>
    <script>
        console.log('おはよう');
    </script>
  </head>
  <body>
  </body>
</html>

HTMLでスクリプトを実行させるには
スクリプトタグ<script> ~ </script>が必要です。

タグの中に実行するコードを書きます。

ブラウザでみてみましょう。

何も写っていませんね。

上記のコードconsole.logはコンソール上に結果を出力するコードになっています。
コンソールは検証ツールの中にありますので、検証ツールからConsoleをみてみましょう。

コンソールの方には結果が反映されています。

Javascriptではコンソールにだけ表示をさせたり
HTMLの方に反映させたり、結果の出力先を制御できます。

確かめながらコードを書く際はコンソールに出力すると分かりやすいです。

コードはheadタグやbodyタグの中に書くことができます。

次にjsファイルに分離して書く方法です。
まずはjsファイルを用意します。

sample.js

console.log('sample.js');

HTML側では読み込むjsファイルの指定を行います。
<script type="text/javascript" src="ファイルパス"></script>

jsファイルをHTMLファイルと同じ場所においている場合は
jsファイル名を書くだけで実行できます。

sample.html

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="sample.js"></script>
  </head>
  <body>
  </body>
</html>

結果を見てみると

動かし方は自由ですが
WEBサイトとして公開する場合、ScriptファイルとHTMLファイルを分けておくと
複数人で開発する場合、後々都合が良くなります。

最初からjsファイルに書き出しておいて、それをHTMLから呼び出すのが良いでしょう。

通常のWEBサイトの場合
CSS , Javascript , 画像などのファイル種別ごとに階層を区切って
配置することがよくあります。

コードをどこに書くのかは分かりやすい配置を考えながら書くと良いでしょう。

まとめ

JavaScriptの動かし方を把握しておき
すぐに動かせる体制を取っておこう

明日からはプログラムの文法に。

君がエンジニアになるまであと82日

作者の情報

乙pyのHP：
http://www.otupy.net/

Youtube：
https://www.youtube.com/channel/UCaT7xpeq8n1G_HcJKKSOXMw

Twitter：
https://twitter.com/otupython