デロイト トーマツ ウェブサービス株式会社（DWS）公式ブログ
DWSメンバーが、最新の技術トピックや働き方について発信しています。
ビジュアルリグレッションテストとは ビジュアルリグレッションテストとは、アプリケーションのスクリーンショット画像の差分をチェックすることで予期せぬ画面の崩れなどを検知することを目的としたテストのことです。基本的にはmainやdevelopなどの開発ブランチとfeatureやbugfixなどの各種機能開発/バグ修正ブランチの差分をチェックする運用になることが多いのではないでしょうか。 似たようなテス […]
はじめに 今回をNuxt.jsを利用したフロントエンドにWebSocketを導入してみた内容を共有させていただきます。 Nuxt.jsとは Nuxt.jsはVue.jsなどをベースにしたJavascriptフレームワークの一種です。 Nuxt.jsにはVue.jsの機能に加えて、サーバーサイドレンダリング、Vue RouterによるルーティングやVuexによる状態管理など、すぐに開発着手できる開発 […]
社内で「技術情報キャッチアップ会」を始めました。 AWSの最新情報キャッチアップ会 AWSのアップデートの情報のキャッチアップ会については、これまでも月に一度のペースで行っていました。 オンライン通話で、AWS の最新情報 – クラウドイノベーション & ニュースを見ながら、直近1ヶ月のアップデートの情報を確認しつつ、 「この機能ができるようになったら、何が嬉しいの？」「この機能はあのお客 […]
土居です。新型コロナウイルスによる昨今の事情もあって、元々あまり外出しない方であった性質にさらに拍車が掛かっています。そこに赤ちゃんのお世話であまり手元が空かないことも加って、映像作品やテレビの視聴をすることが増えました。ドラマとかあんまり観なかったけど、けっこう面白いな。。。（いまさら）と思いながらのんびり過ごしています。 Gatsbyでソーシャルボタンを追加する 各種公式 (FaceBookは […]
こんにちは、土居です。赤ちゃんがどんどん重くなってきて、しばらく抱っこしているとかなりズッシリきますが、その分成長を実感しています。 Hooks ReactのHooks機能が16.8.0より正式版になりましたが 、実はまだ使ったことなかったのでちょっと触ってみました。Hooksを使えば、classを書くことなくstateを用いることができるようです。 Hooksとは? class componen […]
こんにちは。土居です。この度、弊社コーポレートサイトをリニューアルいたしました。 クラウド入門記事や事例紹介などなど、大きく刷新・コンテンツを充実させておりますので是非ご覧ください。 今回、構築はGatsby.js(Reactベースのフレームワーク)を使用したのですが、その際に環境変数の扱いで少しハマってしまったのでご紹介したいと思います。 デプロイ環境ごとの.envファイルの利用 弊社ではCir […]
概要 JavaScriptが多くの言語と異なる点のひとつに、イベントループベースの同時実行モデルがあります。これは、JavaScript自体というよりも、ブラウザの仕組みにも関わりがあります。 今回はそれについて書いてみようと思います。 目次 概要 ラインタイム ヒープ スタック キュー イベントループ 応用例 まとめ 参考 ラインタイム MDNの図を拝借すると、JavaScriptのラインタイム […]
JavaScriptを使って、ブラウザ上で、p12ファイルからpemの書式で証明書と秘密鍵を取得してみます。 forgeの使用 以下、forgeというライブラリを使って実装してゆきます。ブラウザで読み込むには、以下のようにminファイルを読み込む必要があります。 const forge = require('node-forge/dist/forge.min.js'); p12ファ […]
こんにちは。土居です。1年はあっという間でして、私の今年最後のブログ投稿になります。今回は、現在開発中のシステムの検証において、ブラウザによる差異が見つかった中からいくつかご紹介したいと思います。 IE, Edge inputタグのtype="number"のスピン（増減ボタン）が表示されない Chromeでは以下のようなスピンが表示されますが、numberが対応しておらず、t […]
現在、新規プロジェクトで、Nuxt.js+TypeScriptを使ったSPAの開発を行っています。この記事では、そういったケースにおいての、Nuxt.jsアプリケーションでのテストに対する考え方と、その方法を紹介します。 TL;DR ユニットテスト/結合テスト=>Jest UIテスト=>Storybookをベースに、Jestで足りない部分を補う プロジェクトの技術スタック Nuxt.j […]
