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

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

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

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