フロントエンド

1/6ページ

storycap+reg-suitを利用したビジュアルリグレッションテストをCodeBuild上で実行する

ビジュアルリグレッションテストとは ビジュアルリグレッションテストとは、アプリケーションのスクリーンショット画像の差分をチェックすることで予期せぬ画面の崩れなどを検知することを目的としたテストのことです。基本的にはmainやdevelopなどの開発ブランチとfeatureやbugfixなどの各種機能開発/バグ修正ブランチの差分をチェックする運用になることが多いのではないでしょうか。 似たようなテス […]

Nuxt.jsでWebSocketを利用したリアルタイム通信

はじめに 今回をNuxt.jsを利用したフロントエンドにWebSocketを導入してみた内容を共有させていただきます。 Nuxt.jsとは Nuxt.jsはVue.jsなどをベースにしたJavascriptフレームワークの一種です。 Nuxt.jsにはVue.jsの機能に加えて、サーバーサイドレンダリング、Vue RouterによるルーティングやVuexによる状態管理など、すぐに開発着手できる開発 […]

技術情報キャッチアップ会を始めました

  • 2020.10.31

社内で「技術情報キャッチアップ会」を始めました。 AWSの最新情報キャッチアップ会 AWSのアップデートの情報のキャッチアップ会については、これまでも月に一度のペースで行っていました。 オンライン通話で、AWS の最新情報 – クラウドイノベーション & ニュースを見ながら、直近1ヶ月のアップデートの情報を確認しつつ、 「この機能ができるようになったら、何が嬉しいの?」「この機能はあのお客 […]

Gatsby ソーシャルボタンを画面遷移時にも正しく表示する方法

  • 2020.05.18

土居です。新型コロナウイルスによる昨今の事情もあって、元々あまり外出しない方であった性質にさらに拍車が掛かっています。そこに赤ちゃんのお世話であまり手元が空かないことも加って、映像作品やテレビの視聴をすることが増えました。ドラマとかあんまり観なかったけど、けっこう面白いな。。。(いまさら)と思いながらのんびり過ごしています。 Gatsbyでソーシャルボタンを追加する 各種公式 (FaceBookは […]

React Hooks

  • 2019.12.16

こんにちは、土居です。赤ちゃんがどんどん重くなってきて、しばらく抱っこしているとかなりズッシリきますが、その分成長を実感しています。 Hooks ReactのHooks機能が16.8.0より正式版になりましたが 、実はまだ使ったことなかったのでちょっと触ってみました。Hooksを使えば、classを書くことなくstateを用いることができるようです。 Hooksとは? class componen […]

Gatsby.jsで.env.*を使う

  • 2019.10.04

こんにちは。土居です。この度、弊社コーポレートサイトをリニューアルいたしました。 クラウド入門記事や事例紹介などなど、大きく刷新・コンテンツを充実させておりますので是非ご覧ください。 今回、構築はGatsby.js(Reactベースのフレームワーク)を使用したのですが、その際に環境変数の扱いで少しハマってしまったのでご紹介したいと思います。 デプロイ環境ごとの.envファイルの利用 弊社ではCir […]

JavaScriptの同時実行モデルについて

概要 JavaScriptが多くの言語と異なる点のひとつに、イベントループベースの同時実行モデルがあります。これは、JavaScript自体というよりも、ブラウザの仕組みにも関わりがあります。 今回はそれについて書いてみようと思います。 目次 概要 ラインタイム ヒープ スタック キュー イベントループ 応用例 まとめ 参考 ラインタイム MDNの図を拝借すると、JavaScriptのラインタイム […]

JavaScriptでp12ファイルから証明書と秘密鍵を取得する

  • 2018.12.17

JavaScriptを使って、ブラウザ上で、p12ファイルからpemの書式で証明書と秘密鍵を取得してみます。 forgeの使用 以下、forgeというライブラリを使って実装してゆきます。ブラウザで読み込むには、以下のようにminファイルを読み込む必要があります。 const forge = require('node-forge/dist/forge.min.js'); p12ファ […]

ブラウザ間差異いろいろ

  • 2018.12.13

こんにちは。土居です。1年はあっという間でして、私の今年最後のブログ投稿になります。今回は、現在開発中のシステムの検証において、ブラウザによる差異が見つかった中からいくつかご紹介したいと思います。 IE, Edge inputタグのtype="number"のスピン(増減ボタン)が表示されない Chromeでは以下のようなスピンが表示されますが、numberが対応しておらず、t […]

Nuxt.jsの新規プロジェクトでいい感じのテスト環境をつくる@2018

  • 2018.10.29

現在、新規プロジェクトで、Nuxt.js+TypeScriptを使ったSPAの開発を行っています。この記事では、そういったケースにおいての、Nuxt.jsアプリケーションでのテストに対する考え方と、その方法を紹介します。 TL;DR ユニットテスト/結合テスト=>Jest UIテスト=>Storybookをベースに、Jestで足りない部分を補う プロジェクトの技術スタック Nuxt.j […]

1 6