フロントエンドエンジニアを目指している、まゆ(@Ymayu_it)です。
JavaScriptに興味を持つためにじゃんけんゲームの動画をみつつ写経をしました。
この記事では、
- じゃんけんゲームの動画
- JSについて
書いていきます。
目次
youtubeのじゃんけんゲームを写経
この動画でじゃんけんゲームの写経をしていきました!
実際にコードを打つと以下のようなものが完成しました!
(JavaScriptは写経ではなくコピペです。)
動画は英語ですがコードがGithub上でUPされているので写経をすることができました。
今回JavaScriptに興味を持つためにじゃんけんゲームを写経しました。
実際に使われていたのは、
- const
- let
- if
- else
なのでじゃんけんゲームでなぜこれが使われて、どうやって動いているのかを調べていきます。
もりけん先生おすすめのJavaScriptの本で調べる
もりけん先生(@terrace_tech)のおすすめのJavaScript本、JavaScriptの漫画を読んで調べていきます。
また、もりけん先生のおすすめのJavaScriptの勉強方法についてのツイートも自分が忘れないためにも貼り付けておきます。
JavaScriptの学習方法
1. マンガJavaScript読む
2. 改訂新版JavaScript本格入門読む
3. Webページで使われているような部品をJSで作る(タブ、フォーム、ドロワーメニュー、スライドショー、オリジナルゲームを作る、検索ボックス、ページネーション)
4. APIリクエストで得たデータでコンテンツを作る— フロントエンドエンジニア (@terrace_tech) June 30, 2020
JavaScriptで何ができるのかを調べ興味が持てたので1と2へ!
じゃんけんゲームで使われているJavaScript
他の方がじゃんけんゲームでどんなJavaScriptが学べるのか、拝借しました!
JavaScript
- 即時関数
- カプセル化(変数・関数のプライベート化)
- DOMの基本操作(特定要素の取得・クリックイベントの処理)
- canvasの操作方法
- 画像の一部を切り抜く方法
- setTimeoutと再帰関数を使ったアニメーションの実装方法
- アニメーションフレームの概念
これを見てよくわかりません(;;)
(やっていなかったことが原因です><)
おすすめ本で調べたこと
上記のことがさっぱりなので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で意味を持つ予約語でないこと
<script>の記述する場所でよく使うのは②。
理由はページ高速化の手法だから。
②では無理なとき③を使う。
おわりに
じゃんけんゲームで使われていた予約語までしかたどり着かなかった…><
もりけん塾(@terrace_tech)