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

Transcript

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

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

3. • 菅原 優(すがわら ゆう) • 大学4年（工学部） • 教材制作をさせていただいています • ちょうど一週間後7/8

   の「プロフェッショナル プログラミング」出ます • 普段していること ◦ アニメを2.7倍速で見ること（おすすめ教えてください） ◦ 二郎系ラーメン好きです ◦ Adoさんの曲を聴きまくっています 本日のゲスト

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

5. 菅原さんver

6. <テーマ> 装飾がんばってみた

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

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

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

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

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

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

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

14. 気にしたところ2: セマンティックHTML div と nav に、css/js 上の差はありません 他にも、article や section,

    main なども divと一緒です しかし、 - 開発者（コードを書く人） - 検索エンジン - 読み上げツール にとっては、差があります

15. 気にしたところ2: セマンティックHTML こういう要素があったとしましょう 出典: <article>: 記事コンテンツ要素 - HTML: HyperText Markup

    Language | MDN https://developer.mozilla.org/ja/docs/W eb/HTML/Element/article

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

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

18. 気にしたところ2: セマンティックHTML ということで、申し訳程度に header と main をつけてみました - もっとできる気はする -

    でも無理はしなくていい 詳しく知りたい方は「セマンティック HTML」で調べてみよう

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

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

21. <テーマ> プロ的ビフォーアフター

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

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

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

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

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

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

28. フリータイム