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
56
Angularの雰囲気を伝えたい
jQueryは知ってるけど、Angularを知らない人向けに雰囲気を伝えるために作成、発表した資料。
koz
May 20, 2021
Tweet
Share
More Decks by koz
See All by koz
3分でわかる WebRTCのP2P通信
koz
0
76
TypeScriptに興味を持って欲しいスライド
koz
0
250
Other Decks in Technology
See All in Technology
SmartNewsにおける 1000+ノード規模 K8s基盤 でのコスト最適化 – Spot・Gravitonの大規模導入への挑戦
vsanna2
0
130
Sansanのデータプロダクトマネジメントのアプローチ
sansantech
PRO
0
160
AWS認定を取る中で感じたこと
siromi
1
190
OSSのSNSツール「Misskey」をさわってみよう(右下ワイプで私のOSCの20年を振り返ります) / 20250705-osc2025-do
akkiesoft
0
170
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
pichuang
0
270
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
190
Lakebaseを使ったAIエージェントを実装してみる
kameitomohiro
0
130
What’s new in Android development tools
yanzm
0
310
ゼロからはじめる採用広報
yutadayo
3
950
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
400
NewSQLや分散データベースを支えるRaftの仕組み - 仕組みを理解して知る得意不得意
hacomono
PRO
2
160
いつの間にか入れ替わってる!?新しいAWS Security Hubとは?
cmusudakeisuke
0
130
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Practical Orchestrator
shlominoach
189
11k
Git: the NoSQL Database
bkeepers
PRO
430
65k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Automating Front-end Workflow
addyosmani
1370
200k
Building Adaptive Systems
keathley
43
2.7k
Designing Experiences People Love
moore
142
24k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Making Projects Easy
brettharned
116
6.3k
Being A Developer After 40
akosma
90
590k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Done Done
chrislema
184
16k
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が好きです。皆さんも使ってみてください。 おしまい。