Clik here to view.
Angular でアプリケーションを作成したらやること 4 点
この記事は Angular Advent Calendar 2018 の 1 日目の記事です。 Angular でアプリケーションを作成する時にやっておくと役立つオススメ 4 点の紹介をします。 今回の環境 以下の設定で確認 macOS Angular CLI : 7.1.0 Angular アプリケーションの作成 下記コマンドでアプリケーションを作成 $ ng new...
View ArticleAngularの便利タグng-container, ng-content, ng-template
Angularアドベントカレンダー2日目です。昨日は @kasaharu さんでした。...
View ArticleClik here to view.
Schematicsを作ってみよう
この記事は Angular Advent Calendar 2018 の 3 日目の記事です。 みなさん今日もAngular CLI使っていますか？ Angular CLIは、ビルド周りや開発サーバの面倒を見てくれるだけでなく、ng generateやng addといったコマンドを実行するだけで必要なファイルの生成はもちろん、モジュールの追加や設定の変更も行ってくれるので非常に便利ですよね。...
View ArticleClik here to view.
SSR の知識ゼロから始める Angular Universal
はじめに これは Angular Advent Calendar 2018 4日目の記事です。 こんにちは (｡･ω･｡) Angular で CGM サービスを運用・構築したり、ng-japan の slack で emoji を追加することを生業としている者です。（コミュニケーションの場は本格的にspectrum へ移行することが決定したため emoji...
View ArticleClik here to view.
データ可視化への一歩目 〜Angular + Chart.js〜
この記事は Angular Advent Calendar 2018 の 5 日目の記事です。 はじめに IoT や機械学習などデータに触れる機会が多くなったいま、データ収集が積極的に行われています。 当然データを収集するだけでは宝の持ち腐れになってしまいます。 そのデータから どの部分を抽出して どのように加工して どこをどう利用するのか どんな知見を得るのか...
View ArticleClik here to view.
GitHubを活用して、クライアントと協働してWebサイトをAngularでつくろう。
この記事はAngular Advent Calendar 2018の6日目の記事です。 概要 GitHubもCMSだよね クライアントがGitHub上で修正したらもっと幸せな世界が待ってる リスク管理や速度の部分はAngularのAOTビルドが担ってくれるよ Webサイト構築でこそ、Angularを使おう CMSに代わるGitHubという見方 CMSって皆さん利用されていますか？Contents...
View ArticleClik here to view.
Angularのシンプルな状態管理ライブラリ Akita について
はじめに この記事は、Angular Advent Calendar 2018の7日目の記事です。 ここではngrxと比べればまだ認知度が低い、Akitaという状態管理ライブラリをご紹介します。 Akitaって？ Introduction - State Management Tailored-Made for JS Applications Akita is a state management...
View ArticleClik here to view.
ComponentDevKit(DragAndDrop)を使ってみる
はじめに この記事はAngular Advent Calendar 2018の8日目の記事です Angular7がリリースされてComponentDevKitにDragAndDropが入ってきました ということで簡単なTODOアプリを作ってみます CDKとは 簡単に言うと一般的なWebアプリケーションで使うUIを提供してくれるライブラリ群です 少ないコード記述量・短時間で必要な機能を構築できます...
View ArticleClik here to view.
Angularで同じ絵文字をクリックするだけのクソゲーを作りました
この記事は Angular Advent Calendar 2018 の 9 日目の記事です。 クソアプリ Advent Calendarでやってくれとツッコミの入りそうなネタですが、Angular関連なのでこちらで書かせてもらいます。 作ったもの Firebase Hostingにデプロイしてあるので、「 same-emoji 」から遊べます。...
View ArticleClik here to view.
Angular＋sass（scss）によるカラーテーマ切り替えベストプラクティス
Angular＋sass（scss）によるカラーテーマ切り替えベストプラクティス この記事は，Angular Advent Calendar 2018，10日目の記事です． TL;DR オンラインデモ コード全量 目指したかったもの WEBで，各要素の色を，瞬時に切り替えたい 全部css（sass，もといscss）で管理したい 色は，scssの変数で1か所で管理したい...
View ArticleClik here to view.
Angularの複数プロジェクト構成とFirebeseホスティング
からあげ🐔とおんせん♨の国のkpondaです。 この記事はAngular Advent Calendar 2018 12日目の記事です。 Angularでの複数プロジェクト構成とFirebase Hostingを使った公開方法について書こうと思います。 はじめに Angularのプロジェクト構成にはAngular CLIを、Firebaseの設定などはFirebase Toolsを使用します。...
View Article実践！Schematics
これは Angular アドベントカレンダー2018 の13日目の記事です。 はじめに このエントリでは、Angular CLIで利用されているSchematicsについて書きたいと思います。 Schematicsは "A scaffolding library for the modern web"...
View ArticleClik here to view.
Ngrxをこれから始める人への入門ガイド
はじめに この記事はAngular AdventCalendar2018 14日目の記事です。 今までReact、Vueを使うことが多かったんですが、半年前からプロダクトでAngular + Ngrxを扱うことになりました。...
View ArticleClik here to view.
date inputの救世主!? Angular Materialのdatepickerを使ってみた
はじめに この記事はAngular Advent Calendar 2018 15日目の記事です。 Webアプリケーションでよく使う入力系のUIに「日付の入力」があると思いますが これがなかなかサポートするブラウザによっては使い物にならない場合が多く それをカバーするために様々な日付入力用のライブラリが出ていると思います。 パッと思いつきレベルではjQuery系とかが豊富なイメージですが、...
View ArticleClik here to view.
Anguar Material CDK の Virtual Scrolling を触ってみた
はじめに この記事は Angular Advent Calendar 2018 16日目の記事です。 Angular7がリリースされ、CDK に DragDropModule や ScrollingModule が追加されました。これらをインポートすると Drag and Drop や Virtual Scrolling が利用できます。 触ってみたかったのでサンプルに沿って少し触ってみました。...
View ArticleNgRx MockStoreについて
この記事は Angular Advent Calendar 2018 の 18日目の記事です。 今回は最近NgRxの新機能として追加されたMockStoreについて書きたいと思います。 NgRxの基本的な使い方については14日目でkiita312さんが書かれていますので、ぜひそちらをご参考ください。 Ngrxをこれから始める人への入門ガイド MockStoreとは...
View ArticleAngular fakeAsyncTest 使い方の纏め
元々Zoneのテスト周りの新機能を書きたいですが、まだ実装完了していないので、fakeAsync の使い方を纏めさせて頂きます。 fakeAsyncオフィシャルのドキュメントがこちらです、https://angular.io/guide/testing#async-test-with-fakeasync...
View Articleangular.jsonの中身
angular-cli 7.1.2で確認しました。 ng newで生成されるプロジェクトのangular.jsonの中身について、よく使う項目の調査です。 ルートオブジェクト $schema このファイルに関するJSON Schemaの定義ファイル "./node_modules/@angular/cli/lib/config/schema.json" 固定...
View ArticleClik here to view.
AWS AppSync + ApolloではじめるGraphQL
この記事は Angular Advent Calendar 2018 の 22 日目の記事です。 概要 AWS AppSyncを使って画面にデータを表示してみたい方 フロントエンドエンジニアでも簡単にGraphQLを触ってみたい方 GraphQLを導入するか迷っている方向けの記事 RESTがつらい （例）AWS構成図 上の図のようにAngular + AWSを使い REST...
View ArticleClik here to view.
AngularElementsでAMP htmlを動的にロードする
本記事ではAngularElementsを使ってAMP htmlをロードするという試みをします。 AMPは、ページを高速に表示してSEOがよくなるやつですね。1 Angular Elementsについて ブートストラップ以下のツリーを通さず直接DOMにAngularComponentを追加できるようになるです。...
View ArticleAngular MaterialのWrapper Componentを作る
こんにちは。24日目、思いっきり遅刻してしまい申し訳ありません。Angularを使い始めて半年も経ってないですが、Angular Material ComponentのWrapper component（特にmat-radio-button）を作りながらいくつか気づいたところを書いていきたいと思います。 @Input まず基本的なInputプロパティ。普通のやり方でdisabledで例えると...
View Article