N予備校プログラミングコース座談会 in 2021.10

N予備校プログラミングコースでは、毎週行っているプログラミング授業のほかに毎月1回の頻度でプログラミングコース座談会という番組を行っています。

この番組では、授業中での回答が難しい質問や悩み、エンジニア就職に関する話など、授業ではメインで扱うことが難しい話題を取り扱っています。

Transcript

1. プログラミングコース座談会 N予備校プログラミングコース
2. プログラミングコース座談会は、プログラミングに 関する相談・悩みへの回答や、プログラミングコー スについての意見交換などを行う番組です。 プログラミングコース座談会
3. • 社会人15年目💼 • 通信インフラ/ネットワーク系 　→SI系派遣プログラマ/コンサル 　　→ニコニコ動画の開発 　　　→エンジニア採用/研修 　　　　→プログラミングの先生 • 神奈川県出身、東京都在住🗼 • 自宅の防音室💬から授業しています！ • 🐈🐈🐕 を飼ってます🐾🐾 小枝 創 -Koeda Hajime - 講 師
4. • ドワンゴエンジニア11年目 • 主に社会人向けプログラミング研修の講師 やってます • たまに運営コメントにも登場します！ • 宮崎県出身です • 新しい授業を11月に始めます ◦ そちらもよろしくお願いします！ 津野 貴大 -Tsuno Takahiro - 本 日 の ゲ ス ト
5. 本日のテーマ オブジェクトって何？？ 非同期処理とは JSDocってどうして必要なの？ JSDocで「ちょっとだけ」型に触れてみよう
6. オブジェクト って何？？ プログラミングコース座談会
7. 　　英語 　 　　　　　 日本語 Object = もの オブジェクトって何？？
8. JavaScriptにおける オブジェクト ↓ “データ”と”機能”を持つ集合体 オブジェクトって何？？
9. "Hello!" プリミティブ型 オブジェクト それ以外 （仕組みや概念など） 12345 true null Promise Date String {} イベント 関数 プロパティ 変数 オブジェクトって何？？
10. "Hello!" オブジェクト JavaScriptの オブジェクト 12345 () => {} [] Promise Date String {} オブジェクトって何？？ Object型 undefined null
11. 基本的にオブジェクトはnewして使う const 変数名 = new オブジェクト名(初期値); const date = new Date(2021, 2, 11); const promise = new Promise(resolve => { resolve() }); const str = new String("Hello!"); オブジェクトには機能がある date.getYear(); // 2021 promise.then(() => console.log("Hello!")); str.toUpperCase(); // 'HELLO!' オブジェクトって何？？
12. プリミティブ型も実はオブジェクト 123 == new Number(123); // true "Hello" == new String("Hello"); // true true == new Boolean(true); // true "Hello".toUpperCase(); // 'HELLO' "Hello".substr(1,3); // 'ell' "Hello"[0]; // 'H' 文字列はString型の関数などが使える オブジェクトって何？？
13. オブジェクトって何？？ JavaScriptのオブジェクト構文 const obj = { name: "Koeda Hajime", getFirstName: () => { return obj.name.split(" ")[0]; } } “データ”と”機能”を持つ集合体 という部分は同じ
14. 非同期処理 とは プログラミングコース座談会
15. 時間のかかる処理を 分担する技術 非同期処理とは
16. データベースへの アクセス ファイルの読み書き 暗号の計算 時間のかかる処理 外部サービスへの リクエスト メディアの処理 （画像/音声/動画） 待ちが必要な処理 非同期処理とは
17. タスクA (5分) 非同期処理とは タスクB (5分) タスクD (5分) タスクE (5分) タスクF (5分) タスクG (5分) Aさん (メインスレッド) タスクC (30分) 同期的な処理 60分
18. 非同期処理とは writeFileSync(“A”); writeFileSync(“B”); writeFileSync(“C”); writeFileSync(“D”); writeFileSync(“E”); writeFileSync(“F”); writeFileSync(“G”); 同期的な処理
19. タスクA (5分) 非同期処理とは タスクB (5分) タスクD (5分) タスクE (5分) タスクF (5分) タスクG (5分) Aさん (メインスレッド) タスクC (30分) 同期的な処理 60分
20. タスクA (5分) 非同期処理とは タスクB (5分) タスクD (5分) タスクE (5分) タスクF (5分) タスクG (5分) Aさん (メインスレッド) Bさん (別スレッド) タスクC (30分) タスクC (30分) 約30分 非同期的な処理
21. writeFileSync(“A”); writeFileSync(“B”); writeFile(“C”); // 別スレッドで実行される writeFileSync(“D”); writeFileSync(“E”); writeFileSync(“F”); writeFileSync(“G”); 非同期処理とは 非同期的な処理
22. リクエスト受付 非同期処理とは 時間のかかる処理 Aさん (メインスレッド) レスポンス返却 同期的な処理 クライアント （ブラウザ） クライアントは時間のかかる処理が終わるまで レスポンスを受け取れない（Webだと致命的） できたよ！ （1時間後）
23. リクエスト受付 非同期処理とは 別スレッドに依頼 Aさん （メインスレッド） レスポンス返却 非同期的な処理 時間のかかる処理 クライアントはすぐレスポンスを受け取れる （安心する＆他の作業ができる） Bさん （別スレッド） クライアント （ブラウザ） 処理を受け付けました 完了までお待ちください
24. 別々のユーザーのリクエスト処理 依存関係のない複数のメディア処理 Webページ表示時の画像読込 非同期化で効率が出る処理 非同期処理とは
25. 前後関係のあるファイル書き込み 依存関係のあるメディア処理 画像の読み込み後に行う画像処理 同期的に処理する必要がある 非同期処理のケース 非同期処理とは
26. タスクA (5分) 非同期処理とは タスクB (5分) タスクD (5分) タスクE (5分) タスクF (5分) タスクG (5分) Aさん (メインスレッド) タスクC (30分) 60分 同期的な処理 タスクDはタスクCの 処理に依存している
27. タスクA (5分) 非同期処理とは タスクB (5分) タスクE (5分) タスクF (5分) タスクG (5分) Aさん (メインスレッド) Bさん (別スレッド) タスクC (30分) タスクC (30分) 35分 非同期的な処理 タスクD (5分) タスクD (5分)
28. writeFileSync(“A”); writeFileSync(“B”); writeFile(“C”, () => { writeFileSync(“D”); // Cが終わったら実行 }); writeFileSync(“E”); writeFileSync(“F”); writeFileSync(“G”); 非同期処理とは 非同期的な処理
29. Promiseを使った 非同期処理 非同期処理とは
30. writeFileSync(“A”); writeFileSync(“B”); const p = new Promise(resolve => { // Cが終わったらresolveの関数を実行 writeFile(“C”, () => { resolve() }); }); p.then( () => { writeFile(“D”) } ); writeFileSync(“E”); writeFileSync(“F”); writeFileSync(“G”); 非同期処理とは Promise
31. writeFileSync(“A”); writeFileSync(“B”); const p = new Promise(resolve => { // Cが終わったらresolveの関数を実行 writeFile(“C”, () => { resolve() }); }); p.then( () => { writeFile(“D”) } ); writeFileSync(“E”); writeFileSync(“F”); writeFileSync(“G”); 非同期処理とは thenで指定した関数は resolveに入る Promise
32. コールバック地獄にならない 『Promiseオブジェクト』として自由に扱える Async/Await 構文が使える Promiseのいいところ 非同期処理とは
33. データベースへの アクセス ファイルの読み書き 暗号の計算 時間のかかる処理 外部サービスへの リクエスト メディアの処理 （画像/音声/動画） 待ちが必要な処理 非同期処理とは 基本的にライブラリ関数の結果が Promiseオブジェクトとして返ってくる
34. 『Promiseオブジェクト』 として自由に扱える 非同期処理とは
35. writeFileSync(“A”); writeFileSync(“B”); writeFile(“C”, () => { writeFileSync(“D”); }); writeFileSync(“E”); writeFileSync(“F”); writeFileSync(“G”); 非同期処理とは 『Promiseオブジェクト』 として自由に扱える コールバック方式は、ここに 後続の処理を書き切らないと いけない。 書いた瞬間処理が始まる。
36. writeFileSync(“A”); writeFileSync(“B”); const p = new Promise(resolve => { writeFile(“C”, () => { resolve() }); }); p.then( () => { writeFile(“D”) } ); writeFileSync(“E”); writeFileSync(“F”); writeFileSync(“G”); 非同期処理とは 『Promiseオブジェクト』 として自由に扱える p.thenはどこで書いても良い。 返り値としてpを渡すのもOK。 p.thenのタイミングで処理が始 まる。
37. コールバック地獄にならない 非同期処理とは
38. writeFile(“A”, () => { writeFile(“B”, () => { writeFile(“C”, () => { writeFile(“D”, () => { writeFile(“E”); }); }); }); }); 非同期処理とは コールバック地獄にならない コールバック地獄 （どんどんネストが深くなる）
39. new Promise ( r => writeFile(“A”, () => { r() }) .then( () => { return new Promise ( r => writeFile(“B”, () => { r() }) }) .then( () => { return new Promise ( r => writeFile(“C”, () => { r() }) }) .then( () => { return new Promise ( r => writeFile(“D”, () => { r() }) }) .then( () => { return new Promise ( r => writeFile(“E”, () => { r() }) }); 非同期処理とは コールバック地獄にならない Promise ならネストは深くならない
40. function writeFilePromise(str) { return new Promise ( resolve => writeFile(str, () => { resolve() }); } writeFilePromise(“A”) .then(writeFilePromise(“B”)) .then(writeFilePromise(“C”)) .then(writeFilePromise(“D”)) .then(writeFilePromise(“E”)); 非同期処理とは コールバック地獄にならない Promise 生成部分を 関数化してスマートに
41. Async/Await 構文が使える 非同期処理とは
42. Async/Await ↓ 非同期処理の終了を 待機する構文 非同期処理とは
43. タスクA (5分) 非同期処理とは タスクB (5分) タスクD (5分) タスクE (5分) タスクF (5分) タスクG (5分) Aさん (メインスレッド) Bさん (別スレッド) タスクC (30分) タスクC (30分) 60分（同期的な処理になるので効率は良くない） Async/Await タスクD (5分) 待ち
44. データベースへの アクセス ファイルの読み書き 暗号の計算 時間のかかる処理 外部サービスへの リクエスト メディアの処理 （画像/音声/動画） 待ちが必要な処理 非同期処理とは 基本的にライブラリ関数の結果が Promiseオブジェクトとして返ってくる Async/Await
45. 同一ユーザーのデータベース処理 依存関係のあるメディア処理 画像の読み込み後に行う画像処理 同期的に処理する必要がある 非同期処理のケース 非同期処理とは Async/Await
46. function writeFilePromise(str) { return new Promise ( resolve => writeFile(str, () => { resolve() }); } writeFilePromise(“A”) .then(writeFilePromise(“B”)) .then(writeFilePromise(“C”)) .then(writeFilePromise(“D”)) .then(writeFilePromise(“E”)); 非同期処理とは Async/Await 構文が使える プロミスチェインを使った 非同期処理の同期化。 同じような記述が並んでいるが このままではFor文は使えない。
47. function writeFilePromise(str) { return new Promise ( resolve => writeFile(str, () => { resolve() }); } async function writeAtoE() { await writeFilePromise(“A”); await writeFilePromise(“B”); await writeFilePromise(“C”); await writeFilePromise(“D”); await writeFilePromise(“E”); } writeAtoE(); // 関数を（非同期で）実行 非同期処理とは await を使う場合は関数化して async を付ける。 async/await を使えばプロミス チェインを解除できる。 Async/Await
48. function writeFilePromise(str) { return new Promise ( resolve => writeFile(str, () => { resolve() }); } async function writeAtoE() { const chars = [“A”, “B”, “C”, “D”, “E”]; for (let i = 0; i < chars.length; i++) { await writeFilePromise(chars[i]); } } writeAtoE(); 非同期処理とは メソッドチェーンを解除できるとfor文 などが使える。 Async/Await
49. function writeFilePromise(str) { return new Promise ( resolve => writeFile(str, () => { resolve(str); }); } async function writeAtoE() { const chars = [“A”, “B”, “C”, “D”, “E”]; for (let i = 0; i < chars.length; i++) { const result = await writeFilePromise(chars[i]); console.log(result + “の書き込みが完了しました”); } } writeAtoE(); 非同期処理とは 非同期処理の結果を返り値 として受け取ることもできる。 Async/Await
50. JSDocって どうして必要なの？ プログラミングコース座談会
51. JSDocって何で書く必要ある んですか？
 JSDocってどうして必要なの？
52. うーん…（色々考える）
 JSDocってどうして必要なの？
53. まあしょせんコメントだし なんでもいいよ。
 エンジニアと仕事すると きは書くこと多いから一 応覚えといてね。
 JSDocってどうして必要なの？
54. いっつもそうやがね！ まこつ何のためにJSDoc教え ちょると！？ JSDocってどうして必要なの？
55. 時を戻そう……
 JSDocってどうして必要なの？
56. JSDocって何で書く必要ある んですか？
 JSDocってどうして必要なの？
57. エンジニアになるなら静 的型付け言語である TypeScriptを頭に入れて おく必要があるんだ。 JavaScriptは型がないか ら自由にかけてしまう問 題があって…
 JSDocってどうして必要なの？
58. ぎゃおーーーーー 何言ってるか全然分からん！
59. JSDocで 「ちょっとだけ」型 に触れてみよう プログラミングコース座談会 というわけで
60. 「10%の税込価格を計算するWebサイト」 のプログラムを、誰かに書いてもらうこと を考えてみましょう！ JSDocで「ちょっとだけ」型に触れてみよう 100円は、税込で110円です！

61. 見た目はこんな感じ https://progedu.github.io/zadankai-tax/loose/index.html JSDocで「ちょっとだけ」型に触れてみよう
62. HTMLはこんな感じであらかじめ用意 JSDocで「ちょっとだけ」型に触れてみよう
63. getTaxInPrice関数の実装をお願いする JSDocで「ちょっとだけ」型に触れてみよう
64. getTaxInPrice関数の実装をお願いする JSDocで「ちょっとだけ」型に触れてみよう
65. 任せといてください！
 税抜価格に10%上乗せした金額を返すよう にしてください！
 JSDocで「ちょっとだけ」型に触れてみよう
66. オッケーのように見えるけど…？ JSDocで「ちょっとだけ」型に触れてみよう
67. 結果が小数になったりNaNになったり… JSDocで「ちょっとだけ」型に触れてみよう
68. でもエラー出ませんでしたし、 私は悪くないですよ〜
 小数の時は切り捨てて整数にしてほし かったし、文字列の時はNaNではなくてせ めて0円と表示してほしかったんですが…
 JSDocで「ちょっとだけ」型に触れてみよう
69. JavaScriptがルーズな言語である 以上、エラーの無いこのプログラム が納品されてくることを止めること はできない JSDocで「ちょっとだけ」型に触れてみよう
70. そこでJSDocと、TypeScriptの型を見る ルール(@ts-check)を追加 JSDocで「ちょっとだけ」型に触れてみよう
71. そこでJSDocと、TypeScriptの型を見る ルール(@ts-check)を追加 JSDocで「ちょっとだけ」型に触れてみよう
72. getTaxInPrice は、 number(数字) を貰って bigint(整数) を返す ということをルール化する （制約をかけるとも言います） JSDocで「ちょっとだけ」型に触れてみよう
73. getTaxInPriceに文字列を 渡していたり、結果の文字 列に数字を渡していたりす るところもエラーになって いるので、修正しなければ いけない JSDocで「ちょっとだけ」型に触れてみよう
74. 実際にライブで修正していきます！ JSDocで「ちょっとだけ」型に触れてみよう
75. 修正例 JSDocで「ちょっとだけ」型に触れてみよう
76. 修正例 JSDocで「ちょっとだけ」型に触れてみよう
77. ソースコード公開しています！ https://github.com/progedu/zadankai-tax JSDocで「ちょっとだけ」型に触れてみよう
78. まとめ • JSDocを書くことで、どういう関数か説明するということはも ちろん、データの型も意識させることができる • @ts-checkを使って型を守ってもらうようルール化すること もできる • 型を守ることで、ある程度品質の高いコードを書くことがで きる（最終的な品質はテストで保証することが多いです） JSDocで「ちょっとだけ」型に触れてみよう
79. 津野先生が、新しい授業を 始めるらしい！？ プログラミングコース座談会 ところで
80. 日時： 　2021年11月08日 月曜日 　19:00より (90分予定) 講師： 　津野 貴大（つのたかひろ） 先生 レベルアッププログラミング
81. なんでも質問コーナー