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

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

Hakoeda
December 10, 2021

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

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

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

Hakoeda

December 10, 2021
Tweet

More Decks by Hakoeda

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

  3. ● 菅原 優(すがわら ゆう)
    ● 大学4年(工学部)
    ● 教材制作をさせていただいています
    ● ちょうど一週間後7/8 の「プロフェッショナル
    プログラミング」出ます
    ● 普段していること
    ○ アニメを2.7倍速で見ること(おすすめ教えてください)
    ○ 二郎系ラーメン好きです
    ○ Adoさんの曲を聴きまくっています
    本日のゲスト

    View Slide

  4. あなたのいいところ診断
    アレンジしてみた
    本日のテーマ

    View Slide

  5. 菅原さんver

    View Slide


  6. 装飾がんばってみた

    View Slide

  7. ポイント1: 好きなレイアウトにしてみた
    After
    Before

    View Slide

  8. ポイント1: 好きなレイアウトにしてみた
    Figma というツールを使ってデザインしました

    View Slide

  9. ポイント2: アニメーションをつけてみた
    「診断」を押すと猫がカラフルになります

    View Slide

  10. ポイント2: アニメーションをつけてみた
    cssを書いた属性(classなど)を与えるとアニメが始まります
    CSS JS

    View Slide

  11. ポイント3: OGPをつけてみた
    TwitterやSlackに投稿するとこの画像(と文章)が出ます

    View Slide

  12. 気にしたところ1: CSSファイル分けてみた
    HTML CSS
    CSS1
    CSS2
    CSS3
    CSS4

    View Slide

  13. 気にしたところ2: セマンティックHTML
    slackの #プログラミングコース座談会 での質問

    View Slide

  14. 気にしたところ2: セマンティックHTML
    div と nav に、css/js 上の差はありません
    他にも、article や section, main なども divと一緒です
    しかし、
    - 開発者(コードを書く人)
    - 検索エンジン
    - 読み上げツール
    にとっては、差があります

    View Slide

  15. 気にしたところ2: セマンティックHTML
    こういう要素があったとしましょう
    出典: : 記事コンテンツ要素 -
    HTML: HyperText Markup Language | MDN
    https://developer.mozilla.org/ja/docs/W
    eb/HTML/Element/article

    View Slide

  16. 気にしたところ2: セマンティックHTML
    内容を差し替えようと思ったとき、どちらが見つけやすい?

    View Slide

  17. 気にしたところ2: セマンティックHTML
    いいところ診断のように差し替えをするとき、こうなることも

    View Slide

  18. 気にしたところ2: セマンティックHTML
    ということで、申し訳程度に
    header と main をつけてみました
    - もっとできる気はする
    - でも無理はしなくていい
    詳しく知りたい方は「セマンティック HTML」で調べてみよう

    View Slide

  19. 小枝先生ver
    あなたのオススメの授業診断

    View Slide

  20. ソースコード
    Webページ

    View Slide


  21. プロ的ビフォーアフター

    View Slide

  22. ポイント1: assessment関数を2行に
    Before

    View Slide

  23. ポイント1: assessment関数を2行に
    After ヒミツ道具:コレクション関数

    View Slide

  24. ポイント2: タグは作らずにテンプレ式に
    Before

    View Slide

  25. ポイント2: タグは作らずにテンプレ式に
    Before ヒミツ道具:spanタグ

    View Slide

  26. ポイント3: オブジェクトを使ってわかりやすく
    ヒミツ道具:オブジェクトの配列

    View Slide

  27. ポイント4: ボタンを削除してリアルタイムに
    ポイント5: 表示のオンオフを1行で
    ポイント6: document.getElementByIdは省略
    ヒミツ道具:oninput
    ヒミツ道具:三項演算子
    ヒミツ道具:変数に入った関数

    View Slide

  28. フリータイム

    View Slide