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

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

9f2edd3fb2cc8feb20221138ca91d9fc?s=47 Hakoeda
December 10, 2021

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

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

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

9f2edd3fb2cc8feb20221138ca91d9fc?s=128

Hakoeda

December 10, 2021
Tweet

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

  28. フリータイム