SMARTCAMP Engineer Blog

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

フロントエンド

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が構築できるのでいいですよね。 今…

SPAをSimpleHTTPServerでテストしたい!

BigQuery大好き瀧川です! 最近弊社ではVue.jsを使ってSPA(SinglePageApplication)!という構成がよく使われています。 普段の開発だとwebpack-dev-serverを利用していて、手軽だしホットリロードもサポートされているし特に不自由なく運用できています。 で…