Visual Studio Code
Visual Studio CodeでJSON形式のファイルを整形する
奥山
公式サイト 東京都が公開している新型コロナウイルス対策サイト
東京都が新型コロナウイルスの対策サイトを公開しています。こちらのサイトは、Githubで公開されており、貢献することが可能です。東京都 新型コロナウイルス対策サイト(Github)東京都 新型コロナウイルス対策サイト行動規範に以下の記載があ...
Amplify AWS Amplify Storageのアクセスレベルprotectedを使用してみようと思ったが
AWS Amplify Storageのアクセスレベルprotectedを実装しようと思いましたが、他ユーザのcognito identity id取得方法が提供されていないようです。今回は調べた内容の情報共有です。前回の記事でAWS Am...
DB2 node.jsでdb2に接続
node.jsでdb2に接続node.jsからIBMのDB2にアクセスしてみます。環境 項目 バージョン node v10.15.3 npm 6.4.1 ibm_db 2.5.2installnode.jsでDB2にアクセスするには、ibm...
Amplify AWS Amplifyを使って静的ファイルを扱う
AWS AmplifyのStorageを利用して静的ファイルを扱います。Authenticationを利用した認証については、以下を参照してください。1.AWS Amplifyを使ってサインインを実装する-12.AWS Amplifyを使っ...
Mac [Mac]ランチャーアプリのAlfredを紹介
Macで使用しているランチャーアプリAlfredを紹介します。インストールAppStoreからインストール可能ですが、バージョンが古いのでサイトからDLしてインストールするのがいいと思います。Alfred※使用しているバージョンは4.0.2...
vue.js [vue.js] fileアップロード用のdrag&dropエリアを持つコンポーネントを作成する
vue.jsでdrag&dropを使用したアップロード用コンポーネントを作っていきます。環境等 項目 バージョン node v10.15.3 npm 6.4.1 vue.js 2.6.10実装drag&dropエリアエリアの作成divタグで...
Amplify AWS Amplifyを使ってサインインを実装する-4
今回はサインインエラーの対応を記載します。合わせてパスワードを忘れた際のページを作成しています。Multi-Factor Authentication (MFA)は扱いません。前回のAWS Amplifyを使ってサインインを実装する-3 に...
Amplify AWS Amplifyを使ってサインインを実装する-3
Authenticationを利用してサインアウトを実装していきます。前回のAWS Amplifyを使ってサインインを実装する-2 に追加していきます。環境等 項目 バージョン node v10.15.3 npm 6.4.1 @aws-am...
Amplify AWS Amplifyを使ってサインインを実装する-2
Authenticationを利用してサインアップを実装していきます。前回のAWS Amplifyを使ってサインインを実装する-1 に追加していきます。環境等 項目 バージョン node v10.15.3 npm 6.4.1 @aws-am...
Amplify AWS Amplifyを使ってサインインを実装する-1
Authenticationを利用してサインインを実装していきます。遅くなりましたが、Amplifyで以下のことが可能です。AWS Black Belt Online Seminar AWS AmplifyよりAnalysticsユーザのセ...
GitHub Gistの使い方
GistはGithubのサービスでコードやメモ、スニペットを共有するサービスです。前提Githubにサインインしていることが前提です。アカウントが無ければ、Githubへの登録と公開鍵の登録を参考に作成してください。Gistに公開右上の +...
Amplify AWS Amplifyを使用する準備
AWS Amplifyを使ってアプリを作成するためにAWS Amplify Cliを設定します。環境 項目 バージョン node v10.15.3 npm 6.4.1 @aws-amplify/cli 1.6.11前提Amplify CLI...
GitHub Githubにリポジトリを作成
Github にリポジトリを作成して、pushするところまでを書いていきます。前提Gitがインストールされている。gitでユーザ名とメールアドレスを登録する のグローバルで登録が済んでいる。Githubへの登録と公開鍵の登録 に記載の内容が...
GitHub Githubへの登録と公開鍵の登録
Github を使うために、アカウントの作成と公開鍵の登録を行います。Github Sign upSign upリンクにアクセスして、アカウントを作成します。ページに従います。登録が完了すると、登録に使用したメールアドレスに、Githubか...
GitHub gitでユーザとメールアドレスを設定
gitのcommit時にAuthorとCommitterに利用されるユーザ名とメールアドレスの設定方法を記載します。グローバル設定以下のコマンドでユーザ名とメールアドレスを設定します。git config --global user.nam...
JavaScript ag-gridのLoadingオーバーレイをカスタマイズ。
ag-gridのLoadingオーバーレイをカスタマイズ。ag-gridのデフォルトはLoadingと文字が表示されますが、今回は簡単に簡単なLoadingを実装する。で紹介したepic-spinnersを利用してみます。Loadingオー...
JavaScript ag-gridでソートやフィルタを利用する。
ag-gridでは簡単にソートやフィルタを利用することが可能です。簡単に追加可能ですので、ag-gridの列幅をgrid幅に合わせて表示する。のコードに追加してみましょう。ソートを追加する。enableSortingを指定をtrueに設定す...
JavaScript ag-gridの列表示をCellRendrerを作成して変更する。
ag-gridの列表示をCellRendrerを作成して変更する。ag-gridでは列の表示方法を変更することが可能です。また、vue,react,angularなどを利用して作成することが可能となっています。今回は、vueを使用して作成し...
JavaScript 簡単にLoadingを実装する。
簡単にLoadingを実装する。vue.jsコンポーネントとして提供しているepic-spinnerを使用すると、簡単にかっこいいLoadingを実装できます。epic-spinnerをインストールnpm installするだけです。npm...
JavaScript ag-gridで列を消せるけど邪魔。
ag-gridでヘッダー列をドラッグしてgrid外に移動させると、列を消すことが可能です。しかし、消されたくはないので、消えないようにする方法を記載します。列削除を無効にする。列削除を無効にするには、suppressDragLeaveHid...
JavaScript ag-gridの列幅をgrid幅に合わせて表示する。
前回記事のag-gridで大量データを軽快に表示する。で作成したgridは、各列が左に詰まっており、右に無駄なスペースができます。そこで、今回はgridの幅に合わせて列幅を大きくします。列幅をgridに合わせるGridAPI sizeCol...
JavaScript ag-gridで大量データを軽快に表示する。
ag-gridで大量データを軽快に表示する。ag-gridは高機能なグリッドライブラリで、大量データでも軽快に動作します。(デモ)Vue.js,React,Angularなどに対応しているため、簡単に利用することができます。今回はこのag-...
JavaScript numeral.jsで数値のformat変換
数値のformatを変換するのに便利な、numeral.jsを紹介します。例えば、3桁区切りに変換などは簡単に実装できます。numeral.jsインストールインストールにはnpm installを利用します。npm install --sa...
vue.js vuetifyでマテリアルデザインを導入
マテリアルデザインはGoogleが提唱しているデザインシステムです。今回紹介する、vuetifyはこのマテリアルデザインを利用したVue Component Frameworkです。card/form/date pickerなどが用意されて...
vue.js vue cliでui？
vueではプロジェクトを始めるために、vue cli 3が用意されています。cliとあるようにコマンドなのですが、なんとUIが用意されておりブラウザからプロジェクトを作成したり設定を変更したりすることが可能です。多言語化対応しており、日本語...
node.js WSL(ubuntu)でnを使ってnode.jsをインストール
node.jsのバージョン管理として、nを使用します。環境 項目 バージョン windows 10 Ubuntu 16.04.5 LTS n 2.1.12nインストールn(github)をインストールします。手順node.js,npmをイン...
Visual Studio Code WSLをVSCodeで使う
WSLをVSCodeで使うWindows Subsystem for LinuxをVSCodeで使いたかったので、使い方を記載します。環境 項目 バージョン windows 10 Ubuntu 16.04.5 LTS VSCode 1.25...
chocolatey chocolateyでパッケージ管理
chocolateyはWindowsで利用できるパッケージ管理ツールです。install/upgrade/uninstallなど簡単にできるようになります。インストーラを起動して承諾とかだるい。プロジェクトで使うツールをまとめて管理したいな...
vue.js Storybookでコンポーネントカタログを作る
Storybookを利用することで、プロジェクトで作成したコンポーネントのカタログを作ることができます。どういうコンポーネントかも視覚的にわかりドキュメントとしていいものになると思います。今回は、vue.jsでStorybookを利用してみ...
JavaScript [vue.js]単一ファイルコンポーネントでコンポーネントを定義
vue.jsではコンポーネントを定義する方法として、単一ファイルコンポーネントがあります。これは、1コンポーネントを1ファイルで管理することができる物となります。このファイルでは、コンポーネントで使用するHTML,javascript,cs...
JavaScript 日時を扱うmoment.js
moment.jsは日付を扱うライブラリです。フォーマット・差分・演算などの機能があります。環境 項目 バージョン node 9.11.1 moment.js 2.22.1インストールnpm install --save moment読み込...
axios.js HttpClientのAxiosの使い方
HttpClientのAxiosの使い方
TypeScript tslint + prettier を設定
TypeScript の linter の tslint と、Formatter の prettier を組み合わせて使用する方法について記載します。モジュールインストール対象モジュール モジュール バージョン 説明 tslint 5.10...
Visual Studio Code VSCode で VS Live Share を試す
Microsoft がVS Live Shareを public preview で公開しています。VS Live Shareは複数人で1つのコードを編集することが可能となります。今回は、VSCodeでこの機能を使用してみたいと思います。前...
Slack SlackをRSSリーダーにする。
RSSリーダーを使うのだるかったので、SlackをRSSリーダーにしました。やり方を記載します。RSSアプリのインストールSlackにRSSアプリをインストールします。以下にアクセスして、インストールをクリックするだけ。RSSアプリフィード...
node.js npxでローカルパッケージを実行できるんです！
gulpとか使用するとき、install方法として、npm install -g gulpとか書いてますよね。これグローバルにinstallしてるので、グローバルが汚染されて嫌だなと思ってました。ローカルインストールすると、gulpコマンド...
JavaScript util.promisifyでコールバックスタイルからPromiseに変換
node.jsが提供するutil.promisifyの使い方を記載します。※async/awaitの使い方で既に利用しています。util.promisify？コールバックを必要とする関数をPromiseに変換するutilです。制約Promi...
JavaScript vue-cliを使ってvue.jsを使ったプロジェクトの開発環境を整える
vue-cliはvue.jsを使用したプロジェクトの開発環境を作成する公式のツールです。環境 項目 バージョン node.js 8.11.1 vue-cli 2.9.3注意vue.js + typescriptについては記載していません。v...
JavaScript Redux 入門
Redux とはstate(状態)を管理することに特化した、ライブラリです。React.js を利用していると、コンポーネントに state が含まれ状態の管理が複雑になります。Reduxでstateを一元管理し、コンポーネントとstate...
JavaScript React.js入門
React.js とはFacebook が開発した、UI パーツを作成するライブラリです。仮想 DOM という仕組みを採用し、ページの表示をはやくしています。前提node.js がインストールされていること。環境記事作成時の環境を記載してい...