Web プログラミング

【もりけん塾66日目】JavaScriptでじゃんけんゲーム

フロントエンドエンジニアを目指している、まゆ（@Ymayu_it）です。

 

JavaScriptに興味を持つためにじゃんけんゲームの動画をみつつ写経をしました。

 

この記事では、

  • じゃんけんゲームの動画
  • JSについて

書いていきます。

 

youtubeのじゃんけんゲームを写経

 

この動画でじゃんけんゲームの写経をしていきました！

 

実際にコードを打つと以下のようなものが完成しました！
（JavaScriptは写経ではなくコピペです。）

 

 

動画は英語ですがコードがGithub上でUPされているので写経をすることができました。

 

今回JavaScriptに興味を持つためにじゃんけんゲームを写経しました。

 

実際に使われていたのは、

  • const
  • let
  • if
  • else

なのでじゃんけんゲームでなぜこれが使われて、どうやって動いているのかを調べていきます。

 

もりけん先生おすすめのJavaScriptの本で調べる

もりけん先生（@terrace_tech）のおすすめのJavaScript本、JavaScriptの漫画を読んで調べていきます。

 

改訂新版JavaScript本格入門 〜モダンスタイルによる基礎から現場での応用まで【電子書籍】[ 山田祥寛 ]
created by Rinker

 

また、もりけん先生のおすすめのJavaScriptの勉強方法についてのツイートも自分が忘れないためにも貼り付けておきます。

 

 

JavaScriptで何ができるのかを調べ興味が持てたので1と2へ！

じゃんけんゲームで使われているJavaScript

他の方がじゃんけんゲームでどんなJavaScriptが学べるのか、拝借しました！

 

JavaScript

  • 即時関数
  • カプセル化(変数・関数のプライベート化)
  • DOMの基本操作(特定要素の取得・クリックイベントの処理)
  • canvasの操作方法
  • 画像の一部を切り抜く方法
  • setTimeoutと再帰関数を使ったアニメーションの実装方法
  • アニメーションフレームの概念

引用：【初心者向け】じゃんけんゲームを作りながら覚えるHTML&JavaScript

 

これを見てよくわかりません(;;)

 

（やっていなかったことが原因です＞＜）

おすすめ本で調べたこと

上記のことがさっぱりなのでJavaScript本格入門を再度最初から読み始めました。

 

以前読んでいたときは全然理解できませんでしたが、マークアップをしていたからか以前よりは理解できました。

 

ただJavaScriptのスクリプト言語やコンパイルやらもわからずにいるので最初から読み進めていきました。

JavaScriptの歴史

歴史について記載されていたので箇条書きでまとめました。

 

  • 昔の名前「LiveScript」→Javaが当時注目だったので名称変更で「JavaScript」へ
  • JavaScriptとJavaは全くの別言語
  • 1990年代後半が全盛期（点滅、ページ切り替えなどのトランジション効果）
  • 装飾過剰でJavaScriptで作ったページは「ダサいページ作成のための言語」で落ち目
  • JavaScript復活理由はAjax（Asynchronous JavaScript ＋ XML）という技術がきっかけ
  • Ajax（非同期通信）はブラウザー標準の技術だけでリッチなコンテンツが作成できる技術
  • 大規模な開発に耐えることのできるオブジェクト指向的な書き方を求められるようになった
  • 2000年後半にHTML5が登場しアプリ開発のためのJavaScript APIを強化へ

 

APIがよくわかっていないので…

  • API（アプリケーションプログラミングインタフェース）はソフトウェアの機能を共有できる仕組み
  • APIのメリット
    より多くの新しいサービスと開発できる
    データを二次利用できる
    効率的に開発できる
    サービス利用者の利便性がアップする
    セキュリティの向上

 

歴史とAPIについては以上。

 

JavaScriptの特徴

次は特徴。

 

  • スクリプト言語
  • オブジェクト指向（再利用/保守性に富んでいる）
  • インタープリタ型の言語
    （プログラムを先頭から逐一解析しコンピューターに理解できる形式に翻訳しながら実行していく言語なのでコンパイル（一括翻訳）言語よりも動作が遅い。コードを書いてそのまま実行ができる手軽さ）
  • ブラウザ外でも使える
    ①Node.js（サーバーサイド中心）
    ②Windows script Host（Windows環境）
    ③Java Platform（Java言語の実行環境）
    ④Android/OS（webページを表示するための組み込みブラウザ）
  • Ajax技術の中核を支える言語

 

特徴は以上。

 

スクリプト言語とコンパイル言語について

よくわかっていないので。

 

【スクリプト言語】
・スクリプト言語はHTML、Python、node.js、シェルスクリプト、VBScript、PHP、perl、Ruby、AppleScript、AWKなど
・スクリプト言語は簡易であることを目的として作られたプログラミング言語のこと、コンパイルが不要でコーディングしたプログラムがすぐに実行可能なもの
【コンパイル言語】
・コンパイルとはコードを機械語に変換すること
・コンパイル言語はJava、Go言語、Scala、C++、C、C#など。

 

スクリプト言語は簡易化したものでコンパイル言語は機械語！

 

ECMAscriptについて

ECMAscriptについて。

 

  • 言語の取り決め
  • 現在ブラウザによってばらつきあり
  • ブラウザ向けのスクリプト言語

 

JavaScriptの中にECMAscriptが入っている！

 

スクリプトをバグを見つける方法

バグを見つける方法。

 

  • 検証ツールでsourceタブ
  • 行番号をクリックでブレイクポイント設置
    →実行中にスクリプトを一時的に停止する機能でデバッグの確認で使う

 

検証ツールのsourceでバグを見つける！

 

JavaScriptの基本的な書き方

JavaScriptの書き方について。

 

 

  • <script>を記述する場所
    ①<body>要素の配下
    ②</body>の直前
    ③<head>要素の配下
  • JavaScript4つの命名規則
    ①1文字目は「英字」「_」「$」のいづれかであること
    ②2文字目以降は1文字目で使える文字または数字のいづれかであること
    ③変数名に含まれる英字の大文字/小文字は区別される
    ④JavaScriptで意味を持つ予約語でないこと (edited) 

 

<script>の記述する場所でよく使うのは②。

 

理由はページ高速化の手法だから。

②では無理なとき③を使う。

 

おわりに

じゃんけんゲームで使われていた予約語までしかたどり着かなかった…＞＜

もりけん塾（@terrace_tech）

Thanks：もりけんさん

 

もりけんさんの『武骨日記』へ

 

Post Views: 40

-Web, プログラミング

© 2020 Mayu_Yamada