すべてのカテゴリ

Vue 公式チュートリアル　〜　変数の変化をチェックするVue 公式チュートリアルのステップ 10 は、変数の状態が変わるのをチェックする方法です。Javascript の変数を表示に使う場合、変数が変わったら表示も更新したい場合が多くなります。そういう場合のやり方です。前回までのポイントは？Vue の公式チュートリアルもステップ 10 まで来ました。 何となく Vue で、Web ブラウザに表示させるやり方がわかってきたのではないかと思います。 ステップ９までで、基本的な Vue の部品の書き方がわかって、HTML と Javascript、HTML と CSS、CSS と Javascript の連携のやり方も一部は体験しているので、あとは「回数」を増やして実際に使えるようになる様な練習が必要になってきます。今回のポイントは？ステップ１０では、新しいポイントがいくつかあります。まずは、変更前のサンプルコードを見てみましょう！<script>export default {  data() {    return {      todoId: 1,      todoData: null,    };  },  methods: {    async fetchData() {      this.todoData = null;      const res = await fetch(        `h t t p s://jsonplaceholder.typicode.com/todos/${this.todoId}`      );      this

Javascript の非同期処理Javascript を学習していて分かり難い部分に非同期処理があります。 なぜ、こんな処理をするのかプログラムを勉強したての方には分かり難いし、思ったように動かない部分です。 この記事では、その非同期処理に目を向けてみました。非同期処理とは？非同期処理という言葉自体が余り馴染みのない言葉で、よくわからないというのが多くの方の第一印象だと思います。 簡単に言うと、完全に正確な表現ではありませんが、プログラムを書いた順番で実行されない処理と考えると少し分かりやすくなります。非同期の処理に対する言葉は同期処理と言いますが、これは基本的に上から順番に実行される処理です。 もちろん、プログラムには、条件で実行する部分を分けたり、繰り返し処理（ループ）などがあるので、完全に書いた順番で実行されるわけではありませんが、基本的には、処理の流れはプログラムの上から下へと言う流れで、一つ一つの処理が終わってから次の処理をするようにできているプログラミング言語が多くなっています。ところが、Javascript では、処理が終わる前に次の処理を実行してしまうことが多く、この辺りが初心者の方には分かり難い部分になっています。この記事で紹介している、Firebase のデータベースのアクセスなども非同期の処理の代表格です。処理には時間がかかる！非同期の処理を行う一番の理由は、「処理には時間がかかる」からです。 当たり前の様ですが、これが非同期の処理を取り入れている大きな理由です。 特にデータを読み込んだりするのには、時間がかかります。データをどこから読むかと言うと、いろ

FirebaseでSendGridを実装したときの非同期処理の問題例作成した、WebサービスやWebアプリの検証で見つかった非同期処理に関連した問題の具体的な例を紹介します。 Javascript（Typescript）はシングルスレッド（一つの仕事）で実行されるので、時間のかかる処理の待ち時間を有効に使うために、非同期で処理を可能にして、性能の改善をしています。 同期の処理の場合は、プログラムの実行（処理）は基本的にはプログラムで書いた順番で処理されるので問題が起きることは余りありません。しかし、非同期で処理する場合プログラムの記述順序とは違った順番で処理されるので問題を見つけにくい欠点があります。 送付先のリストの処理の不具合 SendGridでは配布先の宛先をリストにまとめて、リストに登録されている人にまとめてメッセージを送ることができます。 実際にSendGridのAPIでリストの情報として取得できるのは、全てのリストのID、名前、登録者数は一つのAPIで取得できますが、リストに登録されているユーザーを取得するには別のAPIを使う必要があります。 リストの情報とそのリストの登録者の情報を一緒に取得しようとすると ＊　リストの一覧を取得 ＊　取得した各リストの登録者を取得 という処理をする必要があります。 axios({     method:"GET",     url: url,     headers:{ Authorization: authHeader} }).then((res:AxiosResponse) => {     const l

ホワイトボックステスト前回紹介したブラックボックステストの対極にあるのがホワイトボックステストです。 ブラックボックステストはプログラムの内部を見ないで行うテストで、入力と出力（処理結果）でテストを行う手法でした。一方で、ホワイトボックステストは、プログラムの中身を中心に行うテストです。 プログラムの中身を中心にテストするため、プログラムの内部構造やフロー（処理の流れ）をよく理解していないとテストが難しいため、多くの場合、プログラムの設計者（コーディングした人）が行います。 基本的なコンセプトは？ ホワイトボックステストの基本的なコンセプトは、プログラムの全ての部分の動作を確認することにあります。 プログラムは条件によって処理方法を変えることが多く、ある条件で処理したときには実際には実行されない部分があるのが普通です。 例えばエラー処理が良い例ですが、エラー処理はエラーが発生した時だけ実行されます。 つまり、正常に処理されるケースのテストではエラー処理はテストされないことになります。ホワイトボックステストでは、意図的にエラーになる条件を作って、エラー処理を実行することでエラー処理が設計通りに動作することを確認します。 着目点は「if-else」や「switch」そして例外処理 ホワイトボックステストでテスト内容を考える場合に着目するポイントは、「if-else」や「switch」などの条件分岐の処理と、例外処理（try-catch）です。 プログラミングに使用するプログラミング言語によっても違いますが、これらの処理の流れを変える書き方は最近のプログラミング言語では

Firebaseのデータベースのアクセスは非同期Firebaseの多くのアクセスはネットワークを介する物が多いので非同期の処理になるものが多くなります。 非同期の処理は慣れないと分かりにくい所もあって最初は苦労する部分です。この記事では、Firebaseのデータベースの非同期処理について少し詳しく解説しています。 Firebase Cloud Firestoreデータベースのアクセスの基本 FirebaseのCloud Firestoreのデータベースの基本は コレクション ドキュメント この２つです。コレクションはドキュメントを入れておく入れ物のようなもので、例えば「address(住所録)」のコレクションを作って、その中に各個人の住所などの情報を入れたドキュメントを格納して行くように使います。 一つ一つのドキュメントのデータはJSON形式のデータになります。 const refAddress =firebase.firestore().collection がコレクションへのリファレンスになります。要はコレクション「address」の場所を示しています。この中にドキュメントが格納されます。 新たにドキュメントを加える場合 const personA = {     address: "XXX県YYY市３丁目3番地",     name:"山田太郎" } firebase.firestore().collection("address").add(personA).then((doc) => {     // 追加に成功     console.log("

先日、freeeは楽天銀行の同期連携を解除することを発表しました。freeeの強みは「口座同期」にあります。利用者の多い楽天銀行との連携が切れてしまうのはユーザーにとって大きな痛手となるので、freee社としても絶対避けたかったはずです。同じERPのマネーフォワードが解除されてないことを考慮すると、両社の間で何か譲れない何かがあったのかもしれません。本当の理由を知りたいところです。さて、今回影響を受けた事業者は、freeeの運用を見直さないといけなくなりまりました。これまでのように「同期」ボタンをポチッと押せば取り込めることはできなくなりました。今後の対応としては、こんなところでしょうか。↓↓↓①都度csvを楽天銀行からfreeeに取り込む②freeeを別のERPに乗り換える③楽天銀行の利用頻度を下げ、他口座で代替するどれにするかは、結局「移行コスト」がいちばん低く済むものですね。私の担当先もかなり影響を受けてるところが多いので、これから運用見直しを進めていきます。現場的には「余計な仕事を増やしてくれたなぁ」というのが率直な意見です^^;