中安拓也のブログ

プログラミングについて書くブログ

JavaScript

【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のフレームワ…

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

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

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…