l08084のブログ

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

JavaScript

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…

【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…

GitHubから通知が来た:依存関係の1つに潜在的なセキュリティ脆弱性があります

GitHubの通知欄にめずらしく(本当に)通知が来ていた。 Potential security vulnerability found in the ssri dependency 実際の通知画面はこんな感じ 通知をクリックして詳細を見ると、「./package-lock.jsonで定義されている依存関係には既知のセキュリテ…

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

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

npmパッケージのバージョンを固定する

npmパッケージのバージョンを固定して、動作に変化がないようにしたい。 バージョン情報 バージョン固定の手順 初めからキャレット^記号がつかないようにしたい 参考サイト バージョン情報 Node: 8.1.4 npm: 5.6.0 macOS High Sierra: 10.13.4 バージョン固…

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

Prettier自体の導入方法については、前回記事参照 はじめに 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(Angular)で定数クラス

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

Angularでテトリスを作った

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

TypeScriptエラー「error TS2345: Argument of type '{}' is not assignable to parameter of type 'KeyboardEvent'. Property 'altKey' is missing in type '{}'.」

はじめに 開発環境 エラーが発生した時のコード エラーを修正した後のコード はじめに Angularでキーボードの→↓←↑とかspaceキーを押した時のイベントを検知するコードを書いていたら発生したエラーとなります。 発生したエラー ERROR in src/app/app.compone…

TypeScriptで「ERROR TypeError: XXX is not a function」が頻発する

はじめに TypeScriptでコードを書いていた所、呼び出し先の関数を定義しているのに、 「XXX is not a function」が発生する事象に苦しんだため、対応方法について記述する。 ERROR TypeError: this.isMobile is not a function at AppComponent.tick (app.co…

TypeScriptでcanvas要素を扱っていたら発生したエラー: 型に呼び出しシグネチャがない式を呼び出すことはできません

はじめに 開発環境 発生したエラーについて エラー原因 参考にしたサイト はじめに Angular + TypeScriptでcanvasの処理を書いていたら、下記のエラーが発生しました(3つとも同様のエラー)。 ERROR in src/app/app.component.ts(159,7): error TS2349: Canno…

VSCodeでJavaScriptのドキュメンテーションコメント(JSDoc)を自動生成する

はじめに Visual Studio Codeを使用してJSDocコメントを自動生成する方法について書きます。 JSDoc自動生成方法 Document Thisのインストール VSCodeの拡張機能ボタンをクリックした後、Document Thisをインストールする。 なお、Document ThisはJavaScript…

forEachループの途中で要素を削除した場合のメモ

はじめに forEachでループを回している配列の要素をループの途中で削除した時に、(あくまで自分からみるとの話です)よくわからない挙動をしたので備忘録目的でまとめました。 developer.mozilla.org ループの途中で要素を削除した場合についての、MDNのサイ…

少し変わった(?)配列の参照方法

return ['pig', 'fox', 'bird', 'fish', 'mouse'][3]; // fish 上記の文を見たとき一瞬意味がわからなかったんですが、単純に定義した配列に添字の3を指定して値を呼び出しているだけですね。 かっこいい書き方だと思ったので、今後自分のコードにも積極的に…

parseIntとparseFloatは数字以外の情報を全て無視するって知らなかった

知りませんでした。まあ、初めの文字が数値以外だった場合は、NaNになってしまうんですが。 const weight = '60kg'; const height = '172.5cm'; console.log(parseInt(weight, 10)); // 60 console.log(parseFloat(height, 10)); // 172.5

なんて検索していいかわからなかったJavaScriptの記法メモ

はじめに JavaScriptのコードを見ていて、この書き方どういう意味かわからないけど、なんてキーワードで検索していいかわからない…みたいなことがあったので、検索しづらいと思ったイディオムをまとめた。 検索に困った文法 ショートサーキット a || bでaが…