$30 off During Our Annual Pro Sale. View Details »

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

Hakoeda
December 10, 2021

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

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

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

Hakoeda

December 10, 2021
Tweet

More Decks by Hakoeda

Other Decks in Programming

Transcript

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

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

  3. • 菅原 優(すがわら ゆう) • 大学3年(工学部) • 教材制作をさせていただいています • 運営コメントもたまに入っています

    (ハイテンションだと言われがちです) • 普段していること ◦ アニメを2.7倍速で見ること(おすすめ教えてください) ◦ 二郎系ラーメン好きです ◦ Adoさんの曲聴きまくっています 本日のゲスト
  4. 本日のテーマ 1. スマホ対応・レスポンシブデザインの話を何か聞きた いです! 2. プログラミングを使う系の仕事・アルバイトにどのよ うな種類があるのか知りたいです! 3. Vue入門 -TODOアプリ10分チャレンジ

    4. エンジニアの方々の日々の休憩方法を知りたいです! 5. - フリータイム - プログラミングコース座談会 at 2021.3.4
  5. スマホ対応・レスポンシブデザインの 話を何か聞きたいです! 要 望

  6. • 閲覧者の画面サイズまたはウェブブラウザに応じてデスクトップ ウェブページが閲覧できることを目指したウェブデザインの手法 (wikipedia「レスポンシブウェブデザイン」より レスポンシブデザインとは? ↓MacBook → iPhone

  7. 1. PC画面をスマホサイズに切り取ったような 画面が表示される →縦横無尽にスワイプする必要が生じ、不便 レスポンシブでない例①

  8. 2. PC画面をそのまま圧縮したような画面が表 示される →文字サイズが小さくなりすぎて、読めない (拡大すると前ページと同様の問題) レスポンシブでない例②

  9. CSSをしっかり書く • たとえば、ある要素に width: 1000px; を指定していたとする ◦ 13.3インチMacBookでは、横幅が1440pxなので問題なく全 てが見える ◦

    iPhone 8(横375px)では3分の1程度しか見えない ◦ → width: 90%; など % を使えば、どの端末でも親要素の 90%幅で表示できる どうすればレスポンシブにできるか
  10. %指定で解決したと思ったが • 解決する場合としない場合がある ◦ →しない場合、メディアクエリでの対処 (解決する場合について今回は割愛) • 【px指定→%指定→メディアクエリ】の例をみていきましょう どうすればレスポンシブにできるか

  11. 要素を横並びにする際、レスポンシブ対応で重要な概念が 「フレックスボックス」 • display: flex; で指定できるcss • 「フレックスボックス」「display: flex」で検索するといろいろ知 れる

    割愛したもの
  12. プログラミングを使う系の仕事・アル バイトにどのような種類があるのか知 りたいです! 質 問

  13. • システムエンジニア • フロントエンドエンジニア • バックエンドエンジニア • エンベデッド(制御・組み込み・IoT)エンジニア • ゲームエンジニア

    • XR(AR/VR/MR..)エンジニア 開発系
  14. • セキュリティエンジニア • データエンジニア(データアナリスト/データサイエンティスト) • インフラエンジニア • ネットワークエンジニア • クラウドエンジニア

    • AI(ML/DL)エンジニア スペシャリスト
  15. • セールスエンジニア • フィールドエンジニア • ブリッジSE • 社内SE • ITコンサルタント

    • ITアーキテクト その他のエンジニア
  16. • プロジェクトリーダー • プロジェクトマネージャー リーダー、マネージャー

  17. Vue.jsで作る TODOアプリ10分チャレンジ 挑 戦

  18. • 授業コメントで「Reactでも〜」と発言する方が(結構?)いる • Reactって何 ◦ 人気Webフレームワークのひとつ ◦ 最近のweb開発をするならReactを知っておいて損はない ◦ 似た用途で使えるWebフレームワーク(node.js製)に

    Angular, Vueがある ▪ それぞれ書き方が異なる ▪ ひとつを知れば他も少し勉強すれば書けるように 10分でTODOアプリ作ります
  19. • 今回はみなさんで少しだけVueに触れてみよう • なぜVue? ◦ jQueryのようにhtmlファイルに読み込ませて(nodeを使わず に)始めることができるので、この場で少しだけ触るには◎ ◦ 初心者でも書きやすい ▪

    Angular, Reactは書き始めるまでに知るべきことがある ◦ 人気かつ人気上昇中 Best of Javascript 2020 2位(2019 1位) Vueを扱います
  20. • DBとの接続はしません(詐欺じゃん!) やってみたい方は調べれば無限に出てき ます こんなのを作ります

  21. エンジニアの方々の日々の休憩方法を 知りたいです! 質 問

  22. フリータイム