フロントエンド

1/6ページ

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

  • 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 […]

Nuxt.jsアプリのStorybookで画像を読み込む

  • 2018.10.01

Nuxt.jsアプリケーションのStorybookで画像を読み込む小ネタを紹介します。 問題 Storybookで静的ファイルを読み込むには、-sオプションを使用します。 Nuxt.jsだとassets配下に静的ファイルを置くと思いますが、以下のようにすると、Storybookでassets配下がホストされるようになります。 { "scripts": { "start […]

Redux/Vuexでのプルリクエスト粒度の考え方

  • 2018.08.31

状態管理のライブラリを使用している場合、基本的にコードの記述量は増えるので、PRを分けたほうが好ましい。今回は普段意識しているPRの分け方を書いてみた。 1.State設計とViewの実装で切り分ける これは最もベーシックな切り方で、以下のような分け方になる。 主なロジックが入るStateの設計でまず1PR 一般的にはStateの写像となるViewで1PR 2.Stateで切り分ける Stateに […]

1 6