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
59
Angularの雰囲気を伝えたい
jQueryは知ってるけど、Angularを知らない人向けに雰囲気を伝えるために作成、発表した資料。
koz
May 20, 2021
Tweet
Share
More Decks by koz
See All by koz
3分でわかる WebRTCのP2P通信
koz
0
80
TypeScriptに興味を持って欲しいスライド
koz
0
260
Other Decks in Technology
See All in Technology
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
43k
React19.2のuseEffectEventを追う
maguroalternative
0
300
このままAIが発展するだけでAGI達成可能な理由
frievea
0
110
衛星画像超解像化によって実現する2D, 3D空間情報の即時生成と“AI as a Service”/ Real-time generation spatial data enabled_by satellite image super-resolution
lehupa
0
170
[Keynote] What do you need to know about DevEx in 2025
salaboy
0
180
セキュアな認可付きリモートMCPサーバーをAWSマネージドサービスでつくろう! / Let's build an OAuth protected remote MCP server based on AWS managed services
kaminashi
3
330
カンファレンスに託児サポートがあるということ / Having Childcare Support at Conferences
nobu09
1
580
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing Hiroshima 2025 Edition
tomzoh
0
140
能登半島災害現場エンジニアクロストーク 【JAWS FESTA 2025 in 金沢】
ditccsugii
0
850
コンテキストエンジニアリング入門〜AI Coding Agent作りで学ぶ文脈設計〜
kworkdev
PRO
3
1.4k
ニッポンの人に知ってもらいたいGISスポット
sakaik
0
150
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.8k
Featured
See All Featured
A designer walks into a library…
pauljervisheath
209
24k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
GraphQLとの向き合い方2022年版
quramy
49
14k
How STYLIGHT went responsive
nonsquared
100
5.8k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Building Applications with DynamoDB
mza
96
6.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Balancing Empowerment & Direction
lara
4
690
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Six Lessons from altMBA
skipperchong
29
4k
Leading Effective Engineering Teams in the AI Era
addyosmani
6
440
Navigating Team Friction
lara
190
15k
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が好きです。皆さんも使ってみてください。 おしまい。