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