L08084のブログ

技術記事の執筆は、祈りに近い

Typescript

【Angular】 ボタンの連打を防止するディレクティブを作る(連続クリック・二重送信の禁止)

はじめに アプリケーションを作る上で避けられない、ボタンの連続クリック防止機能を今回は作成します。この機能がないと同じメールが2通飛んだりデータベースにレコードが重複してINSERTされてしまうかも...... バージョン情報 JavaScriptのフレームワーク…

【JavaScript】文字列の間に空白(スペース)が入力されているか確認する(氏名などのバリデーション)

はじめに アカウント登録画面でよく見る姓と名の入力欄について、フォームが二つに別れているパターンと、フォームが一つになっていてスペースで姓と名を区切るパターンの二つがあると思います。 今回は後者を採用した場合に必要になるバリデーションについ…

【JavaScript】return なしでもPromiseはメソッドチェーンできる

はじめに Promiseチェーンの色々な例 returnなし returnあり 数値を伝搬するPromiseチェーン Promiseを伝搬するPromiseチェーン 結論 参考サイト はじめに then関数に新しいPromiseオブジェクトを返す機能があるので、then内でPromiseをreturnする処理を書か…

【JavaScript】reduceを使ってオブジェクトの配列から一番大きいIDを取得する

モチベーション 強力そうだけどいまいち使いこなせていない関数筆頭のArray.prototype.reduce()について、ちゃんと習得したいという思い バージョン情報 Angular: 6.0.3 Typescript: 2.7.2 今回やること 下記のオブジェクトの配列から、reduce()を使って値が…

iOSのFace ID, Touch IDを使用したログイン機能を設計する - Part2

はじめに 以前、iOSのFace ID, Touch IDを使用したログイン機能を設計する - l08084のブログ という記事を書いたんだけど、実装してて辛かったり、そもそもセキュリティ的にマズそうだったので、色々と設計を変えた。 前回の設計 前回した設計なんですが、だ…

【JavaScript】Promise チェーンで、戻り値がPromiseのメソッドをつなぐ

戻り値がPromiseのメソッドを順番に実行し、前の処理の結果を次の処理で使いたいという場合があります。そんな時は、Promise チェーンを使いましょう。 バージョン情報 Angular: 5.0.1 TypeScript: 2.4.2 サンプルコード 下記のコードは、iOSのFace ID/Touch…

【Angular】お互いにDIしあっている(循環参照)と発生するエラー「Uncaught Error: Can't resolve all parameters for XXXService: (?, [object Object], [object Object]).」

バージョン情報 Angular: 5.0.1 エラー内容 AサービスクラスにBサービスクラスをDI、BサービスクラスにAサービスクラスをDI みたいなこと(循環参照状態)をしていた結果、タイトルのエラーが発生 Uncaught Error: Can't resolve all parameters for XXXServ…

iOSのFace ID, Touch IDを使用したログイン機能を設計する

業務でFace ID, Touch IDを使ったログイン機能を実装することになったので色々と調べた。 作成予定のシステム Face ID, Touch IDに対する誤解について 処理詳細 初回ログイン Face ID, Touch IDによるログイン Appleのレビューガイドライン 考えた点・補足 …

【JavaScript】Ionicで架空のECアプリを作成する #10 - 完成

前回の記事はこちら ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成していました。 最低限の機能は、実装できたかな?というところまで来たので、今回で一旦完成ということにします。 後からリ…

【JavaScript】Ionicで架空のECアプリを作成する #9 - スワイプするとボタンが表示されるリスト

前回の記事はこちら ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成していきます。 第9回目である今回は、ショッピングカート画面のリストを、スライドすると削除ボタンが表示されるリストに変…

【JavaScript】Ionicで架空のECアプリを作成する #8 - ヘッダーにボタンをつける

前回の記事はこちら ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成します。 第8回目である今回は、ショッピングカート画面のヘッダーに「空にする」ボタンをつけます デモ こちらのURLで、完成…

【JavaScript】Ionicで架空のECアプリを作成する #7 - 同じ商品を買った場合は、まとめて表示したい

前回の記事はこちら ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成する。 第7回目である今回は、同じ商品を二つ買った場合でも、まとめて表示されない問題について解決します。 デモ こちらのU…

【JavaScript】Ionicで架空のECアプリを作成する #6 - タブバーのアイコンにバッジをつける

前回の記事はこちら ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成する。 第6回目である今回は、カートアイコンにショッピングカート内の商品数を表示するバッジをつけるところまで デモ こち…

【JavaScript】Ionicで架空のECアプリを作成する #5 - カート画面を作る(後編)

前回の記事はこちら ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成する。 第5回目である今回は、カート画面を作成するところまで デモ こちらのURLで、完成版のアプリを実際に操作することがで…

【JavaScript】Ionicで架空のECアプリを作成する #4 - カート画面を作る(前編)

前回の記事はこちら ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成する。 第4回目である今回は、ショッピングカートに商品を追加する処理の実装まで デモ こちらのURLで、完成版のアプリを実際…

【JavaScript】Ionicで架空のECアプリを作成する #3 - 商品詳細画面を作る

前回の記事はこちら ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成する。 第3回目である今回は、商品詳細画面を作成するところまで デモ こちらのURLで、完成版のアプリを実際に操作することが…

【JavaScript】Ionicで架空のECアプリを作成する #2 - 商品リスト画面を作る

今回作成する画面 前回の記事はこちら ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成する。 第2回目である今回は、商品リスト(ホーム)画面を作成するところまで デモ こちらのURLで、完成版…

【JavaScript】Ionicで架空のECアプリを作成する #1 - 商品データを作る

ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成する。 第1回目である今回は、商品(洋服)データを作成するところまで デモ こちらのURLで、完成版のアプリを実際に操作することができます http…

仮想通貨取引所のAPIを使ってみる #3 - Private API にアクセスする

前回記事はこちら 仮想通貨取引所のbitFlyerのHTTP Private APIにアクセスして、自分の資産残高を取得する。 バージョン情報 今回アクセスするAPIは認証が必要 Private APIの認証 下準備 コード 動作確認 参考サイト バージョン情報 JavaScriptのフレームワ…

Angular Materialでログインフォームを作る

Angular Materialを使って、ログイン用のフォームを作ります Angular Materialのインストールから解説している記事はこちら バージョン情報 テンプレート駆動型とモデル駆動型 NgModuleの設定 index.htmlにアイコンのCDNを追加 ログインフォームを作る 参考…

仮想通貨取引所のAPIを使ってみる #2 - 各種取引所のBTC価格を取得する

前回記事はこちら 国内仮想通貨取引所5種(bitFlyer、Coincheck、Zaif、bitbank、QUOINEX)のWeb APIにアクセスして、現在のビットコイン価格を表示するアプリケーションを作成しました。 バージョン情報 実装 アプリケーション概要 bitFlyer APIの呼び出し …

Prettierのフォーマットルールを変更する

Prettier自体の導入方法については、前回記事参照 はじめに Prettierのフォーマットルールを変更したい。具体的には、(デフォルトの)ダブルクオート使用から、シングルクオート使用にしたい。 Prettierのルール変更方法 設定ファイルを作成する。設定ファ…

VSCodeにPrettierを入れる

Visual Studio Codeに、Prettierを導入します。 バージョン情報 Visual Studio Code: 1.21.1 Prettierとは JavaScript / TypeScript / CSS を整形してくれるコードフォーマッタです。詳しくはこちら Prettierのインストール まずPrettierをインストールしま…

npmパッケージを最新バージョンに更新する

package.jsonに定義しているライブラリのバージョンを最新にするnpm-check-updatesの使い方について。 バージョン情報 npm-check-updates: 2.14.1 Node: 8.1.4 npm-check-updatesの使い方 npm install -g npm-check-updates # このコマンドを実行すると、更…

TypeScriptで遭遇したエラー: プロパティ 'style' は型 'Element' に存在しません。

遭遇したエラーと対処法について エラー内容 Type 'HTMLCollectionOf<Element>' is not an array type or a string type. (プロパティ 'style' は型 'Element' に存在しません。) エラーの出たコード 複数のDOM要素を取得した後に、ループを回してスタイルプロパティ</element>…

Angular + Reduxでストップウォッチを作る

はじめに Angular + Reduxでストップウオッチを作りました デモ https://l08084.github.io/ng-stopwatch/ ソースコード github.com 実装 開発環境 Angular: 5.2.3 angular-redux/store: 7.1.0 OS: darwin x64 Node: 8.1.4 概要 angular-redux/storeを使ったR…

RxJS: Observable.intervalの止め方

はじめに 一定間隔で繰り返したい時におなじみのsetIntervalをRxJSでかくとObservable.intervalになりますが、 setIntervalに対するclearIntervalのようにObservable.intervalを止めたい時は何を使えばいいんだろうか 開発環境 Angular: 5.2.3 rxjs: 5.5.6 T…

Angular + Reduxを学ぶ #1 - selectとdispatchデコレータを使う

はじめに Reactではなく、AngularからReduxに入門するのは茨の道かと思いますが、やっていきます。 今回はReduxを1サイクル回して、配列を更新してコンポーネントで値を取得するところまでやりました。 開発環境 Angular: 5.2.3 angular-redux/store: 7.1.0 …

TypeScript(Angular)で定数クラス

はじめに 開発環境 定数をまとめて定義する方法 案1 定数定義だけ書いたファイルを作成する メリット・デメリット 案2 class定義 + readonlyアクセス修飾子 メリット・デメリット 参考サイト はじめに TypeScriptを使って、Javaでいうところの定数クラスを作…

Angularでテトリスを作った

はじめに 操作方法: 開発環境 このテトリスについて Angular感のあるところ Angularによるcanvas参照 Angularによるキーボードイベント取得 初めてのGithub Pages 参考サイト はじめに Angular5を使ってテトリスを作成しました。のGitHub Pagesで実際に遊べ…