非同期通信のエラーハンドリングのあれこれ
シングルページアプリケーションを組んでいると、大量の非同期通信が必要になる。 そして、その非同期通信ごとにSuccess/Errorが存在する。
Successだけ対応していれば楽だけど、ユーザーのためにもエラーハンドリングは必須だ。
大きく分けてエラーは以下の3つ。
- 通信に失敗した(404含む)
- リクエストパラメータが間違っている
- 権限がない
それぞれどんなエラーを出すべきか。
通信に失敗した場合
だいたいサーバ側で何か不都合が起きている場合に発生する。
「○○に失敗しました。時間をおいて再度お試しください。」
あたりが妥当か?
このパターンは基本的にはサーバ側の問題が解決しないと復活しないので、ユーザーが何度試みようと失敗するものは失敗する。
しかし、ユーザーからすると自分の入力が悪いのか、はたまたシステムがバグっているのかの判断がつかない。
よってこのパターンでは、メッセージを出すより、システムエラー用のページにリダイレクトしてあげた方が親切かもしれない。
リクエストパラメータが間違っている場合
ユーザーが入力した要素に何らかの不備がある場合に発生する。
「○○を入力してください」
「○○は半角英数で入力してください」
「不正な文字が含まれています」
などを表示させてあげれば良い。
出来る限り、入力したいどの項目のどこが間違っていたのかを詳細に提示してあげた方が親切。
その分、バリデーションチェック側の手間もかかるけど。
権限がない場合
該当のAPIを叩く権限をユーザーが持っていない場合に発生する。
権限がないのであれば、そもそもボタンを押される前に防ぐべき。
画面側で権限をチェックして、ボタンをdisabledにするか、そもそも非表示にしておけばAPIを叩かれることはない。
画面経由以外で直接叩かれてしまった場合や、デベロッパーツールでdisabledを解除してクリックされた場合ももちろん想定しなくてはならない。
この場合は基本的にユーザーに悪意があるパターンが多いので、一律権限エラーページにリダイレクトさせてしまえば問題ないと思う。
画面内にエラー文言を表示するのかリダイレクトするのか問題
できれば画面内にエラー表示してあげたほうが親切であるとは思う。
特にPOST、PUT、DELETEにおいて、何らかのエラーがあったタイミングでエラーページにリダイレクトされたらイラっとするだろう。
GFTはどうだろうか?
何らかの事由により、データが取得できなかった時、 「データの取得に失敗しました。〈もう一度読み込む〉」 と表示するのが確かに親切かもしれない。
ただおそらくこのパターンは前節でも述べた通り、サーバ側の不具合である可能性が高い。
よって〈もう一度読み込む〉リンクを押下しても再び失敗する可能性が高い。
であれば、システムエラーのページにリダイレクトさせる方が親切だろう。
つまり、CRUD操作関係なしに、最初にあげた以下の3つのエラーに応じてハンドリングするのが良さそうだ。
- 通信に失敗した → リダイレクト
- リクエストパラメータが間違っている → 画面内にエラー表示
- 権限がない → リダイレクト
結局当たり前のような結論になってしまったが、色々自分の中で整理できたので良しとする。
来月公開のES2016の機能とその先について
ES2015がだいぶ浸透してきたと思ったら、今度はES2016の公開が目前に迫っています。
- ES2015(済)
- ES2016(2016年6月)
- ES2017(2017年6月)
ECMAScriptはご存知の通り、一年ごとに策定されることになりました。
各仕様の策定具合は4つのstageで表されています。(Strowmanは省略)
- proposal
- draft
- candidate
- finished
毎年の策定時点でStage4に到達していたものがその年のECMAScriptとして入ってきます。
このあたりは@azuさんのスライドが分かりやすいです。
TC39 Process: Stage · ECMAScriptとは何か?
ES2016に含まれる機能はすでに決定しており、以下の2つとなっています。
- Exponentiation Operator
- Array.prototype.includes
また、現時点(2016/06/10)では新たに以下の2つがStage4に達しています。
これらはES2017入りが決定しています。
- Object.entries
- Object.values
それぞれどんな機能なのか
Exponentiation Operator(ES2016)
xのn乗を計算するための式です。
3 ** 3 // same as 3 * 3 * 3 // 27 let x = 3; x **= 3; // 27
Array.prototype.includes(ES2016)
配列内に特定の要素があるかどうかをチェックします。
今までのarray.indexOf(x) > -1
のようにチェックしなくてはならなかった気持ち悪さから解放されます。
['hoge', 'piyo', 'fuga'].includes('piyo') // true
Object.entries(ES2017)
列挙可能なkeyとvalueの組み合わせであるObjectを二次元配列に変換します。
Object.entries({a : 1, b : 2, c : 3}) // [['a', 1], ['b', 2], ['c', 3]]
Object.values(ES2017)
Objectからvalueを抜き出し、配列にします。
Object.values({a : 1, b : 2, c : 3}) // [1, 2, 3]
これでlodash等を使わずともサクッとvalueを抜き出すことが可能になります。
その他機能の進捗状況
下記ページから確認できます。 github.com
服のセンスとデザインセンス
ずっと気になっていることがある。
- 色の組み合わせ
- 形の組み合わせ
結論
子供が産まれてからの立ち回り方
今、自分は28歳。
- 子供が産まれるまでが人生の第一部
- 子供が産まれてから、その子供が旅立つまでが第二部
- それ以降が第三部
人生の第一部が終わろうとしている。
— シベ (@shibe97) July 27, 2015
何を取り、何を捨てるか
難しいところ。
子供が産まれる前はWeb界隈の勉強会によく行っていたが、勉強会は主に夜実施されるのでなかなか参加が難しくなった。
闇雲に参加するのでなく、行く価値がありそうなものを選ぶようになった。
突発的な飲み会だったり、スノボ旅行とかバーベキュー等の休日行われるイベント系もほとんど行かなくなった。(子供が大きくなったら一緒に参加したい)
会社での仕事
早めのアラート
まとめ
- 取捨選択
- 周りの理解を得ること
- 周りの助けを得ること
付加疑問文について考えてみた
英語を喋ろうと思った時に、最初に立ち憚る壁は、英語と日本語の語順の違いだと思う。
- Don't you〜
- Should I〜
- Do I have to〜
- 肯定文で始めた時は、否定疑問+主語を付け足す
- 否定文で始めた時は、疑問+主語を付け足す
伝えたいことを伝えるための構成力
普段、基本的にパソコンに向かってプログラミングしていることがほとんどで、文章を書くという機会が極端に減った気がする。
破綻しにくい構成
- まず何を一番伝えたいかを考える
- そのためにはどんな具体例を上げていけば良いか考える
- 話したい色々なトピックを列挙する
- それらをまとめて、何が結局伝えたいかを考える
DMM英会話を半年続けてみた所感
意外とDMM英会話を始めてからもうすぐ半年経ちそうなので、ここまでのことについてまとめてみる。
何か変化があったか
- 単語の勉強
- 長文読解
英語がちょっと好きになった
スピーキングから始まる正のループ
どんな感じでレッスンを受けていたか
- 4,950円/月
- 1日1回まで
- 1回25分
講師陣の質
これに関しては、やはり色んな人がいる。
ひとつ言えるのは、アメリカ人とかイギリス人はほぼいない。(まだ見たことない)
フィリピン、セルビアあたりが多い。
ただ、フィリピン人でもセルビア人でも発音が綺麗な人はいくらでもいる。
なので、もはや国籍はあまり関係ないと思う。
性格もそれぞれで、すごいテンション高くて常に面白い先生もいれば、聞き上手で、言葉に詰まってもじっと待ってくれる先生もいる。
人によって合う合わないはあると思うけど、基本的に自分が良いなと思った先生は皆良いと思っていて、人気が高いことが多い。
お気に入りの先生を5人くらい見つけて、自分のスケジュールにある人をその都度予約する感じが良いと思う。
最初は、お気に入り登録数が極端に高い先生を選んでおけば、まず間違いないと思う。
講師陣は皆現地に住んでいるので、なかなかスケジュール的に合わないことも多いけど、5人くらいお気に入りの先生がいると、誰かは予約が取れる。
教材
DMM英会話ではWeb上にオンライン教材を用意してくれていて、その教材を見ながらお互いスカイプで会話する。
自分はだいたいデイリーニュース初級編を利用している。
語彙の確認 → 本文の音読 → 質問 → ディスカッション
という流れ。
本文の音読は、発音を真似したいので、先生の後に一文ずつ追っかけて読むようにしている。(Repeat after me. というやつ)
基本的にはディスカッションに多く時間を費やしたい。
英会話を始めたきっかけ
サンフランシスコで行われるWeb系のカンファレンスに参加したかったというのが大きな理由。
自分の勤めている企業では、海外主張のためのTOEICボーダーが設けられており、TOEICの点を上げる必要と、現地で喋るための能力が必要だと思っていた。
DMM英会話はまさに「現地で喋るための能力」を身に付けるために始めた。
そして何やかんやTOEICの点も上がり、めでたく先月、サンフランシスコ出張に行ってきた。
自分の英語がちゃんと現地でも通じるということが分かり、嬉しかった。
海外出張に行ったことで目的を果たしてしまったが、DMM英会話はまだ続けている。
英語はやっておいて損することはまずないし、確実に今後必要になってくるからだ。
学んだことを活かせる機会を増やし、モチベーションを維持しつつ続けていきたい。