はじめに 現場でコードを書いていると、以前学習したことをすっかり忘れており時間をロスしてしまうことがあったりする。 案件が終わったタイミングでその都度備忘とTipsを纏められたら良いのだが、業務内にその時間の確保するのがけっこう難しくて今年もそ…
Vuexでストアを管理していると、アプリケーションが大きくなるにつれてストアが肥大化し、見通しが悪くなる問題が起こります。 それを回避するためにストアを分割できるようになっています。例えばアプリケーションの機能ごとやページごとにストアを分割して…
前回、Vuexのミューテーションについて説明しましたがミューテーションは以下のルールがあります。 ミューテーションハンドラ関数は同期的でなければならない つまりミューテーションでできるのは同期処理のみで、非同期処理はできません。そのため実際に使…
ミューテーションはVuexのストアの状態を変更したいときに使うもので、分かりやすくいうとハンドラに近いものです。 使い方と特徴がいくつかあるので以下にまとめます。 ミューテーションはタイプとハンドラを持っています ハンドラみたいなものなので直接使…
Vue.jsには算出プロパティがありますが、Vuexではそれと同じことをgettersを用いて行います。 設定方法は以下のようにgettersの中に好きなgetterを追加していきます。 state: { hoge: 10 } getters: { aaa: aaa(state) { return state.hoge } } getterは必ず…
Vue.jsを使用するときに、アプリケーションの状態を管理するためにVuexを使うことがほぼだと思いますので、これから何回かに渡ってVuexについての基本的な使い方をまとめようと思います。 今回はVuexについて少し触れて、あとはステートについてまとめようと…
前回の配列操作でよく使うメソッドまとめ04つづき。 今回も前回までと同じJSONデータを使ってfindの使い方についてまとめます。 JSONデータの中身は配列操作でよく使うメソッドまとめ01のページ下部に載っています。 findを使えば引数で与えた関数に一致する…
前回の配列操作でよく使うメソッドまとめ03つづき。 今回も前回までと同じJSONデータを使ってObject.assignの使い方についてまとめます。 JSONデータの中身は配列操作でよく使うメソッドまとめ01のページ下部に載っています。 Object.assignを使えば簡単に対…
前回の配列操作でよく使うメソッドまとめ02つづき。 今回も前回までと同じJSONデータを使ってfilterの使い方についてまとめます。 JSONデータの中身は配列操作でよく使うメソッドまとめ01のページ下部に載っています。 各チームのUS出身の選手のみ取り出す i…
前回の配列操作でよく使うメソッドまとめ01つづき。 今回は前回のJSONデータを使ってsortの使い方についてまとめます。 JSONデータの中身は前回のページ下部に記載しています。 各チームの選手を年齢順にソート import data from '../EasternConference.json…
仕事で配列を扱うことが多くなったので配列の操作方法をまとめました。 現場ではAPIで取得したデータをフロント側で扱いやすいようにJSONにパースしたり加工することが多いと思うので、今回は基本的な計算処理についてまとめます。 今回は実際にNBAの複数の…
今までよくわかっていなかったHTTP通信周りの知識を得るためにこちらの本を読みました。 初版が2010年なのでほんの一部だけ古い内容などもありますが、全体を通してすごく面白くて一気読みできましたし、とても勉強になりました。 よくわからないところは流…
仕事でNode.jsを使うことになって非同期処理でPromiseやasync/awaitをよく使うので今回はPromiseについてまとめました。 async/awaitについては別の機会にまとめようと思います。 Promiseの特徴は4つあります。 Promiseオブジェクトは3つの状態を持っている…
復習しながら自分用にmdでメモってましたがせっかくなので備忘録としてこちらに残します。 2018.11月からB2BのSaaSに転職したことでNode.jsを書く機会があるのでNodeの学習を再開しました。 前に学習していたときから時間が空いて色々忘れている部分も多かっ…
Vueの学習のために書籍管理画面っぽいものを作ってみました。 書籍リストを読む処理にaxiosを使いましたがcodepen上はaxiosを使用しないソースになっています。 axiosを使用したソースはページ下部に載せておきます。 ちなみに書籍リストは以下のユニークなi…
先週末にサポーターズさん主催の【まつもとゆきひろ氏 特別講演】20代エンジニアのためのプログラマー勉強法 に参加してきました！ これまで技術的なことしか書けていなかったのですが、とても学びが深い講演会だったので初めて雑記的にまとめを書いてみよう…
前回は絞り込み機能を実装したので今回はそれにソート機能を実装していきます。 前回：Vueで絞り込みとソート機能を実装してみた01 今回やること * 降順と昇順を任意に表示切替できるようにする ソートするにはcomputedのmatchedの返り値の配列を受け取って…
Vueのcomputedとmethodsの違いがいまいち分からなかったので、computedを使って絞り込みとソート機能を実装してみます。 今回やること * 商品のリストから自由に値段と絞り込み件数を指定して画面に表示する 次回やること * 降順と昇順を任意に表示切替でき…
昨年あたりにテレビとスマホの連動企画が流行って色々な施策が世に登場しましたが、その中のひとつに、CMやドラマの役者が持っているスマホの電話番号が画面に映り込み、その番号に電話すると実際に役者が電話に出てくれるっていう施策がありました。 これは…
この前実際に仕事でVue.jsを使う機会があったので、実践編としてその使い方を残しておきます。 使いどころとしては複数のモーダルがあってモーダル表示でyoutubeを自動再生されるものです。 Gulpタスクはビルドするだけのシンプルなものにしました。 ディレ…
今回は音声をローカルファイルに書き込まず、リアルタイムで音声認識させてconsoleに出す処理を書いていきます。 Cloud Speech API + node.jsで音声認識をさせてみる1 Cloud Speech API + node.jsで音声認識をさせてみる2 今回はリアルタイムで認識させるの…
続き書きます！ 前回、音声ファイルの取り込みには成功したので、次にこの音声をテキストに変換する記述を追記していきます。 まず以下でGoogle cloud client libraryをインポートして、クライアントを作成します。 const speech = require('@google-cloud/s…
前回、前々回とNode.js+Express+Azureでチャットアプリを作成しました。 これからルーム機能やログイン機能を付けていったら面白そうだなと思っているのですが、一番面白そうだなと思ったのが音声入力だったので、そちらから始めてみることにしました。 前回…
それでは前回の続きで、サーバ側とクライアント側の通信時の処理を書いていきます。 サーバ側 まずポートを指定します。 ポートはアプリを実行する環境によって異なるので以下の形にする。 process.envは環境変数。process.env.PORTはユーザー環境のポート番…
socket.ioとAzureの使い方を勉強したくて簡単なチャットアプリを作りました。 とはいえ全く知識ないのでとりあえずsocket.ioのGet-startedを利用しました。 自分がわかりやすいように元々のソースを少し触っています。 長くなりそうなので2回に分けて説明し…
Microsoft Azureの無料アカウント作成方法 Node.jsで作成したアプリをデプロイするためにAzureのアカウントを作成しました。 Azureの使い方はこれからいろいろ調べたいですがとりあえず作成→デプロイがうまくいったので手順まとめておきます。 Azureを始める…
はじめてのvue 仕事でvueを使うことになったので遅ればせながらvueを勉強し始めました！ 仕事で使うからにはしっかり覚えたい！ということで、ここでは勉強したことをアウトプットして脳みそに定着させることを目標にしています。 とはいえNode.jsのほうも勉…
Node.jsのストリームAPIについて Nodeの勉強をしてストリームAPIを扱う処理がよくわからなかったので調べました。今日はストリームAPIについて書こうと思います。 Node.jsには大きいデータを扱うとき、ストリームAPIを利用することでメモリの消費を抑えるこ…
Node.jsの標準モジュールquerystringについて Node.jsを勉強する中で理解が追い付かないところがあったので整理してみたいと思います。 querystringの使い方 querystringはクエリ文字列をオブジェクト形式に変換してくれるNode.jsの標準モジュールの一つです…
Node.jsでファイルを読む 今回はNode.jsで自分が指定したファイルを読み込む方法について書くよ！ 手順としてはファイルを読み込むために必要なfs関数を使います。 fsはファイルを操作するために用意されているモジュールです。 var http = require('http');…
