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

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予備校プログラミングコース

    View full-size slide

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

    View full-size slide

  3. ● 菅原 優(すがわら ゆう)
    ● 大学3年(工学部)
    ● 教材制作をさせていただいています
    ● 運営コメントもたまに入っています
    (ハイテンションだと言われがちです)
    ● 普段していること
    ○ アニメを2.7倍速で見ること(おすすめ教えてください)
    ○ 二郎系ラーメン好きです
    ○ Adoさんの曲聴きまくっています
    本日のゲスト

    View full-size slide

  4. 本日のテーマ
    1. スマホ対応・レスポンシブデザインの話を何か聞きた
    いです!
    2. プログラミングを使う系の仕事・アルバイトにどのよ
    うな種類があるのか知りたいです!
    3. Vue入門 -TODOアプリ10分チャレンジ
    4. エンジニアの方々の日々の休憩方法を知りたいです!
    5. - フリータイム -
    プログラミングコース座談会 at 2021.3.4

    View full-size slide

  5. スマホ対応・レスポンシブデザインの
    話を何か聞きたいです!
    要 望

    View full-size slide

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

    iPhone

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. CSSをしっかり書く
    ● たとえば、ある要素に width: 1000px; を指定していたとする
    ○ 13.3インチMacBookでは、横幅が1440pxなので問題なく全
    てが見える
    ○ iPhone 8(横375px)では3分の1程度しか見えない
    ○ → width: 90%; など % を使えば、どの端末でも親要素の
    90%幅で表示できる
    どうすればレスポンシブにできるか

    View full-size slide

  10. %指定で解決したと思ったが
    ● 解決する場合としない場合がある
    ○ →しない場合、メディアクエリでの対処
    (解決する場合について今回は割愛)
    ● 【px指定→%指定→メディアクエリ】の例をみていきましょう
    どうすればレスポンシブにできるか

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. ● システムエンジニア
    ● フロントエンドエンジニア
    ● バックエンドエンジニア
    ● エンベデッド(制御・組み込み・IoT)エンジニア
    ● ゲームエンジニア
    ● XR(AR/VR/MR..)エンジニア
    開発系

    View full-size slide

  14. ● セキュリティエンジニア
    ● データエンジニア(データアナリスト/データサイエンティスト)
    ● インフラエンジニア
    ● ネットワークエンジニア
    ● クラウドエンジニア
    ● AI(ML/DL)エンジニア
    スペシャリスト

    View full-size slide

  15. ● セールスエンジニア
    ● フィールドエンジニア
    ● ブリッジSE
    ● 社内SE
    ● ITコンサルタント
    ● ITアーキテクト
    その他のエンジニア

    View full-size slide

  16. ● プロジェクトリーダー
    ● プロジェクトマネージャー
    リーダー、マネージャー

    View full-size slide

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

    View full-size slide

  18. ● 授業コメントで「Reactでも〜」と発言する方が(結構?)いる
    ● Reactって何
    ○ 人気Webフレームワークのひとつ
    ○ 最近のweb開発をするならReactを知っておいて損はない
    ○ 似た用途で使えるWebフレームワーク(node.js製)に
    Angular, Vueがある
    ■ それぞれ書き方が異なる
    ■ ひとつを知れば他も少し勉強すれば書けるように
    10分でTODOアプリ作ります

    View full-size slide

  19. ● 今回はみなさんで少しだけVueに触れてみよう
    ● なぜVue?
    ○ jQueryのようにhtmlファイルに読み込ませて(nodeを使わず
    に)始めることができるので、この場で少しだけ触るには◎
    ○ 初心者でも書きやすい
    ■ Angular, Reactは書き始めるまでに知るべきことがある
    ○ 人気かつ人気上昇中
    Best of Javascript 2020 2位(2019 1位)
    Vueを扱います

    View full-size slide

  20. ● DBとの接続はしません(詐欺じゃん!)
    やってみたい方は調べれば無限に出てき
    ます
    こんなのを作ります

    View full-size slide

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

    View full-size slide

  22. フリータイム

    View full-size slide