Web開発講習 第10回 「Javascriptとは」
この資料は？
2023年前期に開催されたteam411新人研修の講習資料です！
Web開発講習で実施した第10回から第16回までの資料を共有します！
すべて通しで学ぶことで、Web開発の基本であるフロントエンド、バックエンドをざっくりと学ぶことができます！！
目的
- モダンJavascriptの文法について学ぶ
- DOM操作の基本を学ぶ
Javascriptとは
Javascriptとは
- javascriptとはブラウザで動的なコンテンツを表示するためのスクリプト言語である
- 動的なコンテンツとは、「ボタンをおしたらカートに商品が入る」といったことだ
- スクリプト言語は単にプログラミング言語とおもってもらっても構わない
- クライアントサイドで稼働する
- サーバーではなく、クライアントのブラウザで稼働する
- クライアントサーバーモデルについては前々回の講習をチェック
Hello World!!
- 次のコードをVSCodeで記入して実行
hello.html
hello.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="hello.js"></script>
</head>
<body>
<p>Hello World!!</p>
<input
id="button1"
type="button"
value="PUSH"
onclick="alertButton()">
</body>
</html>
hello.js
hello.js=
function alertButton(){
alert('Hello World!!');
}
Hello World!! の説明
hello.html
- hello.jsの読み込み
- onclick（クリックしたとき）にhello.jsのalertButton関数を実行
hello.js
- alert（アラート）としてHello World!!を表示
Javascriptの変数
特徴
- 型の宣言が不要
3種類の変数
- var
- 普通の変数
- あんま使わない
- let
- 再宣言できない変数
- よく使う
- const
- 定数のような変数
- 値がときに使う
var.js=
var var_a = 1 // OK
var_a = 2 // OK
var var_a = 3 // OK
let let_a = 1 // OK
let_a = 2 // OK
let let_a = 3 // NG(再宣言)
const const_a = 1 // OK
const_a = 2 // NG（代入）
const const_a = 3 // NG(再宣言)
Javascriptの関数
関数宣言
fun_1.js
function sample(){
alert("test")
}
- 関数名sampleを宣言
無名関数
- 名前を持たない関数
- 関数の「機能そのもの」に焦点
無名関数
- 関数の名前を省略
fun_2.js
(name) => {
alert("hello!" + name)
return true
}
- 関数の「機能そのもの」を変数sampleに格納
fun_2.js
const sample = (name) => {
alert("hello!" + name)
return true
}
配列処理
普通の配列処理
- listのうち、300以上のアイテムからなる集合をresultに格納
list_1.js=
const list = [100, 200, 300, 400, 500]
let result = []
for(let i = 0; i < 5; i++){
if(list[i] >= 300){
result.push(list[i]);
}
}
普通の配列処理の問題点
- 読みにくさ
- 開発者はfor文の内のiを追わなければならない
- 書きにくさ
- 開発者はiを書き換えたりしないように注意しなければならない
- break、continueを考慮
for-of文(拡張for文)
- listの要素をvalueに格納しながらループ
list_2.js=
const list = [100, 200, 300, 400, 500]
let result = []
for(const value of list){
if(value >= 300){
result.push(value);
}
}
for-of文の問題点
- 書きにくさ
- 開発者はイテレータを考慮しないといけない
配列のメソッドを利用
- 主流な書き方
- 配列オブジェクトlistのfilterメソッドを利用
- filterメソッドは引数に無名関数を要求
- valueを引数として、返り値としてvalue>=300の結果返す
- listの値が１つずつvalueに格納していき、value>=300なものだけresultに格納
list_3.js=
const list = [100, 200, 300, 400, 500]
let result = list.filter(
(value) => {return value >= 300}
)
配列のメソッドを利用したメリット
- 読みやすさ
- 自然言語に近い
- 書きやすさ
- 内部イテレータ
- シンプル、簡潔
- 再利用性
美しすぎてコーディング規約でifを禁止する例もある笑
filter
- 配列から１つずつ要素をとりだして、itemにいれる
- 無名関数の返り値がTrueなら通過。Falseなら除去
- そんな配列をうみだす
filter.js
配列.filter((item) => {
処理...
return 条件式
})
map
- 配列化から１つずつ要素をとりだして、itemに入れる
- 無名関数の返り値からなる新しい配列
- そんな配列を生み出す
map.js
配列.map( (item) => {
処理...
return 値
})
例
- 偶数番のstudentIdの人の名前のみ出力
- hello world!!で利用したhello.jsを書き換えて、ボタンを押して実行
hello.js
hello.js
function alertButton(){
const userList = [
{
name: "takeshi",
studentId: 101
},
{
name: "kenji",
studentId: 102
}
{
name: "aiko",
studentId: 103
}
{
name: "hanako",
studentId: 104
}
]
alert(
userList.filter((user) => {
return user.studentId % 2 == 0
}).map((user) => {
return user.name
})
);
}
DOM操作
DOM操作とは
- 要するにHTMLの要素をJavascriptをつかって書き換えること
DOM操作のHello world!! その１
- １回ボタンをおすと「Hello world!!」が表示
helloDom1.html
helloDom1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="helloDom1.js"></script>
</head>
<body>
<input
id="button1"
type="button"
value="PUSH"
onclick="insertButton()">
</body>
</html>
html:helloDom1.js
helloDom1.js
function insertButton(){
const bodyElem = document.getElementsByTagName('body');
const pElem = document.createElement('p')
pElem.textContent = 'Hello world!!'
bodyElem[0].appendChild(pElem)
}
DOM操作のHello world!! その2
- 1回ボタンを押すと「Hello world!!」が「こんにちは世界!!」に
-
helloDom2.html
helloDom1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="helloDom1.js"></script>
</head>
<body>
<p id="hello">Hello World!!</p>
<input
id="button1"
type="button"
value="PUSH"
onclick="changeButton()">
</body>
</html>
helloDom2.js
helloDom2.js=
function changeButton(){
const pElem = document.getElementsById('hello')
pElem.textContent = 'こんにちは世界!!'
}
演習
問題
Javascriptをもちいてマルバツゲームをつくろう！
要件
- 最初のプレイヤーは◯からスタート
- ３×３のマス目に◯か✕を入れていく
- 勝利の判定は不要
- すべてのマスが埋まったらゲーム終了
解答例
game.html
game.html=
<!DOCTYPE html>
<html>
<head>
<title>マルバツゲーム</title>
<style>
td {
width: 100px;
height: 100px;
text-align: center;
font-size: 48px;
cursor: pointer;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>マルバツゲーム</h1>
<table id="game-board">
<tr>
<td onclick="makeMove(0, 0)"></td>
<td onclick="makeMove(0, 1)"></td>
<td onclick="makeMove(0, 2)"></td>
</tr>
<tr>
<td onclick="makeMove(1, 0)"></td>
<td onclick="makeMove(1, 1)"></td>
<td onclick="makeMove(1, 2)"></td>
</tr>
<tr>
<td onclick="makeMove(2, 0)"></td>
<td onclick="makeMove(2, 1)"></td>
<td onclick="makeMove(2, 2)"></td>
</tr>
</table>
<script src="game.js"></script>
</body>
</html>
game.js
game.js=
// プレイヤーXとプレイヤーOを表す定数
const PLAYER_X = 'X';
const PLAYER_O = 'O';
// 盤面の状態を保持する変数
let board = [
['', '', ''],
['', '', ''],
['', '', '']
];
// 現在のプレイヤーを保持する変数（初期値はプレイヤーX）
let currentPlayer = PLAYER_X;
// マスをクリックしたときに呼ばれる関数
function makeMove(row, col) {
// 既にマークがある場合は何もしない
if (board[row][col] !== '') {
return;
}
// 現在のプレイヤーのマークを盤面にセットする
board[row][col] = currentPlayer;
// 盤面を再描画する
drawBoard();
// ゲームが終了した場合は勝者を表示する
alert('プレイヤー ' + currentPlayer + ' のターンです！');
// ゲームが終了していない場合は次のプレイヤーに切り替える
currentPlayer = (currentPlayer === PLAYER_X) ? PLAYER_O : PLAYER_X;
}
// 盤面を描画する関数
function drawBoard() {
const table = document.getElementById('game-board');
const rows = table.getElementsByTagName('tr');
for (let i = 0; i < 3; i++) {
const cells = rows[i].getElementsByTagName('td');
for (let j = 0; j < 3; j++) {
cells[j].textContent = board[i][j];
}
}
}
team411とは？
電気通信大学 ベンチャー工房帰属の大学公認団体です！
社会やクライアントの課題を解決するために、アプリケーションの開発を行います！
自分でプロダクトを考えてコンテストに出場し、資金を獲得して世界に公開するのもOK！
クライアントから依頼をうけて、技術で課題を解決していただくのもOK！
部内の課題を見つけてみんなが便利になるアプリをつくってもOK！
自由な技術系サークルです！！！
興味があればこのメールアドレスまで！
↓↓
team411.apps[at]gmail.com
Discussion