Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Hakoeda
January 11, 2022

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

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

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

Hakoeda

January 11, 2022
Tweet

More Decks by Hakoeda

Other Decks in Programming

Transcript

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

    View full-size slide

  2. プログラミングコース座談会は、プログラミングに
    関する相談・悩みへの回答や、プログラミングコー
    スについての意見交換などを行う番組です。
    プログラミングコース座談会

    View full-size slide

  3. ● 社会人15年目💼
    ● 通信インフラ/ネットワーク系
     →SI系派遣プログラマ/コンサル
      →ニコニコ動画の開発
       →エンジニア採用/研修
        →プログラミングの先生
    ● 神奈川県出身、東京都在住🗼
    ● 自宅の防音室💬から授業しています!
    ● 🐈🐈🐕 を飼ってます🐾🐾
    小枝 創 -Koeda Hajime - 講

    View full-size slide

  4. ● ドワンゴエンジニア11年目
    ● 主に社会人向けプログラミング研修の講師
    やってます
    ● たまに運営コメントにも登場します!
    ● 宮崎県出身です
    ● 新しい授業を11月に始めます
    ○ そちらもよろしくお願いします!
    津野 貴大 -Tsuno Takahiro -






    View full-size slide

  5. 本日のテーマ
    オブジェクトって何??
    非同期処理とは
    JSDocってどうして必要なの?
    JSDocで「ちょっとだけ」型に触れてみよう

    View full-size slide

  6. オブジェクト
    って何??
    プログラミングコース座談会

    View full-size slide

  7.   英語         日本語
    Object = もの
    オブジェクトって何??

    View full-size slide

  8. JavaScriptにおける
    オブジェクト

    “データ”と”機能”を持つ集合体
    オブジェクトって何??

    View full-size slide

  9. "Hello!"
    プリミティブ型 オブジェクト それ以外
    (仕組みや概念など)
    12345
    true
    null
    Promise
    Date
    String
    {}
    イベント
    関数
    プロパティ
    変数
    オブジェクトって何??

    View full-size slide

  10. "Hello!"
    オブジェクト
    JavaScriptの
    オブジェクト
    12345
    () => {} []
    Promise Date String
    {}
    オブジェクトって何??
    Object型
    undefined
    null

    View full-size slide

  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!'
    オブジェクトって何??

    View full-size slide

  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型の関数などが使える
    オブジェクトって何??

    View full-size slide

  13. オブジェクトって何??
    JavaScriptのオブジェクト構文
    const obj = {
    name: "Koeda Hajime",
    getFirstName: () => { return obj.name.split(" ")[0]; }
    }
    “データ”と”機能”を持つ集合体
    という部分は同じ

    View full-size slide

  14. 非同期処理
    とは
    プログラミングコース座談会

    View full-size slide

  15. 時間のかかる処理を
    分担する技術
    非同期処理とは

    View full-size slide

  16. データベースへの
    アクセス
    ファイルの読み書き 暗号の計算
    時間のかかる処理
    外部サービスへの
    リクエスト
    メディアの処理
    (画像/音声/動画)
    待ちが必要な処理
    非同期処理とは

    View full-size slide

  17. タスクA (5分)
    非同期処理とは
    タスクB (5分)
    タスクD (5分)
    タスクE (5分)
    タスクF (5分)
    タスクG (5分)
    Aさん
    (メインスレッド)
    タスクC (30分)
    同期的な処理
    60分

    View full-size slide

  18. 非同期処理とは
    writeFileSync(“A”);
    writeFileSync(“B”);
    writeFileSync(“C”);
    writeFileSync(“D”);
    writeFileSync(“E”);
    writeFileSync(“F”);
    writeFileSync(“G”);
    同期的な処理

    View full-size slide

  19. タスクA (5分)
    非同期処理とは
    タスクB (5分)
    タスクD (5分)
    タスクE (5分)
    タスクF (5分)
    タスクG (5分)
    Aさん
    (メインスレッド)
    タスクC (30分)
    同期的な処理
    60分

    View full-size slide

  20. タスクA (5分)
    非同期処理とは
    タスクB (5分)
    タスクD (5分)
    タスクE (5分)
    タスクF (5分)
    タスクG (5分)
    Aさん
    (メインスレッド)
    Bさん
    (別スレッド)
    タスクC (30分)
    タスクC (30分)
    約30分
    非同期的な処理

    View full-size slide

  21. writeFileSync(“A”);
    writeFileSync(“B”);
    writeFile(“C”); // 別スレッドで実行される
    writeFileSync(“D”);
    writeFileSync(“E”);
    writeFileSync(“F”);
    writeFileSync(“G”);
    非同期処理とは 非同期的な処理

    View full-size slide

  22. リクエスト受付
    非同期処理とは
    時間のかかる処理
    Aさん
    (メインスレッド)
    レスポンス返却
    同期的な処理
    クライアント
    (ブラウザ)
    クライアントは時間のかかる処理が終わるまで
    レスポンスを受け取れない(Webだと致命的)
    できたよ!
    (1時間後)

    View full-size slide

  23. リクエスト受付
    非同期処理とは
    別スレッドに依頼
    Aさん
    (メインスレッド)
    レスポンス返却
    非同期的な処理
    時間のかかる処理
    クライアントはすぐレスポンスを受け取れる
    (安心する&他の作業ができる)
    Bさん
    (別スレッド)
    クライアント
    (ブラウザ)
    処理を受け付けました
    完了までお待ちください

    View full-size slide

  24. 別々のユーザーのリクエスト処理
    依存関係のない複数のメディア処理
    Webページ表示時の画像読込
    非同期化で効率が出る処理
    非同期処理とは

    View full-size slide

  25. 前後関係のあるファイル書き込み
    依存関係のあるメディア処理
    画像の読み込み後に行う画像処理
    同期的に処理する必要がある
    非同期処理のケース
    非同期処理とは

    View full-size slide

  26. タスクA (5分)
    非同期処理とは
    タスクB (5分)
    タスクD (5分)
    タスクE (5分)
    タスクF (5分)
    タスクG (5分)
    Aさん
    (メインスレッド)
    タスクC (30分)
    60分
    同期的な処理
    タスクDはタスクCの
    処理に依存している

    View full-size slide

  27. タスクA (5分)
    非同期処理とは
    タスクB (5分)
    タスクE (5分)
    タスクF (5分)
    タスクG (5分)
    Aさん
    (メインスレッド)
    Bさん
    (別スレッド)
    タスクC (30分)
    タスクC (30分)
    35分
    非同期的な処理
    タスクD (5分)
    タスクD (5分)

    View full-size slide

  28. writeFileSync(“A”);
    writeFileSync(“B”);
    writeFile(“C”, () => {
    writeFileSync(“D”); // Cが終わったら実行
    });
    writeFileSync(“E”);
    writeFileSync(“F”);
    writeFileSync(“G”);
    非同期処理とは 非同期的な処理

    View full-size slide

  29. Promiseを使った
    非同期処理
    非同期処理とは

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  32. コールバック地獄にならない
    『Promiseオブジェクト』として自由に扱える
    Async/Await 構文が使える
    Promiseのいいところ
    非同期処理とは

    View full-size slide

  33. データベースへの
    アクセス
    ファイルの読み書き 暗号の計算
    時間のかかる処理
    外部サービスへの
    リクエスト
    メディアの処理
    (画像/音声/動画)
    待ちが必要な処理
    非同期処理とは
    基本的にライブラリ関数の結果が
    Promiseオブジェクトとして返ってくる

    View full-size slide

  34. 『Promiseオブジェクト』
    として自由に扱える
    非同期処理とは

    View full-size slide

  35. writeFileSync(“A”);
    writeFileSync(“B”);
    writeFile(“C”, () => {
    writeFileSync(“D”);
    });
    writeFileSync(“E”);
    writeFileSync(“F”);
    writeFileSync(“G”);
    非同期処理とは 『Promiseオブジェクト』
    として自由に扱える
    コールバック方式は、ここに
    後続の処理を書き切らないと
    いけない。
    書いた瞬間処理が始まる。

    View full-size slide

  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のタイミングで処理が始
    まる。

    View full-size slide

  37. コールバック地獄にならない
    非同期処理とは

    View full-size slide

  38. writeFile(“A”, () => {
    writeFile(“B”, () => {
    writeFile(“C”, () => {
    writeFile(“D”, () => {
    writeFile(“E”);
    });
    });
    });
    });
    非同期処理とは コールバック地獄にならない
    コールバック地獄
    (どんどんネストが深くなる)

    View full-size slide

  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 ならネストは深くならない

    View full-size slide

  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 生成部分を
    関数化してスマートに

    View full-size slide

  41. Async/Await 構文が使える
    非同期処理とは

    View full-size slide

  42. Async/Await

    非同期処理の終了を
    待機する構文
    非同期処理とは

    View full-size slide

  43. タスクA (5分)
    非同期処理とは
    タスクB (5分)
    タスクD (5分)
    タスクE (5分)
    タスクF (5分)
    タスクG (5分)
    Aさん
    (メインスレッド)
    Bさん
    (別スレッド)
    タスクC (30分) タスクC (30分)
    60分(同期的な処理になるので効率は良くない)
    Async/Await
    タスクD (5分)
    待ち

    View full-size slide

  44. データベースへの
    アクセス
    ファイルの読み書き 暗号の計算
    時間のかかる処理
    外部サービスへの
    リクエスト
    メディアの処理
    (画像/音声/動画)
    待ちが必要な処理
    非同期処理とは
    基本的にライブラリ関数の結果が
    Promiseオブジェクトとして返ってくる
    Async/Await

    View full-size slide

  45. 同一ユーザーのデータベース処理
    依存関係のあるメディア処理
    画像の読み込み後に行う画像処理
    同期的に処理する必要がある
    非同期処理のケース
    非同期処理とは Async/Await

    View full-size slide

  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文は使えない。

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  50. JSDocって
    どうして必要なの?
    プログラミングコース座談会

    View full-size slide

  51. JSDocって何で書く必要ある
    んですか?

    JSDocってどうして必要なの?

    View full-size slide

  52. うーん…(色々考える)

    JSDocってどうして必要なの?

    View full-size slide

  53. まあしょせんコメントだし
    なんでもいいよ。

    エンジニアと仕事すると
    きは書くこと多いから一
    応覚えといてね。

    JSDocってどうして必要なの?

    View full-size slide

  54. いっつもそうやがね!
    まこつ何のためにJSDoc教え
    ちょると!?
    JSDocってどうして必要なの?

    View full-size slide

  55. 時を戻そう……

    JSDocってどうして必要なの?

    View full-size slide

  56. JSDocって何で書く必要ある
    んですか?

    JSDocってどうして必要なの?

    View full-size slide

  57. エンジニアになるなら静
    的型付け言語である
    TypeScriptを頭に入れて
    おく必要があるんだ。
    JavaScriptは型がないか
    ら自由にかけてしまう問
    題があって…

    JSDocってどうして必要なの?

    View full-size slide

  58. ぎゃおーーーーー
    何言ってるか全然分からん!

    View full-size slide

  59. JSDocで
    「ちょっとだけ」型
    に触れてみよう
    プログラミングコース座談会
    というわけで

    View full-size slide

  60. 「10%の税込価格を計算するWebサイト」
    のプログラムを、誰かに書いてもらうこと
    を考えてみましょう!
    JSDocで「ちょっとだけ」型に触れてみよう
    100円は、税込で110円です!


    View full-size slide

  61. 見た目はこんな感じ
    https://progedu.github.io/zadankai-tax/loose/index.html
    JSDocで「ちょっとだけ」型に触れてみよう

    View full-size slide

  62. HTMLはこんな感じであらかじめ用意
    JSDocで「ちょっとだけ」型に触れてみよう

    View full-size slide

  63. getTaxInPrice関数の実装をお願いする
    JSDocで「ちょっとだけ」型に触れてみよう

    View full-size slide

  64. getTaxInPrice関数の実装をお願いする
    JSDocで「ちょっとだけ」型に触れてみよう

    View full-size slide

  65. 任せといてください!

    税抜価格に10%上乗せした金額を返すよう
    にしてください!

    JSDocで「ちょっとだけ」型に触れてみよう

    View full-size slide

  66. オッケーのように見えるけど…?
    JSDocで「ちょっとだけ」型に触れてみよう

    View full-size slide

  67. 結果が小数になったりNaNになったり…
    JSDocで「ちょっとだけ」型に触れてみよう

    View full-size slide

  68. でもエラー出ませんでしたし、
    私は悪くないですよ〜

    小数の時は切り捨てて整数にしてほし
    かったし、文字列の時はNaNではなくてせ
    めて0円と表示してほしかったんですが…

    JSDocで「ちょっとだけ」型に触れてみよう

    View full-size slide

  69. JavaScriptがルーズな言語である
    以上、エラーの無いこのプログラム
    が納品されてくることを止めること
    はできない
    JSDocで「ちょっとだけ」型に触れてみよう

    View full-size slide

  70. そこでJSDocと、TypeScriptの型を見る
    ルール(@ts-check)を追加
    JSDocで「ちょっとだけ」型に触れてみよう

    View full-size slide

  71. そこでJSDocと、TypeScriptの型を見る
    ルール(@ts-check)を追加
    JSDocで「ちょっとだけ」型に触れてみよう

    View full-size slide

  72. getTaxInPrice は、
    number(数字) を貰って
    bigint(整数) を返す
    ということをルール化する
    (制約をかけるとも言います)
    JSDocで「ちょっとだけ」型に触れてみよう

    View full-size slide

  73. getTaxInPriceに文字列を
    渡していたり、結果の文字
    列に数字を渡していたりす
    るところもエラーになって
    いるので、修正しなければ
    いけない
    JSDocで「ちょっとだけ」型に触れてみよう

    View full-size slide

  74. 実際にライブで修正していきます!
    JSDocで「ちょっとだけ」型に触れてみよう

    View full-size slide

  75. 修正例
    JSDocで「ちょっとだけ」型に触れてみよう

    View full-size slide

  76. 修正例
    JSDocで「ちょっとだけ」型に触れてみよう

    View full-size slide

  77. ソースコード公開しています!
    https://github.com/progedu/zadankai-tax
    JSDocで「ちょっとだけ」型に触れてみよう

    View full-size slide

  78. まとめ
    ● JSDocを書くことで、どういう関数か説明するということはも
    ちろん、データの型も意識させることができる
    ● @ts-checkを使って型を守ってもらうようルール化すること
    もできる
    ● 型を守ることで、ある程度品質の高いコードを書くことがで
    きる(最終的な品質はテストで保証することが多いです)
    JSDocで「ちょっとだけ」型に触れてみよう

    View full-size slide

  79. 津野先生が、新しい授業を
    始めるらしい!?
    プログラミングコース座談会
    ところで

    View full-size slide

  80. 日時:
     2021年11月08日 月曜日
     19:00より (90分予定)
    講師:
     津野 貴大(つのたかひろ) 先生
    レベルアッププログラミング

    View full-size slide

  81. なんでも質問コーナー

    View full-size slide