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

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

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

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: 表示のオンオフを１行で
    ポイント6: document.getElementByIdは省略
    ヒミツ道具：oninput
    ヒミツ道具：三項演算子
    ヒミツ道具：変数に入った関数
    

    View Slide

28. フリータイム
    

    View Slide