Webエンジニア超入門!

Transcript

1. Web エンジニア超入門超入門 ! サポーターズ Colab 勉強会 2019/01/30 @mosmos_21
2. 2 / 30 目次 1.はじめに 2.様々なフロント技術なフロント技術、フロント技術、周辺技術技術、周辺技術について 3.Ruby on Rails の Tutorial で知ることができ知ることができるることがで知ることができきること 4.Ruby on Rails Tutorial の問題点 5.結局なにを勉強すれなフロント技術、にを勉強すればいい勉強すればいいのか 6.まとめ
3. 3 / 30 1. はじめに
4. 4 / 30 自己紹介 【氏名】 橋本　尚儒 尚儒 ( はしもと たかひと ) 【 Twitter 】 もっさん　 @mosmos_21 【職業】 ソフト技術、周辺技術ウェアエンジニア ( 社会 人 2 年生 ) Java とか javascript とか書く人く人人 【趣味】 プログラミング ビリヤード
5. 5 / 30 今日の内容についての内容についてについて 初心者に伝えたいことに伝えたいことをまえたいことを勉強すればいいまとめました • Web に関する知識って何する知ることができる識って何があるんって何があるんだろうがあるん　だろう？ • Rails Tutorial なフロント技術、ん　か色々なフロント技術使ってるけど結局ってるけど結局何？結局なにを勉強すれ何があるんだろう？ • 結局なにを勉強すれなフロント技術、にを勉強すればいい勉強すればいいん　だろう？
6. 6 / 30 スライドの眺め方め方 • スライドで知ることができポイント技術、周辺技術となフロント技術、る単語は赤色にしてあり ます • その単語を人に説明するを勉強すればいい人に説明するときに自分するときに自分ならどうするなフロント技術、らど結局何？うする かなフロント技術、？と考えながらスライえなフロント技術、がらスライドを勉強すればいい眺め方めてみてく人ださ い
7. 7 / 30 2. Web の技術
8. 8 / 30 そもそも Web … の技術と言っても…っても 一つのつの Web … アプリケーションを勉強すればいい作るために必要なるために必要な知識は…なフロント技術、知ることができる識って何があるんは DB ブラウザ Web サーバ ここと ここ ここも あと 当然ここもここも
9. 9 / 30 その１・ブラウザブラウザ • いわゆるフロント技術、周辺技術エンド • HTML + CSS + javascript が使ってるけど結局える • 流行りのフレームワりのフレームワークの代表例は 、の代表例は 、は 、 React 、 Vue.js 、 Angular なフロント技術、ど結局何？ • ブラウザの性能が上がりの性能が上がりフロンが上がりフロントエがりフロント技術、周辺技術エンドの必要な知識は…技 術力が跳ね上がったが跳ね上がったね上がった上がりフロントエがった
10. 10 / 30 その 2 ・ HTTP 通信 • 代表的ななフロント技術、通信プロト技術、周辺技術コルの一つのつ • ブラウザの性能が上がりとサーバ間で間でで知ることができ HTML や json 、テキスト技術、周辺技術 から画像などのやり取りなフロント技術、ど結局何？のやり取りを行う仕組みりを勉強すればいい行りのフレームワう仕組みみ • リクの代表例は 、エスト技術、周辺技術とレスポンス時のヘッダとボデのヘッダとボディに情報とボディに情報に情報 を勉強すればいい埋め込んでやり取め込んでやり取りをん　で知ることができやり取りを行う仕組みりを勉強すればいい行りのフレームワう
11. 11 / 30 その 3 ・ Web サーバ間で（アプリケーションサーバ間で） • Rails Tutorial を勉強すればいい進めてめて Web サービスを勉強すればいい作るために必要なった人が動 かしているサーバ間ではここ • ここで知ることができ Web アプリケーションを勉強すればいい作るために必要なるためのフレーム ワークの代表例は 、の例は 、は Ruby on Rails (Ruby) 、 Django (Python) 、 Spring Boot (Java) • サーバ間でサイドで知ることができテンプレート技術、周辺技術エンジンを勉強すればいい使ってるけど結局って HTML を勉強すればいいレンダとボディに情報リングする作るために必要なりにしたり API サーバ間でにしたり する作るために必要なり方がある
12. 12 / 30 その 4+5 ・データベース、 SQL • DB を勉強すればいい使ってるけど結局わなフロント技術、い Web アプリは少ないので避けてなフロント技術、いので知ることができ避けては通けては通 れなフロント技術、い • 個人開発だとだと MySQL 、 SQLite 、 PostgreSQL あ たりを勉強すればいい使ってるけど結局うと思いますいます • DB の中にテーブルを作にテーブルを勉強すればいい作るために必要なり、 SQL 文を書くことでを勉強すればいい書く人く人ことで知ることができ データの挿入、検索、更新、削除を勉強すればいい行りのフレームワう
13. 13 / 30 3. Rails Tutorial で知ることができ 知ることができるることがで知ることができきること
14. 14 / 30 Ruby on Rails Tutorial について • Web アプリの開発だとを勉強すればいい 0 か ら学ぶことができるぶことがで知ることができきる ( 全 14 章 ) • 最後まで作るとまで知ることができ作るために必要なると Twitter 風 の Web アプリが完成してして ユーザの性能が上がり登録・文を書くことで章の投稿・ ユーザの性能が上がりのフォローがで知ることができきる ようになフロント技術、る • 開発だと環境はは Cloud9 + Heroku
15. 15 / 30 Ruby on Rails Tutorial 序盤 (1, 2 章 ) • 開発だと環境はは Cloud9 なフロント技術、ので知ることができブラウザの性能が上がりがあれば 0 秒でで知ることができ 始められるめられる • コマンド (Rails コマンド、 Git コマンド ) はすべて 用意されているのでされているので知ることができ打ち込めば動く！ち込めば動く！込んでやり取りをめば動く人！ • かん　たん　なフロント技術、アプリケーションを勉強すればいい作るために必要なることで知ることができ REST アーキテクの代表例は 、チャを知ることがでを勉強すればいい知ることができるることがで知ることができきる
16. 16 / 30 Ruby on Rails Tutorial 中盤 (3 章〜 12 章 ) 認証に関する知識って何する機能が上がりフロンを勉強すればいい作るために必要な成して（ライブラリは使ってるけど結局用しなフロント技術、い） ・ ユーザの性能が上がり登録 ・ ログイン ・ ユーザの性能が上がりの有効化 ・ パスワード再設定 ログインしたままにしておく人機能が上がりフロン (Remember me) を勉強すればいい作るために必要な成してする過程で で知ることができ Session と Cookie について知ることができる ることがで知ることができきる。
17. 17 / 30 Ruby on Rails Tutorial 終盤 (13, 14 章 ) • 文を書くことで章の投稿機能が上がりフロン ( マイクの代表例は 、ロポスト技術、周辺技術 ) とユーザの性能が上がりの フォロー機能が上がりフロンを勉強すればいい作るために必要な成して • ユーザの性能が上がりのフォロー機能が上がりフロンで知ることができはエンティに情報ティに情報同士ののリ レーションの考えながらスライえ方を勉強すればいい知ることができるることがで知ることができきる User User Following one many many one
18. 18 / 30 4. Ruby on Rails Tutorial の問題点
19. 19 / 30 その１　開発環境がブ 開発だと環境はがブラウザの性能が上がり • なフロント技術、れなフロント技術、い人にとって環境は構築はなかなか難しはなフロント技術、かなフロント技術、か難しいもしいも の • とはいえ仕事で環境作成がでで知ることができ環境は作るために必要な成してがで知ることができきなフロント技術、いとなフロント技術、かなフロント技術、か困 る（開発だと環境は・テスト技術、周辺技術環境は、 CI なフロント技術、ど結局何？） • 最近では開発環境でで知ることができは開発だと環境はで知ることができ Docker を勉強すればいい使ってるけど結局ったりと難しいも易 度も上がっているも上がりフロントエがっているので知ることができ早いうちから慣れいうち込めば動く！から慣れておいたれておいた ほうが良いい
20. 20 / 30 その２　 SQL が１　開発環境がブ度も上がっているも出てこないてこなフロント技術、い • Active Record は強力が跳ね上がったで知ることができすが、強力が跳ね上がったが故にに SQL に 出てこないく人わすことなフロント技術、く人 DB の操作るために必要なを勉強すればいい行りのフレームワうことがで知ることができきてし まいます • 例は 、えばチュート技術、周辺技術リアルで知ることができカラムに対してして index を勉強すればいい設 定していますが、自分ならどうするで知ることができ設計したした DB のテーブルに 対してして適切にに index を勉強すればいい設定することはで知ることができきますか？ • サービスが拡大してくるとクエしてく人るとクの代表例は 、エリのチューニングや 設定の見直しなどが必要にしなフロント技術、ど結局何？が必要な知識は…になフロント技術、って来ますます
21. 21 / 30 その 3 Ruby の勉強にはあまりなフロント技術、らなフロント技術、い • 全体をとしてを勉強すればいいとして Rails の機能が上がりフロンの概要な知識は…に触れているのでれているので知ることができ チュート技術、周辺技術リルを勉強すればいい通して得ることができるることがで知ることができきる知ることができる識って何があるんは Rails の知ることができる識って何があるんで知ることができす • このアプリケーションの中にテーブルを作に純粋なオブジェクトなフロント技術、オブジェクの代表例は 、ト技術、周辺技術 (Java で知ることができいう POJO) を勉強すればいい組みみ込んでやり取りをん　で知ることができ使ってるけど結局うことがで知ることができきます か？ • 実際は検索した結果は検索した結果をもう少し加工を勉強すればいいもう少ないので避けてし加工したりします。したりします。そ こで知ることができは純粋なオブジェクトなフロント技術、 Ruby で知ることができのコーディに情報ング能が上がりフロン力が跳ね上がったが求められめられ ます
22. 22 / 30 4. 結局なにを勉強すれ何があるんだろうを勉強すればいい勉強すればいいのか
23. 23 / 30 その 1 基礎知ることができる識って何があるんは絶対してに大してくるとクエ事で環境作成がで • エンジニアは専門職で知ることができあることを勉強すればいい忘れないでほしいれなフロント技術、いで知ることができほしい で知ることができす • 新しい技術なフロント技術、ど結局何？を勉強すればいい学ぶことができるぶことはとても大してくるとクエ事で環境作成がでで知ることができすが、本　尚儒 質を見つめるとたを勉強すればいい見つめるとたど結局何？り着くのは非常に単く人のは非常に単純な基礎知に単純なフロント技術、基礎知ることができる 識って何があるんで知ることができあることは多いい • ネット技術、周辺技術ワークの代表例は 、の仕組みみやオブジェクの代表例は 、ト技術、周辺技術指向設計した原則 なフロント技術、ど結局何？を勉強すればいい学ぶことができるび理解を深める必理解を深める必要がを勉強すればいい深める必要がありめる必要な知識は…があります • 「 Web を勉強すればいい支える技術」「マえる技術」「マスタリング TCP/IP 」 はおすすめ
24. 24 / 30 その 2 web アプリ作るために必要な成して以外の技術に目を向の技術に目を勉強すればいい向けてみる • たとえば環境は構築はなかなか難しで知ることができ躓くのも周辺技術く人のも周辺技術が不足していしてい るのが原因 • linux 環境はや設定ファイルなフロント技術、ど結局何？の扱いに慣れておくいに慣れておいたれておく人 必要な知識は…があります • たとえば web アプリを勉強すればいい公開する環境はを勉強すればいい０から作るために必要なっ てみるのもおすすめ
25. 25 / 30 その 3 アウト技術、周辺技術プット技術、周辺技術めち込めば動く！ゃく人ち込めば動く！ゃ大してくるとクエ事で環境作成がで 他の人に教えるの人に教えるに教える教えるえる 自ら体験するら体験する体験するする グループ討議討議 デモンストレーション 視聴覚 読書 講義 90% 75% 50% 30% 20% 10% 5% • ラーニング・ピラミッドと言っても… われる三角形 • インプット技術、周辺技術だけの学ぶことができる習は効は効 果をもう少し加工が薄くく人アウト技術、周辺技術プット技術、周辺技術が重 要な知識は…なフロント技術、ことを勉強すればいい表しています • インプット技術、周辺技術：アウト技術、周辺技術プッ ト技術、周辺技術が３：７になフロント技術、るように 学ぶことができる習は効すると効果をもう少し加工大してくるとクエ
26. 26 / 30 5. まとめ
27. 27 / 30 まとめ • web エンジニアと言っても…っても必要な知識は…なフロント技術、知ることができる識って何があるんはフロン ト技術、周辺技術エンドから、通信、 DB まで知ることができ広くに渡るく人に渡るる • Ruby on Rails Tutorial を勉強すればいい通して web アプリ ケーション作るために必要な成してに必要な知識は…なフロント技術、知ることができる識って何があるんを勉強すればいい知ることができるることがで知ることができきる ことを勉強すればいい理解を深める必要がした • チュート技術、周辺技術リアルだけで知ることができは不足していしている知ることができる識って何があるんを勉強すればいい学ぶことができるぶ ことで知ることができ先につなげることにつなフロント技術、げることがで知ることができきます
28. 28 / 30 おまけ ( 軽量 Web フレームワークの代表例は 、について ) • Ruby on Rails と比べるとべると 機能が上がりフロンは限定されている • さく人っと Web アプリを勉強すればいい作るために必要な るときに便利なのでぜひなフロント技術、ので知ることができぜひ ↑ Sinatra (Ruby) Flask (Python) →
29. 29 / 30 おまけ Developer Roadmap 2019 https://github.com/kamranahmedse/developer-roadmap フロント技術、周辺技術エンドとサーバ間でサイドエンジニアになフロント技術、るためのロードマップ
30. 30 / 30 ~fin~ thans!!