wharaguchi

フロントエンドエンジニア。

wharaguchi

フロントエンドエンジニア。

  • スペースマーケット ENGINEERING

    • 138本

    スペースを簡単に貸し借りできるサービス「スペースマーケット」のエンジニアによる公式ブログです。

CSS グリッドレイアウト チョットデキルようになった話

こんにちは。フロントエンドエンジニアの原口です。 さて、今回はCSS のグリッドレイアウトについてのお話です。 グリッドレイアウト使っていますか？ 自分は勉強しなくてはなーと思いつつも使用場面がイマイチ思いつかなかったことや、flex使えれば良くない？？という考えがあったため、なかなか手を付けられずにいました。 しかし、他の方が使用しているコードを見て、こんなことできるんだ！こういう使い方もできるのね！状態になったため、今回はそちらを紹介したいと思います！ グリッドレ

wharaguchi

    • フロントエンドチームの行っている取り組み

      こんにちは！フロントエンドチームの原口です。 本日は、スペースマーケットのフロントエンドチーム（以下FEチーム）について知っていただくために、FEチームが普段行っている取り組みについてご紹介します。 所属メンバーまずはじめに所属しているメンバーについてですが、現在FEチームに所属しているメンバーは7名で、みなさんSIer、SES、事業会社、Web制作会社出身など様々なバックグラウンドを持っています。 取り組み続いて実際に行っている取り組みについてです。 朝会 毎日朝

      wharaguchi

      • VSCode拡張機能 Quokka.jsの紹介

        こんにちは、原口です！ 今日は最近導入して便利だった Quokka.js という VSCode の拡張機能についてです。 有名な拡張機能だと思いますが、社内で紹介したところ「こりゃいい」との声をいただいたので、今回はこちらを紹介したいと思います。 普段開発を進めている中で、JavaScript の挙動や TypeScript の挙動を試したくなることはありませんか？ 今までそのような場面に遭遇した場合、プロダクトコードで試してみたり、Google Chrome dev

        wharaguchi

        • CSS Transitionの紹介

          こんにちは。 娘とポケモンスナップにハマっている原口です。 プレイする度に新しいポケモンに出会えるので、娘とワクワクしながらプレイしています👧🏻 📸 👨🏻 さて、前回の記事 では LP に CSS でアニメーションを付けてみたという話をしました。 そこで今回は、アニメーションを作る際に使用しているCSS transitionについて簡単なサンプルを交えて紹介したいと思います。 CSS transition って？🤔MDN では CSS transition について

          wharaguchi

        CSS グリッドレイアウト チョットデキルようになった話

        wharaguchi

        マガジン

        • スペースマーケット ENGINEERING
          138本

        記事

          LPにCSSアニメーションをつけてみた

          こんにちは。 現在ダイエット中の原口です。 絶対痩せるぞ2021！ さて、今回はスペースマーケットのLPにCSSでアニメーションをつけてみた、という話になります。 なぜつけようと思ったか？完全に個人的な理由になってしまうのですが、久しぶりにCSSアニメーションを作成したかったからです。笑 自分が以前勤めていたのWeb制作会社ではCSSアニメーションを採用することが多く、個人的にもCSSアニメーションは好きだったので楽しんで実装していました。 スペースマーケットでは今

          wharaguchi

          LPにCSSアニメーションをつけてみた

          wharaguchi

          StorybookをAmplifyに自動デプロイできるようにした話

          こんにちは、原口です。 スペースマーケットでは、UIコンポーネントを確認するツールにStorybookを使用しています。 UIコンポーネントをカタログ化し、コンポーネントやデザインの確認をすることができるためとても便利なStorybookですが、コンポーネントを確認するためには都度Storybookを立ち上げる必要があることや、レビューの時にブランチの切り替え→Storybookの立ち上げ直しが地味に時間がかかることに若干の手間や面倒臭さを感じていました。 またフロント

          wharaguchi

          StorybookをAmplifyに自動デプロイできるようにした話

          wharaguchi

          スペースマーケットのマークアップについて

          スペースマーケットのマークアップにおけるコーディングルールについてお話したいと思います。 スペースマーケットのマークアップは、主にReactでコンポーネントを作っており、スタイリングはstyled-componentsを採用しています。 一部古い環境でhtml + scssで作っているところもありますが、現在はあまり触ることはありません。 コーディングルール ブレークポイント ブレークポイントは、下記の4つになります。 xs: 350px tablet: 768px

          wharaguchi

          スペースマーケットのマークアップについて

          wharaguchi

          スペースマーケットのエンジニアとデザイナーで今年行ってきた取り組み

          はじめまして。スペースマーケットでエンジニアをしている原口です。 リングフィットアドベンチャーを毎日やっていたら、整体の先生からやりすぎだとドクターストップがかかってしまいました😌、 この記事は スペースマーケットプロダクトチーム Advent Calendar 2019 の 12月23日の記事になります。 本日は、今年エンジニアとデザイナーが取り組んできた、コンポーネント推進PJについてお話したいと思います。先日開催された 「年の瀬に振り返る Figma & React

          wharaguchi

          スペースマーケットのエンジニアとデザイナーで今年行ってきた取り組み

          wharaguchi