Angularの雰囲気を伝えたい

jQueryは知ってるけど、Angularを知らない人向けに雰囲気を伝えるために作成、発表した資料。

Transcript

1. Angularってなんぞ （jQuery完全理解な貴方へ）
2. 自己紹介
3. - Angular 勉強中 - GCP🔰 @koz
4. アジェンダ • アンケート結果から見る動向 • Angularとは • jQueryとの違い • 学習コストは高い？ • バージョンとリリース
5. アンケート結果から見る動向
6. State Of JS 2020 https://2020.stateofjs.com/ja-JP/
7. 注意 https://twitter.com/laco2net/status/1213411677401600000
8. AngularとAngularJSを区別すべきに対して https://github.com/StateOfJS/StateOfJS-Vulcan/issues/26#issuecomment-560237984
9. Angularは参考程度に Angularのアンケート結果は、AngularとAngularJSを区別しているわけではので注意。 参考程度にみておくべし。 ※AngularJSとはAngularの前のバージョンのフレームワーク。前のバージョンと言っても別物で、 AngularJSの 良い部分を引き継いで 1から新しく作られたのが Angularです。
10. 世界各国から集計
11. 満足度
12. 利用度
13. 満足度 vs 利用度
14. npm trends https://www.npmtrends.com/react-vs-@angular/core-vs-vue
15. まとめ アンケートの結果では、Angularは（世界的に）利用者は多いが、満足度は低めという結 果。 ReactやVue.jsは、利用者は多いかつ満足度も高め。 ただし、Angularの結果はAngularJSと区別されていないため、個人的には満足度はも う少し高いと思われる。 npm trends によればどれも右肩上がり。（とはいえ、react強い）
16. Angularとは
17. Angular is 何 https://github.com/angular/angular 訳）AngularはTypescript/JavaScriptとかを使って、モバイルとWEBアプリケーションを つくるための、開発プラットフォームです。
18. 完全に理解した！！
19. ここは抑えておこう • Googleが開発を進めているオープンソースフレームワーク • フルスタックフレームワーク • コンポーネント指向 • SPAが得意
20. フルスタックフレームワーク = 開発に必要なものは用意しといたぜ！！ Angularは、提供されている機能を使ってSPAを構築していくものと覚えても大丈夫で す。 悩むとしても、多くは状態管理用のライブラリを入れるかどうかくらいでしょう。
21. ところで、AngularJS? AngularとAngularJSは別のフレームワークです。 JavaとJavaScriptくらい違います。（本当か？） もし案件で情報で、Angular.jsとか書かれていたら、必ずAngularかAngularJSかを確 認しましょう。 Angularとあってもバージョンの確認は必須です。あまりにも古いとメンテ/バージョン アップにコストがかかります。もしかしたら、AngularJSの可能性すらあります。
22. jQueryとの違い
23. その前に、、
24. 初心者の位置づけとなっていた > 短い・シンプルなJavaScriptコードや jQueryコードが書ける！！！！
25. jQueryとは 言わずと知れたJavaScriptのライブラリ。 ブラウザ毎のAPIの違いを吸収して提供される$関数。 DOM操作、CSS操作、aJaxによる通信、Deferredによる非同期処理。 当時は必須ライブラリだった。（IEさん全盛期） キャッチコピーは「write less, do more」（「少ない記述で、もっと多くのことをする」の 意）。 https://ja.wikipedia.org/wiki/JQuery
26. VS Angular JQueryはライブラリー。必要に応じてプラグインで拡張していく。 役割としては、要素を選択して直接DOMを書き換える。 そこに通信やアニメーションを入れて対応していく感じ。 ほぼ静的なWEBサイトや小さく複雑でないWEBアプリで採用するのは全然OK。 ただし、今新規で何か作るならjQueryではなくVue.jsでおk感は満載である。
27. 学習コストは高い？
28. Angularの学習コストは本当に高い？ https://blog.lacolaco.net/2019/02/angular-learning-costs/
29. GDE曰く低くはない
30. 学習領域 ※ Optional
31. • フルスタックフレームワークなので、用意されているものを使えるようにならないとい けないタイミングが全部最初の方にやってくる。 • 入門してからその後どう進めばいいかがわからない。 ◦ 公式の資料だけだと詰まりやすいと感じる。 コストが高い理由（個人見解）
32. なんとなく作れちゃうが、Angular Way ではない作りに。。 テスタブルでない、、 パフォーマンスが悪い、、 気づいたらハウルの城のようなPJに、、 学習にコストを割かないと・・・
33. 学習領域から足りていない箇所をキャッチアップしていくのがいいと思う。 技術 ＞ Angularの機能 ＞ 設計 の優先度。 経験者、有識者が居れば甘えるといいんじゃないかな！ Angularのキャッチアップ例： 公式の「Angularとは？」で概要を掴む → チュートリアル / 入門書 → アフターチュート リアル → 公式、自作App... じゃあどうすればいい？
34. アフターチュートリアルおすすめです https://zenn.dev/lacolaco/books/angular-after-tutorial
35. バージョンとリリース
36. バージョンアップ対応があります • リリース周期 • サポートポリシー 上記2点を押さえて、最初から計画に含めておきましょう。
37. リリース周期 https://angular.jp/guide/releases#リリース周期
38. サポートポリシー https://angular.jp/guide/releases#サポートポリシーとスケジュール
39. まとめ • メジャー / マイナー / パッチリリースがある • サポート期間がある • メジャーアップデートは計画必須 • 上記を踏まえて最初から計画を立てておこう
40. これでAngularの雰囲気がつかめました！88888 僕はAngularが好きです。皆さんも使ってみてください。 おしまい。