こんにちは、キノトロープアカデミーです。

「キノトロープアカデミー」は、Web業界のトップランナーである株式会社キノトロープの社員が講師を務めるオンラインアカデミーです。リモートワーク時代に不可欠な「個のスキル」を高め、職人のような「匠」を目指す人を増やしたい。そんな願いを込め、基礎から経営判断、業務フローまで、一生モノのナレッジを惜しみなく公開していきます。

＜入門編 第3回＞
Webサイト制作のフロントエンド
についてお伝えします。

担当は高橋です。

JavaScriptはブラウザ上で動作するプログラミング言語であり、Webサイトに動的なアクションや対話性を与える役割を持ちます。

デバイスや環境を問わず動作するクロスプラットフォーム性、ページをリロードせずに情報を書き換える非同期処理、コードを直接実行できるインタプリタ型といった特徴があり、Node.jsの登場によってサーバーサイドとクライアントサイドを共通言語で開発することも可能になりました。

基本的な文法として、HTML内のscriptタグで囲むことで直接命令文を記述でき、ボタンのonclickといったイベントハンドラを用いることでユーザーの操作に応じた処理をインタラクティブに実行できます。

さらに、同じ処理を繰り返すfor文や条件によって分岐させるif文を組み合わせ、複数の命令をまとめた関数や引数を上手に活用することで、複雑な「九九の表」のような表組みも手動で打ち込むことなく自動的かつ正確に生成することができます。

”Webサイト制作のフロントエンド”をテーマに、
今日お伝えしたいことは3つあります。

前回のHTML/CSSの２つで基本、皆さんが普段見ているWebサイトを作ることができますが、Javascriptによりブラウザ上の動きやアクションを付けることができます。

なお、前提として、今回説明する内容は、
仕事で行う方法や作り方とは異なっています。

入門向けになるべく前提知識がない場合でも説明が出来るように簡素化しておりますが、実際の実務の場合とは異なりますのでご注意ください。

今回も実際に試す環境として、パソコンのOSはWindows 10、他には標準で入っているブラウザ（Edge）とメモ帳のみです。

ですので、すぐにでも試すことの出来る内容になっていますので、この記事で行っているままでも試してもらうことで、おおよその感覚がつかめるかと思います。

JavaScriptとは、一言でいうとブラウザ上で動作するプログラミング言語です。JavaScriptはWebサイトに「動き」を与えます。皆さんが何気なく使用している、フォームの入力（住所の自動入力や検索候補の表示）やサイトのメニューの表示、スライドショー等あらゆるところで使用されています。

JavaScriptには以下のような特徴があります。
クロスプラットフォーム：デバイス（スマートフォンやパソコン、ゲーム機器等）を選ばず様々なブラウザ上で動作する

非同期処理が可能：HTML / CSSと異なり、一度読み込まれたプログラムは非同期（ページのリロード無し）で実行する事ができる

インタプリタ型言語：JavaScriptはコンパイルが不要な言語で、HTML内に直接記述する事で実行する事ができる(インタプリタの逆の言葉はコンパイル)

サーバーサイドとクライアントサイドの共通言語：
Node.jsの登場により、サーバーサイドとクライアントサイドの共通言語が実現した。これにより技術者同士の仕様の擦り合せが容易になり、開発コストを抑えやすくなった

JavaScriptの習得難易度としては、プログラム言語全体から見れば比較的優しくHTMLとCSSを覚えた次のステップとして最適な言語といえます。

JavaScriptにはフレームワークと呼ばれる「枠組み」が提供されています。これらはJavaScriptの記述を簡略化したり、一定の記述ルールで構築したりすることにより複数人で開発を行ってもメンテナンス性を担保する事ができます。

代表的なものはこちらの4つ（Vue、Angular、React、jQuery）になります。

実務ではこられフレームワークのどれか、もしくは複数を採用し構築しますが、本講座では初級編ということもあり、紹介までとさせて頂きます。

では、実際にJavaScriptを書きながら文法や主要な記述を覚えていきましょう。
それではページが表示されたら「Hello!!」と挨拶してくれるプログラムを作ってみみます。

JavaScriptはHTML内に直接記述し実行する事が出来ます。

JavaScriptコードは「alert("Hello!!");"」部分になります。
「alert」というのは（）の中のテキストをダイアログで表示する命令文になります。
「"Hello!!"」は「"（ダブルクォーテーション）」で囲まれていますが、これはJavaScriptで文字列を扱う際のルールになります。

最後に「;（セミコロン）」は1つの実行文の最後に書くお作法です。これは省略することもでき、意見が分かれる所ですが本講座では視覚的に分かりやすいため表示します。
最後にこれらをJavaScriptとHTMLに認識して貰うために<script>（scriptタグ）で括ります。

実際にブラウザで実行してみましょう。
Chromeであれば、アドレスバーのすぐ下にダイアログボックスが出てきて、「Hello!!」と表示されているかと思います。

次はこの「Hello!!」を、ボタンを押した時に表示されるようにしてみましょう。

先程のJavaScriptの実行文である「alert("Hello!!")」をbuttonタグのonclick属性に格納されました。

この「onclick」とは「このボタンが押された時」を指し、buttonタグに付与できる属性になります。

また「onclick」内には直接JavaScriptを記入する事ができ、先程のような<script>（scriptタグ）で囲う必要がありません。

注意点としては、HTMLの属性を括る宣言が「"（ダブルクォーテーション）」なので「'（シングルクォーテーション）」に変える必要があります。

これらの記号は、開始の次にある同じ記号を終了場所と認識するため、すべて「"」にすると「"alert("」と「")"」という扱いになってしまい、エラーになってしまいます。「"」や「'」内で、更に括りたい場合は必ず違う記号を使用する必要があります。

では、ブラウザで確認してみましょう。

「ボタンです」を押すと、先程と同じ「Hello!!」が表示されます。このようにユーザーのアクションに対して、何かしらのアクションを返すことをインタラクティブ（双方向）といいます。

他にも「onmouseover」（ボタンにカーソルが重なった時実行）等があり、命令文の先頭に「on」がつくものを「イベントハンドラ」といいます。

ボタンの他にもフォームの「input」や「select」等にもそれぞれイベントハンドラが用意されているので興味が湧いたら調べてみるのもよいでしょう。

また、実行文を複数同時に書くことも可能です。
このように続けて書くこともできますが、少し見づらくなりますよね。まだ2つの実行文ですが、これがもっと複雑になると流石に大変です。そこで、<script>タグを使用することで見やすく書くことができます。

少し記述量が増えたように見えますが、この記述方法は拡張性があり更に使い回す事もできます。

先程まで実行文が書いてあった箇所に「clickButton()」という単語が入っています。
これは「関数」と呼び、自由に決める事が出来ます。

<script>タグ内の「function clickButton()」と紐付いていて、クリックされると「function clickButton()」内の内容を実行します。

そのため、関数名はなるべく何を行うかが分かりやすく名前を付けると良いでしょう。

また「clickButton()」の「()」は、()内に入れた値を関数内に引き渡す事が出来ることから「引数」と呼ばれます。

この引数を上手に使うことで、一つの実行文で複数個所に展開する事が可能になります。

上記の例では、クリックするとメッセージが出る所までは先ほどと同じですが、メッセージをボタン毎変えるといった内容になります。

では、ブラウザで確認してみましょう。

「こんにちは」、「さようなら」ボタンを押したときにそれぞれ違うメッセージが返ってくるのを確認できたかと思います。

このように関数と引数を上手に使う事で、一つの実行文から異なる結果を返すプログラムを作ることができます。

前回の記事で99の表を作成しました。もちろん手打ちで作成する事はできますが、大変ですし入力ミスが発生する可能性があります。

これをJavaScriptに置き換える事により、表組みの作成速度と精度を上げることが可能になります。では表組みをJavaScriptで作ってみましょう。

まずは99の表組みの中身を作成していきます。

「document.write」は文字列やタグを表示させるための命令文になります。
JavaScriptの最初の1行目は「<table>」タグを出力する、という命令になります。

2行目の「for (var y = 1; y <= 9; y++) {~」はfor文と呼ばれる繰り返し処理を実行させるJavaScriptの構文になります。

for文は「for (初期値; 条件式; 加算式)」と3つの値から出来ており、今回の場合、「for (乗数《かける数》の1の段; 最大値の段の9まで; 一回実行される毎に＋1の段)」となります。

3行目の「document.write(‘<tr>‘)」は、先程のfor文によりループ処理が行われる毎に「<tr>」タグを「<table>」タグの中に生成します。

4行目の「for (var x = 1; x <= 9; x++) {~」は被乗数《かけられる数》の繰り返し処理になります。

5行目の「document.write(‘<td>’+ (x * y) +‘</td>‘);」で、
ｘ（乗数）✕（掛ける） ｙ（被乗数）の計算により99の表が作成できます。

次に99のX軸とY軸の見出しをJavaScriptで生成する方法になります。

これを作るためにはif文を用いる必要があります。if文とは条件によって処理を分岐させる構文になります。

先程記述したJavaScriptにif文を差し込み生成するタグを分岐させていきます。

まず「if ( y === 0 ) { document.write(‘<th></th>’); }」ですが、これは左上の空白部分に当たります。

「for (var y = 0; y <= 9; y++) {~」の最初のループの値は0になるので、一回目のループ時、「<th></th>」を生成するという意味になります。

「if ( x === 1 && y !== 0 ) { document.write(‘<th>’+ y +‘</th>’); }」は、1列目（Y軸）の見出しの生成になります。
条件式は被乗数が1かつ乗数のループが0以外の時になります。

最後に「if ( y === 0 ) {A} else {B}」の条件式は乗数のループが0の時はAのタグを生成、0以外はBのタグを生成という構文になります。
これにより、1行目の見出しを作成する事ができます。

最後までご覧いただきありがとうございました。

の３点についての内容でした。