JavaScriptハンズオン

Transcript

1. JavaScriptハンズオン Github: @sor4chi 𝕏 Twitter: @monica18_pr
2. 今日の目標 JavaScriptの知識を再確認する JavaScriptの文法を再確認する
3. 1. JavaScriptの知識
4. JavaScriptができること ブラウザに動きをつける ボタンを押したら表示を変える HTTP通信を行う フォームの入力をチェックする サーバーを動かす ファイルを読み書きする(OSの機能を使う) HTTP通信を行う データベースを操作する
5. JavaScriptの特徴 ランタイムが必要 動的型付け
6. ランタイムが必要 ランタイムとはプログラムを実行するための環境のこと。 PythonならPython2やPython3というように、大体の言語は 文法 + ランタイムで提供されている。
7. しかし、JavaScriptは ECMAScript という文法のみが定義さ れており、ランタイムはそれぞれ色々なものがある。 例えば...
8. ブラウザのJavaScriptエンジン V8(Chrome) SpiderMonkey(Firefox) JavaScriptCore(Safari)
9. サーバーサイドのJavaScriptエンジン Node.js Deno Bun
10. 動的型付け 変数の型を宣言する必要がない。 初心者でも扱いやすい反面、プログラムが複雑 or 大規模にな ってくると、型がないことによる問題が出てくる。
11. 文字列を想定していた変数に数値が入っていた 配列を想定していた変数にオブジェクトが入っていた
12. そこで、 TypeScript というJavaScriptに型をつけることが できる拡張言語がある。 これは後日TypeScriptハンズオンで扱うのでお楽しみに。
13. 2. JavaScriptの文法
14. 文法と言っても完全解説できるほどシンプルな言語ではないの で、基本的な事項のみ触れます。 説明も端折る部分があるので気になったら調べるなどして理解 を深めてください。
15. 変数 変数は var 、 let 、 const の3種類がある。
16. var 一番古い変数宣言の方法 変数の再宣言ができる ほとんど使わない 自分も使ったことほぼない
18. let 変数の再宣言ができない 変数の再代入ができる
20. const 変数の再宣言ができない 変数の再代入ができない
22. データ型 JavaScriptに限らず、プログラミング言語にはデータ型という ものがある。 これは動的型付け言語(=型を宣言しない言語)でも同じく、内部 ではデータ型が存在している。 例えば
23. これらは、単一のデータを持つ最小単位のデータなので「プリ ミティブ型」と呼ばれる。
25. これらは、複数のデータを持つことができるので「オブジェク ト型」と呼ばれる。 C++で言うところの構造体がオブジェクト型に近く、Vectorや Mapなどのコンテナが配列型に近い。 const は再代入を禁止する宣言であって、変数の中身を変更 することを禁止するものではないので注意。 他にもSetとかMapとか色々あるけど、今回は触れない。
26. 演算子 演算子とは、数値や文字列などのデータを操作するための記号 のこと。
27. 算術演算子 + 加算 - 減算 * 乗算 / 除算 % 剰余
29. JSは算術演算が数値型以外のデータに対しても行えてしまう。
31. みての通り、文字列型と文字列型を足すと文字列の連結にな る。 また、数値が演算に含まれるとtrue/falseは1/0に変換された り、文字列が演算に含まれると数値に変換されたりする。 なのに数字にキャストできない文字列が含まれると文字列の連 結になる。
32. こんな感じでJavaScriptは理解不能な挙動をすることがしばし ば... これも数十年の歴史がある言語なので、たびたびの仕様変更に よる互換性の問題があるためそう簡単には変えられない...のか も
33. TypeScriptを使えば解決できます！！！！！！！！！！ これも後日...
34. 代入演算子 = 代入 <op>= 代入演算子 ++ インクリメント -- デクリメント 言わずもがなの代入演算子。
35. == 等価 === 厳密等価 != 不等価 !== 厳密不等価 > 大なり < 小なり >= 以上
37. == と === の違いは、 == は型の変換（キャスト）を行っ てから比較を行うのに対し、 === は型の変換を行わずに比較 を行うこと。厳密等価の方が安全なので、基本的には === を 使うことを推奨。
38. 論理演算子 && 論理積 || 論理和 ! 否定
39. まあ、普通の論理演算子ですね。
40. 三項演算子 条件式 ? 式1 : 式2
41. 条件式がtrueなら式1、falseなら式2が評価される。 if文よりも簡潔に書けるが、ネストすると読みづらくなるので 注意。
42. 例えばこんなやつ あくまでも綺麗に書く手段なので汚くなってしまうのであれば 使わない方が良い。
43. その他の演算子 typeof 型を返す in オブジェクトにプロパティが存在するか delete オブジェクトのプロパティを削除する などなど、あんまり使わないと思うので割愛。
44. 制御構文 プログラムの流れを制御するための構文。
45. 条件分岐 if 条件式がtrueの場合に実行 else 条件式がfalseの場合に実行 else if 条件式がfalseの場合に実行
47. 繰り返し while 条件式がtrueの間、実行 do while 条件式がtrueの間、実行(使わん) for 初期化式、条件式、更新式を指定して実行
49. JSでは配列に対しての繰り返しを行うことがほとんどで、大体 が .map や .forEach を使うので、あまり使わないかも。
50. 例外処理 try 例外が発生する可能性のある処理 catch 例外が発生した場合に実行 finally 例外の有無に関わらず実行
52. 例外処理は、例外が発生した場合に処理を行うためのもの。 例えば、APIからデータを取得する処理を行う際に、ネットワ ークエラーなどでデータが取得できなかった場合に、エラーを 表示するなどの処理を行うために使う。
53. 関数 処理をまとめておくためのもの。
54. 関数の種類 関数宣言 関数式 アロー関数
55. 関数宣言
56. 関数式
57. アロー関数
58. さらに短く書くこともできる。 returnだけのアロー関数は、returnを省略することができる。
59. 違いはあんまり気にしなくていいので、好きな方を使うと良 い。 ただ、それを使うと決めたら、一貫して使うようにすること。
60. 3. 文法テクニック
61. 配列の高階関数操作 配列の高階関数操作は、配列の要素を操作するためのもの。
62. map 配列の要素を一つづつ取り出して、新しい配列を作成する。
63. 問題1 配列 [1, 2, 3, 4, 5] の要素をそれぞれ2倍した配列を作 成して、コンソールに出力してください。 最初の一行は としてください。
64. 問題1の解答
65. 問題1の解答(短く書く)
66. filter
68. 問題2 配列 [1, 2, 3, 4, 5] の要素のうち、偶数の要素だけを取 り出した配列を作成して、コンソールに出力してください。 最初の一行は としてください。
69. 問題2の解答
70. find
72. 問題3 ちょっと難しいかも 配列 [1, 2, 3, 4, 5] の要素のうち、真ん中の要素を取り 出して、コンソールに出力してください。 ただし、配列の要素数を取得する方法は なんかの配 列.length で取得できます。また、切り捨ての関数は Math.floor( 小数点以下の数字) 、切り上げの関数は Math.ceil( 小数点以下の数字) で取得できます。 最初の一行は
73. 問題3の解答
74. 他にも forEach や reduce など面白い高階関数はたくさん あるので、興味があれば調べてみてください。
75. オブジェクトの分割代入 オブジェクトの分割代入は、オブジェクトのプロパティを変数 に代入するためのもの。
76. これを分割代入を使うと
77. と書くことができる。 めっちゃ便利なので、覚えておくと良い。
78. デフォルト引数 デフォルト引数は、引数に値が渡されなかった場合に、デフォ ルトの値を設定するためのもの。
79. JSでは、引数に値が渡されなかった場合、 undefined とい う 値 が渡される。 (型がないので undefined という値を渡すしかない。)
80. これをデフォルト引数を使うと、上のコードはこのように書く ことができる。
81. スプレッド構文 スプレッド構文は、配列やオブジェクトを展開するためのも の。
82. 配列の展開
83. オブジェクトの展開
84. 4.ブラウザ側のJS ブラウザ側には、 window や document といったブラウザ の値取得や操作ができるに関するグローバルオブジェクトが存 在する。 もちろん ECMAScript の仕様には載ってないので、 V8 や SpiderMonkey といったブラウザのJSエンジンによってES を拡張して実装されている。
85. window window は、ブラウザのグローバルオブジェクトで、 window オブジェクトのプロパティやメソッドは、 window を省略して書くことができる。 （多分省略する方が多い。）
87. document document は、 DOM を操作するためのオブジェクト。
88. 確認 DOM とは、Document Object Modelの略で、HTMLの要素 をオブジェクトとして扱うための仕組み。 つまり HTMLの要素 -> JSのオブジェクト として扱えるようにするものが document であり、それを DOM 操作と呼ぶわけだ。
89. DOM操作1. 要素の取得
90. DOM操作2. 要素の作成
91. DOM操作3. 要素の追加
92. DOM操作4. 要素の削除
93. などなどDOM操作も色々できます！
94. 5. サーバーサイドのJS 今回は、サーバーサイドのJSとして、 Node.js を使ってみ る。
95. ファイルシステムへのアクセス 例えば、サーバーサイドのJSで、ファイルを読み込んで、その 内容をブラウザに表示するということをやってみる。
96. ファイルの読み込み
97. ローカルの、jsと同じディレクトリに test.txt というファ イルを作成して、その中に好きな文字列を書いておく。 node JS ファイル名 で実行すると、 test.txt の中身が表 示される。
98. ファイルの書き込み
99. test.txt の中身が Hello World になる。
100. HTTPサーバーの作成
101. これだけで、 localhost:3000 にアクセスすると、 Hello World が表示されるサーバーが作成できる。 ただNode.js単体のWebサーバーはとても書きづらいのであま り使われない。代わりにFrameworkを使う。
102. 6. フレームワーク こんな感じで、ブラウザのVanilla JSも、サーバーサイドの Vanilla JSも、それぞれの機能を使って、色々なことができる ように提供してくれてるが、そのぶん、色々と書くのが大変。 そこで、フレームワークを使うと、簡単に色々なことができる ようになる。
103. フレームワークの種類: フロントエンド(ブラ ウザ側) React Next.js(React) Remix(React) Vue.js Nuxt.js(Vue.js) などなど
104. フレームワークの種類: サーバーサイド Express Hono.js Koa などなど
105. 色々なフレームワークを触って比較できるようになると強いと 思います。
106. ご清聴ありがとうございました 質問などあれば気軽にどうぞ！