フロントエンド

styled-components でスタイルが反映されない問題について

今回は styled-components で記述したはずのスタイルがうまく反映されていないという事象に数日間悩まされたのですが、最終的にあっけない解決方法だったので同じ悲しみを背負う開発者が少しでも減るよう記事に残します。

【Shopify】Liquid で JSON をオブジェクトとして扱う

はじめに アウトドア用品のセレクトショップ hinataストア の運用チームで開発をやっている氏家です。 hinataストアはShopifyテーマによって構築されており、Liquidのコードを変更して様々な機能を実装しています。 hinatastore.jp 最近、外部から出力してき…

Shopify Themeで同系色の商品をカラーチップで絞り込む方法案

フロントエンドエンジニアの氏家です。 私は現在、アウトドア用品のセレクトショップ「hinataストア」の運用を行うストアチームで開発をしています。 hinatastore.jp hinataストアは Shopify で構築されており、フロントエンドは Shopify Theme を使用してい…

Apollo で複数の GraphQL エンドポイントに接続する(+ Shopify Storefront API)

はじめに フロントエンドエンジニアの関(@kur0buchi)です。 今回は自分の担当しているhinataレンタルで Shopify アプリケーションと連携する必要ができ Storefront API を使う事になりました。 hinata-rental.me hinataレンタルを始めとした弊社各サービスで…

【Next.js】Firebase Authentication でパスワードの変更を実装する

はじめに フロントエンドエンジニアの関(@kur0buchi)です。 hinataレンタルでは先日会員機能をリリースいたしました。 当記事は会員機能実装にあたり調査していく上で適当なパスワード変更のサンプルを探しても現在の環境に丁度よく流用できそうなものが見当…

React と Svelte を比べて感じたこと

フロントエンドエンジニアの氏家です。 最近、JavaScript のフレームワークであるSvelteに関する記事を多く見かけるようになりました。 僕の中で「何か新しいフレームワークが出てるなぁ」から「面白そうだし触ってみよう」という気持ちに変わったので、vivi…

react-philosophies を読んでの所感

はじめに フロントエンドエンジニアの関(@kur0buchi)です。 プログラマとして自分で新しくコードを書いたり、誰かの書いたコードをメンテナンスする中で「良いコードとは」を悶々と考える日々を送る中、先日 Twitter のタイムライン上で mithi/react-philoso…

React Hook Form + yup によるフォーム実装あれこれ

はじめに vivit株式会社でフロントエンドエンジニアをしている氏家です。 私は現在、アウトドア用品の中古品買取と販売を行うhinataリユースの内製システムの開発に携わっています。 www.hinatareuse.jp システムはNext.js + TypeScriptにUIコンポーネントラ…

コーディング時のデザイナーとのコミュニケーションについてガイドラインを作成してみました

vivit株式会社でアウトドアメディア:hinataの開発をしています河村です。 今回はコーディング時のデザイナーとのコミュニケーションについてガイドラインを作りましたのでそのお話を書こうと思います。 きっかけ 以前からデザイン改修やLP実装などの開発案…

Google Analytics API を使ってディレクトリごとにドリルダウンする

フロントエンドエンジニアの関です。 リモート環境整備として椅子の検討を数ヶ月間予算や材質など検討した結果、現在バランスボールに座って仕事をしています。 ちなみにvivit社内でも希望者はバランスボールに座って仕事ができます。 弊社が運営しているキ…

チャネルトークAPIをNext.js + TypeScript環境で型安全に扱う

フロントエンドエンジニアの中村@taroodrです。 今回は、弊社のhinataレンタルというキャンプ用品のレンタルサービスで導入しているチャネルトークでチャットボットを開発した話をします。 チャットボットを作った背景は、弊社の菅谷がnoteに詳細を記載して…

LighthouseのAccesibilityスコア改善について

vivit株式会社でhinataというアウトドアメディアの開発を行っている河村と申します。 今回はLighthouseのAccessibilityに関するスコア改善のお話を書こうと思います。 Lighthouseとは LighthouseとはGoogleが公式に提供しているwebページのための品質監査ツ…

【書籍レビュー】1冊ですべて身につくHTML&CSSとWebデザイン入門講座

フロントエンドエンジニアの関です。 vivit株式会社では書籍購入補助制度を導入しており、一定の条件はありますが申請すれば補助が出ます。 今回はその制度を活用して購入した書籍のレビューを公開したいと思います。 「1冊ですべて身につくHTML&CSSとWebデ…

GraphQLについて

こんにちは、spotチームの名嘉眞です。spotチームはキャンプ場検索サービス(hinata spot)を開発しており、私はバックエンド担当として日々Goを書いてます。今回は業務でGraphQLを使っていることと、以下の書籍を読んだので、改めてGraphQLについて基本的なこ…

GraphQL の Fragment でコンポーネントの見通しがよくなった話

vivit株式会社でフロントエンドエンジニアをしている関です。 新型コロナウイルス感染症(COVID-19)への対策として発出された緊急事態宣言の影響で、弊社も2ヶ月ほどリモートワークとなり、私も駆け足で自宅に作業環境を構築しました。買っちゃいましたL字デ…

fly.ioでGraphQLのキャッシュサーバを立てて高速化した話

この記事は GraphQL Advent Calendar 2019 の22日目の記事です。 qiita.com こんにちは。 vivit株式会社というアウトドア関係のサービスを提供している会社で主にフロントエンドを担当している中村です。 本記事では、fly.ioでGraphQLのキャッシュサーバを立…