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
Angularの雰囲気を伝えたい
Search
koz
May 20, 2021
Technology
0
61
Angularの雰囲気を伝えたい
jQueryは知ってるけど、Angularを知らない人向けに雰囲気を伝えるために作成、発表した資料。
koz
May 20, 2021
Tweet
Share
More Decks by koz
See All by koz
3分でわかる WebRTCのP2P通信
koz
0
81
TypeScriptに興味を持って欲しいスライド
koz
0
260
Other Decks in Technology
See All in Technology
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
Databricks AI/BI Genie の「値ディクショナリー」をAmazonの奥地(S3)まで見に行く
kameitomohiro
1
400
AIエージェント入門 〜基礎からMCP・A2Aまで〜
shukob
1
170
だいたい分かった気になる 『SREの知識地図』 / introduction-to-sre-knowledge-map-book
katsuhisa91
PRO
3
1.4k
From Natural Language to K8s Operations: The MCP Architecture and Practice of kubectl-ai
appleboy
0
170
様々なファイルシステム
sat
PRO
0
230
QA業務を変える(!?)AIを併用した不具合分析の実践
ma2ri
0
130
オブザーバビリティと育てた ID管理・認証認可基盤の歩み / The Journey of an ID Management, Authentication, and Authorization Platform Nurtured with Observability
kaminashi
1
260
AI時代の開発を加速する組織づくり - ブログでは書けなかったリアル
hiro8ma
1
290
「タコピーの原罪」から学ぶ間違った”支援” / the bad support of Takopii
piyonakajima
0
140
スタートアップの現場で実践しているテストマネジメント #jasst_kyushu
makky_tyuyan
0
110
会社を支える Pythonという言語戦略 ~なぜPythonを主要言語にしているのか?~
curekoshimizu
3
630
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
990
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
880
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Faster Mobile Websites
deanohume
310
31k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Context Engineering - Making Every Token Count
addyosmani
8
300
Leading Effective Engineering Teams in the AI Era
addyosmani
7
600
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
4 Signs Your Business is Dying
shpigford
185
22k
Building an army of robots
kneath
305
46k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Transcript
Angularってなんぞ (jQuery完全理解な貴方へ)
自己紹介
- Angular 勉強中 - GCP🔰 @koz
アジェンダ • アンケート結果から見る動向 • Angularとは • jQueryとの違い • 学習コストは高い? •
バージョンとリリース
アンケート結果から見る動向
State Of JS 2020 https://2020.stateofjs.com/ja-JP/
注意 https://twitter.com/laco2net/status/1213411677401600000
AngularとAngularJSを区別すべきに対して https://github.com/StateOfJS/StateOfJS-Vulcan/issues/26#issuecomment-560237984
Angularは参考程度に Angularのアンケート結果は、AngularとAngularJSを区別しているわけではので注意。 参考程度にみておくべし。 ※AngularJSとはAngularの前のバージョンのフレームワーク。前のバージョンと言っても別物で、 AngularJSの 良い部分を引き継いで 1から新しく作られたのが Angularです。
世界各国から集計
満足度
利用度
満足度 vs 利用度
npm trends https://www.npmtrends.com/react-vs-@angular/core-vs-vue
まとめ アンケートの結果では、Angularは(世界的に)利用者は多いが、満足度は低めという結 果。 ReactやVue.jsは、利用者は多いかつ満足度も高め。 ただし、Angularの結果はAngularJSと区別されていないため、個人的には満足度はも う少し高いと思われる。 npm trends によればどれも右肩上がり。(とはいえ、react強い)
Angularとは
Angular is 何 https://github.com/angular/angular 訳)AngularはTypescript/JavaScriptとかを使って、モバイルとWEBアプリケーションを つくるための、開発プラットフォームです。
完全に理解した!!
ここは抑えておこう • Googleが開発を進めているオープンソースフレームワーク • フルスタックフレームワーク • コンポーネント指向 • SPAが得意
フルスタックフレームワーク = 開発に必要なものは用意しといたぜ!! Angularは、提供されている機能を使ってSPAを構築していくものと覚えても大丈夫で す。 悩むとしても、多くは状態管理用のライブラリを入れるかどうかくらいでしょう。
ところで、AngularJS? AngularとAngularJSは別のフレームワークです。 JavaとJavaScriptくらい違います。(本当か?) もし案件で情報で、Angular.jsとか書かれていたら、必ずAngularかAngularJSかを確 認しましょう。 Angularとあってもバージョンの確認は必須です。あまりにも古いとメンテ/バージョン アップにコストがかかります。もしかしたら、AngularJSの可能性すらあります。
jQueryとの違い
その前に、、
初心者の位置づけとなっていた > 短い・シンプルなJavaScriptコードや jQueryコードが書ける!!!!
jQueryとは 言わずと知れたJavaScriptのライブラリ。 ブラウザ毎のAPIの違いを吸収して提供される$関数。 DOM操作、CSS操作、aJaxによる通信、Deferredによる非同期処理。 当時は必須ライブラリだった。(IEさん全盛期) キャッチコピーは「write less, do more」(「少ない記述で、もっと多くのことをする」の 意)。
https://ja.wikipedia.org/wiki/JQuery
VS Angular JQueryはライブラリー。必要に応じてプラグインで拡張していく。 役割としては、要素を選択して直接DOMを書き換える。 そこに通信やアニメーションを入れて対応していく感じ。 ほぼ静的なWEBサイトや小さく複雑でないWEBアプリで採用するのは全然OK。 ただし、今新規で何か作るならjQueryではなくVue.jsでおk感は満載である。
学習コストは高い?
Angularの学習コストは本当に高い? https://blog.lacolaco.net/2019/02/angular-learning-costs/
GDE曰く低くはない
学習領域 ※ Optional
• フルスタックフレームワークなので、用意されているものを使えるようにならないとい けないタイミングが全部最初の方にやってくる。 • 入門してからその後どう進めばいいかがわからない。 ◦ 公式の資料だけだと詰まりやすいと感じる。 コストが高い理由(個人見解)
なんとなく作れちゃうが、Angular Way ではない作りに。。 テスタブルでない、、 パフォーマンスが悪い、、 気づいたらハウルの城のようなPJに、、 学習にコストを割かないと・・・
学習領域から足りていない箇所をキャッチアップしていくのがいいと思う。 技術 > Angularの機能 > 設計 の優先度。 経験者、有識者が居れば甘えるといいんじゃないかな! Angularのキャッチアップ例: 公式の「Angularとは?」で概要を掴む
→ チュートリアル / 入門書 → アフターチュート リアル → 公式、自作App... じゃあどうすればいい?
アフターチュートリアルおすすめです https://zenn.dev/lacolaco/books/angular-after-tutorial
バージョンとリリース
バージョンアップ対応があります • リリース周期 • サポートポリシー 上記2点を押さえて、最初から計画に含めておきましょう。
リリース周期 https://angular.jp/guide/releases#リリース周期
サポートポリシー https://angular.jp/guide/releases#サポートポリシーとスケジュール
まとめ • メジャー / マイナー / パッチリリースがある • サポート期間がある •
メジャーアップデートは計画必須 • 上記を踏まえて最初から計画を立てておこう
これでAngularの雰囲気がつかめました!88888 僕はAngularが好きです。皆さんも使ってみてください。 おしまい。