SMARTCAMP Engineer Blog

スマートキャンプ株式会社(SMARTCAMP Co., Ltd.)のエンジニアブログです。業務で取り入れた新しい技術や試行錯誤を知見として共有していきます。

フロントエンド

React Hook Form と Zod で非同期バリデーションがしたいの!!

遭遇してしまった問題 解決策 おわりに こんにちは!! BOXIL SaaSのエンジニア兼テックブログチームの平社員をしているブラーバです。最近は働きが認められ、テックブログチームで確固たる地位を築きつつあるとかないとか...。 今回は以前公開したReact Hook …

React Hook Form、Zod、Recoil を組み合わせたフォームを作る!

スマートキャンプでBOXIL SaaSのエンジニアをやってます職人こと袴田です! 今回は新規会員登録の画面に関してUI/UXの向上のための施策を対応したことについて紹介します。

フロントエンドテストのはじめかた

はじめまして、もしくはまたお会いしましたね。BALES CLOUD(以下BC)エンジニアのてぃがです。 BCでは、最近フロントエンドのテストを始めました。 また、個人としても社内でフロントエンドのテストの普及啓蒙活動をやっております。 今回はこれらについて…

Rails+ReactプロジェクトでWebpackからViteに乗り換えたら、開発が劇的に快適になった話

はじめに なぜViteに移行したか 導入方針 開発環境に導入 vite側の作業 詰まったところ vite自体に付属するmanifestオプションを使用すると、manifest.jsonの形式が大幅に変わってしまう 同じスタイルを複数のエントリーポイントで読み込むとファイル名が変…

Vue3にアップグレードしてフロントエンドを改善した話

vue3-migration-improve-frontend はじめまして! BALES CLOUDエンジニアのえーす(井上)です。この度、BALES CLOUDで長年使ってきたVue2から卒業し、Vue3を導入した状態でリリースできました。今日はこれについてお話できればと思います。 やったこと なぜ…

エンジニア採用サイトをリニューアルした話

挨拶 こんにちは!私はBOXIL SaaS開発エンジニアのハヤシ(ぱずー)です。 前回、私がスマートキャンプで成長したエピソードを紹介しましたが、今回はエンジニア採用サイトのリニューアルに携わったので、それについて紹介します。 最後まで読んでいただけると…

BOXIL SaaSのフロントエンドをモノリポ構成 + Reactで仕切り直した話

こんにちは!! スマートキャンプでエンジニアをしている吉永(@__GGEasy)です! 自己紹介記事はこちら 前回の記事はこちら 私は現在、スマートキャンプの主力サービスであるBOXIL SaaSの開発にフロントエンド、バックエンド問わず携わっています。 今回は、弊…

TypeScriptやGoやRustでWebAssemblyウォークスルー

みなさん、WebAssembly聞いたことありますよね? スマートキャンプでエンジニアをしている瀧川です。 私が初めてWebAssemblyを目にしたのは確か2018年、VimをWebAssemblyに移植してブラウザで動くようにしたという記事だったかなと思います。 https://github…

若手エンジニアの俺がフロントエンドのビルドを早くしてReactも導入しちゃった話

またオレ何かやっちゃいました? こんにちは!!!スマートキャンプでエンジニアをしている吉永です! 自己紹介記事はこちら 前回の記事はこちら 弊社の主力サービスであるBOXILはリリースから時間が経っていることもあり、バックエンド・フロントエンドとも…

開発者のためのプレゼンスライド OSS「Slidev」を使ってみた&中身を読んでみた

こんにちは!スマートキャンプで Web アプリケーションエンジニアとして働いている中川です。 突然ですが、みなさんは普段スライドを作っていますか? 私はそこまで頻度高くはないものの、全社イベントでプレゼンするためであったり、他部署交流のための自己…

フロントエンドの爆速な開発サーバを実現する Vite がバージョン2.0になったので変更点を眺めてみる

こんにちは、スマートキャンプでBALES CLOUDを開発している中川です! 昨年の 9 月に Vue.js のメジャーバージョンが 3 になりかれこれ半年ほど経ちますが、みなさんのプロジェクトでは移行が進んでいますか? 私が普段開発している前述のプロダクトにも Vue…

Vue 2.xとVue 3を共存させようと思ったけどダメだった話

こんにちは!!! スマートキャンプでエンジニアをしている吉永です! 去年の8月に入社し、BOXILのフロントエンド開発に主に関わっています。 自己紹介記事&前回の記事はこちら 弊社の主力サービスであるBOXILは、リリースしてから既に何年も経っているとい…

Vue 3 + TypeScript + Jestの構成で単体テストを実行するために試行錯誤した話

スマートキャンプの20卒エンジニアの高砂です! 私は弊社のSaaS比較サイト「BOXIL」の開発に携わっており、フロントエンドを中心に様々な機能を実装しています。 そんな中、Vue.js + TypeScriptで実装した機能群が複雑になってきた事から「より丁寧にテスト…

reg-suitとCypressを使ってビジュアルリグレッションテストを導入した話

こんにちは!スマートキャンプでインサイドセールスに特化した SaaSを作っているエンジニアの井上です。 携わっている上記のプロダクトは使いやすさにこだわっているため、UIの修正を行うことが多々あります。 そんななかで起こった問題の対応としてビジュア…

Pug を HTML に移行して .vue ファイル の template タグ内に ESLint を効かせた話

こんにちは!スマートキャンプでインサイドセールスに特化した SaaSを作っているエンジニアの中川です。 上記プロダクトのフロントエンドは Vue.js を用いて開発しているのですが、 その中で SFC 内のtemplateタグで使用していた Pug をやめて HTML に移行し…

スマートキャンプに入社しました!& Chrome拡張機能をVue.jsで作りました!

初めまして!8月よりスマートキャンプにエンジニアとして中途入社した吉永です! 私は現在19歳で、通信制の大学に通いながらエンジニアチームの一員として開発に携わっています。 プログラミングは中学生の時に始め、高校在学時にとあるスタートアップ企業で…

JavaScriptでの絵文字の扱われ方を知っていますか?

スマートキャンプの20卒エンジニアの高砂です! 皆さんは、JavaScriptにおける絵文字の扱われ方が難しい事をご存知ですか? 本記事では、その背景と適切な方法を解説していきます! JavaScriptにおける絵文字の問題点 問題点の再現 問題点の背景 絵文字を適…

フロントエンドの爆速な開発サーバを実現する Vite を試してみた

こんにちは!スマートキャンプでエンジニアをしている中川です。 先日Twitterを何気なく眺めていたところ、Vue.js 生みの親の Evan You氏が何やら興味深いツイートをしているのが目に止まりました。 As I was going to bed, I had an idea about a no-bundle…

20卒未経験エンジニアが研修でVue.jsに自信を持った話

スマートキャンプの20卒エンジニアの高砂です! 新卒入社後、スマートキャンプでは2週間の全体研修と1ヶ月のエンジニア研修に参加しました。 本記事では、後者のエンジニア研修について紹介させて頂きます! 研修目的 「一定以上のレベルで実務に貢献できる…

Vue.js 3 のベータ版がリリースされたので予習してみる

こんにちは!スマートキャンプでエンジニアをしている中川です。 いきなりですが、つい先日待望の Vue.js 3.0.0 beta がリリースされました! We just released Vue 3.0.0-beta.1! Here's an overview from @youyuxi on the status of 3.0 core and official…

プロダクトのパフォーマンスを改善するためにVue.jsの関数型コンポーネントやpropsに関する施策を行った話

こんにちは!フリーランスエンジニアとしてスマートキャンプに参画している芳岡です。 弊社のプロダクトであるBiscuet(https://biscuet.jp/)の開発に初期から参画していますが、サービスが世の中に展開されていく過程、チームが大きくなっていく過程を間近で…

Vueユーザーが感じたSvelteのおもしろい機能を紹介する

Svelteの紹介記事では、「Vue.jsと構文が似ているため習熟が簡単」「Vue.jsの50倍早い」みたいなところにフォーカスされることが多いかなと思いますが、本記事ではSvelteのTutorialをやるなかで、フレームワーク(ライブラリ)の機能として普段Vue.jsを利用し…

Vue.js 3.0で搭載される Composition APIをリリースに先駆けて試してみた

スマートキャンプでBiscuetのエンジニアをしている中川です。 本記事はスマートキャンプ Advent Calendar 2019 - Qiitaの19日目の記事です。 現在弊社のプロダクトであるBOXILとBiscuetは、そのどちらの開発チームもVue.jsを使用して開発しています。 Vue.js…

実践!SPAでのリビジョンのズレ対策

スマートキャンプのエンジニア入山です。 近年、ユーザ体験(UX)の優位性からSPA(Single Page Application)を採用しているWebアプリケーションを多く目にするようになりました。 弊社が8月1日にリリースした、インサイドセールスに特化したCRM Biscuet(…

Atomic DesignをVue.jsで実現するための構成と考え方 | Biscuetでの例をもとに

スマートキャンプのデザイナー/エンジニアのhaguriです。 弊社では8月1日、インサイドセールスに特化したCRM Biscuet(ビスケット) という新サービスをリリースしました。 biscuet.jp Biscuetでは Vue.js + Atomic Design でコンポーネント設計をしています…

LighthouseのPerformance項目で40点上げた方法

スマートキャンプのエンジニア井上です! 多くの開発要望がある中で、エンジニアのみでインパクトのある改善をするときにによくあげられるのがサイトの パフォーマンス改善 かと思います。 今回はサイトのスピート計測ツールである、 Google PageSpeed Insig…

Vue.jsで定期的にバックエンドと通信したいときに気にしたい3つのこと - プラグイン作成で解決

スマートキャンプのエンジニア瀧川です! クライアントサイド(JavaScript)で処理を定期実行したい場合は皆さん使いますよね! そうsetInterval関数です。 ただ何も考えず使ってしまうと色々な問題が起こったり... そこで本記事ではsetInterval関数を使う際の…

Nuxt.jsとAuth0でモダンなソーシャルログインを実装してみる

エンジニアの井上です! 今回は私が最近気になっていたAuth0とNuxt を使って簡単な認証機能を作っていきたいと思います。 認証をどのように実装するかは皆さん結構悩まれているかなと思います。 Auth0は様々な既存プロバイダと自由に連係可能かつマルチデバ…

RailsでVue.jsのSFC(単一ファイルコンポーネント)を使うためにWebpackを入れてみた

こんにちは。エンジニアの笹原です。 スマートキャンプではフロントエンドの開発にVue.jsを取り入れています。 Vue.jsで開発するうえで、SFC(単一ファイルコンポーネント)を利用できることは良さの一つだと思います。 今回は、Sprocketsでアセット管理を行…

Vue.js + Elelment UI + Lottieでお手軽にいい感じなUI/UXを作ってみる

デザイナー兼エンジニアの葉栗です! スマートキャンプでは以前からWebフロントエンド開発にVue.jsを取り入れています。 Vue.jsなどコンポーネント指向のフレームワークは、UIフレームワークも豊富で、お手軽にリッチなUIが構築できるのでいいですよね。 今…