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
48
Angularの雰囲気を伝えたい
jQueryは知ってるけど、Angularを知らない人向けに雰囲気を伝えるために作成、発表した資料。
koz
May 20, 2021
Tweet
Share
More Decks by koz
See All by koz
3分でわかる WebRTCのP2P通信
koz
0
70
TypeScriptに興味を持って欲しいスライド
koz
0
230
Other Decks in Technology
See All in Technology
ホワイトボードチャレンジ 説明&実行資料
ichimichi
0
130
実は強い 非ViTな画像認識モデル
tattaka
1
610
クラウドサービス事業者におけるOSS
tagomoris
3
960
ユーザーストーリーマッピングから始めるアジャイルチームと並走するQA / Starting QA with User Story Mapping
katawara
0
280
脳波を用いた嗜好マッチングシステム
hokkey621
0
230
Amazon S3 Tablesと外部分析基盤連携について / Amazon S3 Tables and External Data Analytics Platform
nttcom
0
150
2/18/25: Java meets AI: Build LLM-Powered Apps with LangChain4j
edeandrea
PRO
0
150
一度 Expo の採用を断念したけど、 再度 Expo の導入を検討している話
ichiki1023
1
240
依存パッケージの更新はコツコツが勝つコツ! / phpcon_nagoya2025
blue_goheimochi
3
180
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
17
45k
次世代KYC活動報告 / 20250219-BizDay17-KYC-nextgen
oidfj
0
440
Raycast AI APIを使ってちょっと便利な拡張機能を作ってみた / created-a-handy-extension-using-the-raycast-ai-api
kawamataryo
0
170
Featured
See All Featured
Facilitating Awesome Meetings
lara
52
6.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
A designer walks into a library…
pauljervisheath
205
24k
Code Review Best Practice
trishagee
67
18k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
360
How STYLIGHT went responsive
nonsquared
98
5.4k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
980
Code Reviewing Like a Champion
maltzj
521
39k
Mobile First: as difficult as doing things right
swwweet
223
9.4k
How to Ace a Technical Interview
jacobian
276
23k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.8k
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が好きです。皆さんも使ってみてください。 おしまい。