Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
2022年度新卒技術研修「フロントエンド」講義
Search
excitejp
PRO
June 15, 2022
Technology
0
1.2k
2022年度新卒技術研修「フロントエンド」講義
フロントエンド技術の変遷に関する講義です。
- フロントエンド技術の変遷
- フロントエンドのフレームワーク
- ECMAScriptについて
excitejp
PRO
June 15, 2022
Tweet
Share
More Decks by excitejp
See All by excitejp
エキサイトホールディングス株式会社 - 会社説明 -
excitejp
PRO
0
3.9k
あつまれ!toBプロダクトの沼
excitejp
PRO
1
1.1k
excite_techcon2023__RDS_performance_insightと実行計画 との付き合い方__DBとINDEXを学ぼう
excitejp
PRO
3
1.1k
え?!デザイナーが一人になることってあるんですか?!
excitejp
PRO
1
270
KUROTEN紹介資料_202302
excitejp
PRO
0
150
【エンジニア向け】エキサイト株式会社SaaS事業部紹介資料
excitejp
PRO
0
2.2k
2022年度新卒技術研修「良いコードの書き方」講義
excitejp
PRO
0
1.2k
2022年度新卒技術研修「DNS」講義
excitejp
PRO
1
1.3k
2022年度新卒技術研修「エンジニアマインド」講義
excitejp
PRO
0
1.2k
Other Decks in Technology
See All in Technology
Amazon FSx for NetApp ONTAPを利用するにあたっての要件整理と設計のポイント
non97
1
160
Nix入門パラダイム編
asa1984
2
200
来年もre:Invent2024 に行きたいあなたへ - “集中”と“つながり”で楽しむ -
ny7760
0
460
使えそうで使われないCloudHSM
maikamibayashi
0
170
生成AIの強みと弱みを理解して、生成AIがもたらすパワーをプロダクトの価値へ繋げるために実践したこと / advance-ai-generating
cyberagentdevelopers
PRO
1
180
AWSコンテナ本出版から3年経った今、もし改めて執筆し直すなら / If I revise our container book
iselegant
15
3.9k
pandasはPolarsに性能面で追いつき追い越せるのか
vaaaaanquish
4
4.4k
Figma Dev Modeで進化するデザインとエンジニアリングの協働 / figma-with-engineering
cyberagentdevelopers
PRO
1
430
visionOSでの空間表現実装とImmersive Video表示について / ai-immersive-visionos
cyberagentdevelopers
PRO
1
110
ガバメントクラウド単独利用方式におけるIaC活用
techniczna
3
270
LeSSに潜む「隠れWF病」とその処方箋
lycorptech_jp
PRO
2
120
独自ツール開発でスタジオ撮影をDX!「VLS(Virtual LED Studio)」 / dx-studio-vls
cyberagentdevelopers
PRO
1
170
Featured
See All Featured
For a Future-Friendly Web
brad_frost
175
9.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
GraphQLとの向き合い方2022年版
quramy
43
13k
Adopting Sorbet at Scale
ufuk
73
9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
GraphQLの誤解/rethinking-graphql
sonatard
66
9.9k
Being A Developer After 40
akosma
86
590k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
Build The Right Thing And Hit Your Dates
maggiecrowley
32
2.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
Become a Pro
speakerdeck
PRO
24
5k
Transcript
フロントエンド フロントエンドの変遷から今どきまで iXIT 堀
はじめまして!iXITの堀です。 自己紹介 これまでサーバーサイド(C言語、Perl、ASPな ど)→インフラ&社内ヘルプデスク→フロントエン ドを経験。 最近はPM業をメインとしているためフロントエン ドの現場からは離れてしまっていますが、本日はフ ロントエンドの楽しさを知ってもらえればと思いま す。
01 フロントエンド技術の変遷 02 フロントエンドのフレームワーク 本日の内容 トピック 03 ECMAScriptについて
Web黎明期 1990年前半 IEとNetscapeによる第1次ブ ラウザ戦争。 静的にHTMLファイルを配 信するだけ。 フロントエンドエンジニア と言う区分けすらなかっ た。 動的HTML生成
1990年中盤 CGI, JavaServletなどクラ イアントからのリクエスト の内容をサーバが解釈しサ ーバ側でHTMLを作成しク ライアントに返す手法が流 行った。 DHTML 1990年後半 動的でインタラクティブな 表現が追加できることで話 題になったが当時のJS仕 様が貧弱だった上、ブラウ ザ間での差があった。 Ajax 2005年 非同期でサーバからデー タを取得する技術 フロントエンド技術の変遷 Firefox誕生 2004年 第2次ブラウザ戦争到来
jQuery登場 2006年 Ajaxの普及を後押し。 ブラウザ間の非互換性を ほとんど気にすること無 く簡潔なコードでDOM操 作、Ajax通信を可能とし た。 Chrome誕生 2008年
ブラウザ戦争が更に熾烈に Node.js登場 2009年 JSでサーバサイドを動か すことが出来ると話題に。 同時期にAngularJSも登場 しフロントエンド界隈がに ぎやかに。 React、Vue.js登場 2013年 Reactは旧Facebook社から 発表され、Virtual DOMとい う新しいレンダリング機能 が話題となり一気に普及し た。 遅れること9ヶ月、Vue.jsが 登場。 フロントエンド技術の変遷 npm登場 2010年 Node.jsにパッケージマ ネージャとして同梱され た。 モジュールを公開してシ ェアして再利用する文化 が定着し、JavaScriptプ ログラムの開発効率や品 質がかなり向上した。
旧Facebookが中心となって開発したJavaScriptのフレームワ ーク(Viewライブラリーと言われることもある) コンポーネントベースと呼ばれる考え方が取り入れられてい て、コンポーネントに分解(部品化)して管理できるようにな っている JSX記法(JSの中にHTMLタグを記載していく)による実装 CSS-in-JSやCSSフレームワークを利用してコーディング 処理が高速だがオブジェクトが増えるとCPUとメモリ消費も上 がる TypeScriptと相性が良い
【概要】 【特徴】 React フレームワーク について〜React編~ Reactを使ったアプリケーションフレームワーク。 サーバ機能を保持しているため、Webアプリケーションを実 施しやすい(Reactだけでは別途サーバモジュールを追加する 必要がある) アプリケーションの状態を保持できる ルーティングを自動生成出来る 【概要】 【特徴】 Next.js
JavaScriptのフレームワーク。 Javasciptに近い書き方が採用されているため導入ハードルが低 い。 props, emitなどを利用してデータ同期の機能が用意されている 公式で紹介されているライブラリーが多く拡張性が高い 「.vue」ファイル内にHTML, CSS, JSを記載する scoped属性を持つ<style>タグを利用して限定的なコンポーネン
トにスタイルが適用される 処理は高速でオブジェクト数が増えてもメモリ消費量は極端に は増えないが処理速度がReactより若干遅くなる Vue3でTypeScriptがサポートされた 【概要】 【特徴】 Vue.js Reactを使ったアプリケーションフレームワーク。 サーバ機能を保持しているため、Webアプリケーションを実 施しやすい(Reactだけでは別途サーバモジュールを追加する 必要がある) アプリケーションの状態を保持できる ルーティングを自動生成出来る 【概要】 【特徴】 Nuxt.js フレームワーク について〜Vue編~
高速で動作するビルドツール Vue.js, Reactのビルドもサポート 簡単に開発環境を構築することが可能(Vue3 x VITEは1行で完 了) ※Node.jsはver.12以降が必要 高速なHMR(Hot Module
Replacement) Vue CLIより高速 【概要】 【特徴】 VITE(ヴィート) フレームワーク について〜VITE編~ npm init vite@latest 開発環境の構築 yarn create vite または 実際に作ってみましょう!
ECMAScript JSの標準化を行う際に基本部分の仕様を定めたのがECMAScript です。 JSはECMAScriptの仕様に則って開発されています。 ECMAScriptは改定が行われるたびにバージョンが新しくなりま すが、JSにバージョンはありません。 Javascriptとの違い(以下JSと省略) ECMAScriptのバージョン(直近のもののみ)
ECMAScript 1997年の初版から改定を続けているECMAScriptですが、2015年 のES2015で大きな変更がありました。 一部抜粋して紹介します。 ES2015 ES2015以前はvarによる変数宣言のみでした。 スコープがグローバルで再代入可能なのでバグが多発する恐れがあった。 •変数宣言(let, const) ES2015以前はfunctionで記載。
アロー関数が導入され、=>で関数宣言が行えるようになった。 •アロー関数 Promiseは非同期処理を扱うオブジェクト。ES2015以前より使われていた コールバックより簡潔かつ明瞭に非同期処理が出来るようなった。 ES2017で追加されたsync/awaitはPromiseを使った非同期処理に対して新 しい構文。 現在はasync/awaitの方が主流となっている。 •非同期処理(Promis, async/await)
参考URL QiitaやCodepenなどを活用しよう! https://qiita.com/tags/react https://qiita.com/tags/vue.js https://zenn.dev/ https://risingstars.js.org/2021/ja Qiitaをはじめ多くの技術情報がWebに載っているので 活用しよう! https://codepen.io/ https://jsfiddle.net/
https://ja.reactjs.org/tutorial/tutorial.html https://v3.ja.vuejs.org/guide/introduction.html CodepenやJSFiddleを利用してコードを書いてみよ う!