Typescript
はじめに 環境 やりたいこと バリデーションの実装 HTMLテンプレート コンポーネントクラス カスタムバリデーター 参考サイト はじめに Angularでクロスフィールドバリデーション(複数項目にまたがるバリデーション )を使った時に、フォーム全体をエラーに…
はじめに 環境 今回作るもの 分数入力コンポーネントの実装 参考サイト はじめに 自作コンポーネントで双方向バインディング機能(ngModel)を使えるようにしたい。 環境 CSSフレームワークとしてAngular Materialを使用しています Angular: 8.2.14 Node: 12.1…
はじめに 環境 今回やりたいこと ウィンドウにデータを渡す二つの方法 1. ローカルストレージを用いる方法 2. window.postMessage()を用いる方法 ウィンドウにデータを渡す実装 ローカルストレージを採用した場合 親ウィンドウの実装 子ウィンドウの実装 win…
はじめに 環境 作ったもの 実装 ルーティング設定 親ウィンドウの実装 子ウィンドウの実装 データの受け渡しについて 参考サイト はじめに 仕事でAngularを使ってアプリケーションを作成している時に、window.open()で別ウィンドウを表示する要件があったの…
はじめに 環境 msSaveBlobからmsSaveOrOpenBlobに変更 参考サイト はじめに SPAアプリ上でIE11ブラウザを使ってPDFファイルを参照する場合に、PDFファイルをダウンロードせずにそのまま開いて参照したいとの要望をクライアントからいただいたため、ソースコ…
はじめに 環境 発生したエラー 対処法 参考サイト はじめに npm scriptsを使ってIonic(Angular/TypeScript)のAndroidビルドをしている時にFATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memoryエラーが発生して処理が落ちて…
はじめに 環境 実践 例1: Promiseが値を返さないパターン Before: Promiseで書かれた処理 After: async/awaitに書き直した処理 例2: Promiseが値を返すパターン Before: Promiseで書かれた処理 After: async/awaitに書き直した処理 参考サイト はじめに 非…
発生した障害 障害が発生した環境 障害の改修手順 Angular CLIの最新版をインストール Node.jsのバージョン10.9以上をインストール 動作確認 参考サイト 発生した障害 Angular v8のプロジェクトでAngular CLIのng generateコマンドを使用してコンポーネント…
やりたいこと 一つ目のルーティング基点 二つ目のルーティング基点 参考サイト やりたいこと <router-outlet>をふたつ設置することで、ホーム画面にサイドメニューを作成します。 一つ目の<router-outlet>では、URLに応じて、ログイン画面・アカウント登録画面などを表示し、二つ目の<router-outlet>をホー</router-outlet></router-outlet></router-outlet>…
「TypeScript(Angular)でオブジェクトの中身を画面に表示したいのに[object Object]って表示される。どうしたらいい?」みたいな質問を仕事中に受けたのでメモ。 オブジェクトをJSON文字列に変換する バージョン情報 オブジェクトをJSON文字列に変換する 質…
業務で作成したiOSアプリの障害についてのメモ 障害内容 iOS 12.2以降の端末でIonic v3.9.3で作成したiOSアプリを動かしたら、スクロールができなかった。 改修方法 Ionic v3.9.5以前のバージョンによるバグが原因の障害となる。ionic-angularのバージョンを…
はじめに 使用ライブラリ・言語のバージョン情報 「モールス信号 翻訳」の機能 実装 ディレクトリ構成 コンポーネントの構成 ルートコンポーネントの実装 input コンポーネントの実装 convert サービスクラスの実装 share-buttonコンポーネントの実装 デプロ…
はじめに バージョン 学習メモ ライフサイクル パイプ フォーム HTTPClient Service WorkerとPWA バージョニング チートシート あとがき はじめに 日本語翻訳していただいた全ての人々に感謝....... angular.jp バージョン v.7.2.0時点のドキュメント 学習メ…
はじめに 引用元の記事 試しに触ってみる 実装 バージョン情報 質問フォーム作成 回答を表示するコンポーネントを作成する 動作確認 あとがき はじめに Vue.jsの公式ドキュメントに、質問するとユーザーの代わりにYES or NOの意思決定を行ってくれるWebAPI(Y…
はじめに アプリケーションを作る上で避けられない、ボタンの連続クリック防止機能を今回は作成します。この機能がないと同じメールが2通飛んだりデータベースにレコードが重複してINSERTされてしまうかも...... バージョン情報 JavaScriptのフレームワーク…
はじめに アカウント登録画面でよく見る姓と名の入力欄について、フォームが二つに別れているパターンと、フォームが一つになっていてスペースで姓と名を区切るパターンの二つがあると思います。 今回は後者を採用した場合に必要になるバリデーションについ…
はじめに Promiseチェーンの色々な例 returnなし returnあり 数値を伝搬するPromiseチェーン Promiseを伝搬するPromiseチェーン 結論 参考サイト はじめに then関数に新しいPromiseオブジェクトを返す機能があるので、then内でPromiseをreturnする処理を書か…
モチベーション 強力そうだけどいまいち使いこなせていない関数筆頭のArray.prototype.reduce()について、ちゃんと習得したいという思い バージョン情報 Angular: 6.0.3 Typescript: 2.7.2 今回やること 下記のオブジェクトの配列から、reduce()を使って値が…
はじめに 以前、iOSのFace ID, Touch IDを使用したログイン機能を設計する - 中安拓也のブログ という記事を書いたんだけど、実装してて辛かったり、そもそもセキュリティ的にマズそうだったので、色々と設計を変えた。 前回の設計 前回した設計なんですが、…
戻り値がPromiseのメソッドを順番に実行し、前の処理の結果を次の処理で使いたいという場合があります。そんな時は、Promise チェーンを使いましょう。 バージョン情報 Angular: 5.0.1 TypeScript: 2.4.2 サンプルコード 下記のコードは、iOSのFace ID/Touch…
バージョン情報 Angular: 5.0.1 エラー内容 AサービスクラスにBサービスクラスをDI、BサービスクラスにAサービスクラスをDI みたいなこと(循環参照状態)をしていた結果、タイトルのエラーが発生 Uncaught Error: Can't resolve all parameters for XXXServ…
業務でFace ID, Touch IDを使ったログイン機能を実装することになったので色々と調べた。 作成予定のシステム Face ID, Touch IDに対する誤解について 処理詳細 初回ログイン Face ID, Touch IDによるログイン Appleのレビューガイドライン 考えた点・補足 …
前回の記事はこちら ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成していました。 最低限の機能は、実装できたかな?というところまで来たので、今回で一旦完成ということにします。 下記のURL…
前回の記事はこちら ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成していきます。 第9回目である今回は、ショッピングカート画面のリストを、スライドすると削除ボタンが表示されるリストに変…
前回の記事はこちら ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成します。 第8回目である今回は、ショッピングカート画面のヘッダーに「空にする」ボタンをつけます デモ こちらのURLで、完成…
前回の記事はこちら ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成する。 第7回目である今回は、同じ商品を二つ買った場合でも、まとめて表示されない問題について解決します。 デモ こちらのU…
前回の記事はこちら ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成する。 第6回目である今回は、カートアイコンにショッピングカート内の商品数を表示するバッジをつけるところまで デモ こち…
前回の記事はこちら ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成する。 第5回目である今回は、カート画面を作成するところまで デモ こちらのURLで、完成版のアプリを実際に操作することがで…
前回の記事はこちら ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成する。 第4回目である今回は、ショッピングカートに商品を追加する処理の実装まで デモ こちらのURLで、完成版のアプリを実際…
前回の記事はこちら ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成する。 第3回目である今回は、商品詳細画面を作成するところまで デモ こちらのURLで、完成版のアプリを実際に操作することが…