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

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

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

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. フリータイム