こんにちは!! スマートキャンプでエンジニアをしている吉永(@__GGEasy)です！ 自己紹介記事はこちら 前回の記事はこちら 私は現在、スマートキャンプの主力サービスであるBOXIL SaaSの開発にフロントエンド、バックエンド問わず携わっています。 今回は、弊社で新規サービスとしてリリースしたBOXIL SaaS質問箱(以下SaaS質問箱)にて、React.js(以下React)を私の主導で採用しました。 この記事では、フロントエンド整備に至った経緯や、今後のBOXIL SaaSにおけるフロントエンドの技術的な展望についてお話します。 BOXIL SaaSのフロントエンドで抱えていた課題感 さまざまな技術が同居している Vue + Atomic Designでの課題 構成変更の検討 どのようにフロントエンド構成を整備したのか SaaS質問箱のフロントエンド技術選定 React + T

こんにちは！！！スマートキャンプでエンジニアをしている吉永です！ 自己紹介記事はこちら 前回の記事はこちら 私は現在、スマートキャンプの主力サービスであるBOXILの開発にフロントエンド、バックエンド問わず携わっています。 私が入社した去年の8月からしばらくは週一で出社していましたが、今年にかけてはコロナの状況が悪化していたためほぼフルリモートの環境でやり取りをすることが増えました。 BOXIL開発部の特徴として、社内のプロダクトの中でもステークホルダーとなる人物・部署が多く、開発をするにあたってエンジニア以外の社内メンバーとのやり取りが多く発生することがあります。 私は以前から部署間のコミュニケーション改善について興味を持っており、入社当初に弊社で取っているコミュニケーション施策の数々に感銘を受け、一年前のテックブログでもそのような内容の記事を書いています。 tech.smartcamp

スマートキャンプ、エンジニアの入山です。 弊社のBOXILは、AWSを基盤としたRailsベースのアプリケーションです。 以前のブログでもECS移行におけるTipsを紹介しましたが、2020年10月頃よりEC2基盤からECS/Fargate基盤へのインフラ移行に取り組んでおり、2021年5月に新しい基盤が無事本番稼働を迎えました。 今回は、弊社BOXILのインフラ移行について、概要を紹介したいと思います。 BOXILのインフラについて EC2基盤の課題と移行の背景 EC2基盤のアーキテクチャ ECS/Fargate基盤のアーキテクチャ 移行による効果 Pros Cons まとめ BOXILのインフラについて BOXILは、弊社創業から程なくして誕生し、弊社と共に成長してきた主力プロダクトで、リリースから6年以上が経過しています。そんなBOXILのインフラは、プロダクト発足時からAWSのEC

こんにちは！スマートキャンプ、エンジニアの中田です。 以前書いた記事の内容に引き続き今回も、現在業務で利用している Go のお話しです！ 以前の記事 tech.smartcamp.co.jp 突然ですが、みなさんはテストを書かれてますか？ 僕も「書いてます！」と声を張りたいところですが、4 月に新卒入社をしてから開発を始めた Go 製の API には何を隠そうテストがございません...。 開発初期は API へリクエストを手動で送りテストするような運用で特に事なかったのですが、開発が進むにつれコード差分による影響範囲が網羅できなくなったり、またそれにより大きな変更がしづらくなったり、とテストがないことによる悪影響が徐々に出現してきました。 そこで、テストを書こう。と思い立ってはみたものの、Go で API のテストってどう書くんだろう？と困ったのでその辺りを調査しながらサンプルアプリを実装

こんにちは！スマートキャンプでWebアプリケーションエンジニアとして働いている中川です。 さて、唐突ですがみなさんは別の開発チームに異動した経験はありますか？ いくつかプロダクトを抱えていたり受託開発をしている会社では割とよくある現象なので、少なくない数の方が経験されたことがあるかなと思います。 と、この書き出しで察しの良い方はお気づきかと思いますが、かくいう自分もこの度チームを異動して、6月からBOXIL開発チームで働いています。 今回の記事では、自分が新しいチームに参加することになったときにどういうキャッチアップを行っているかについてご紹介していこうと思います！ また、今回の記事で前提としているのは異動のシーンですが、転職でも通ずるような内容は多いと思っています。 キャッチアップする目的を考える なにをキャッチアップしていくか考える プロダクトに慣れる ビジネスモデルを知る 使われてい

こんにちは！今年の 4 月からスマートキャンプに入社し、只今新卒エンジニア研修期間中の中田です。本記事は、インターフェース定義の悩みを解決するために gRPC、Protocol Buffers を調査してみた！という内容のエントリです。 背景 gRPC とは Protocol Buffers とは 4 つの通信方式を試してみた 実装 準備 インターフェース定義 コンパイル サーバーとクライアントの実装 UnaryCall ClientStreamingCall ServerStreamingCall BidirectionalStreamingCall ドキュメント生成 学び まとめ 背景 新卒エンジニア研修では、同期のメンバーと 2 人で Go (REST API) + React/TS 構成の SPA を作っています。 このアプリの開発では、Server - Client 間でインター

こんにちは！スマートキャンプで Web アプリケーションエンジニアとして働いている中川です。 突然ですが、みなさんは普段スライドを作っていますか？ 私はそこまで頻度高くはないものの、全社イベントでプレゼンするためであったり、他部署交流のための自己紹介、あとは LT 会などのためにスライドを作ることがあります。 Twitter で見かけたこちらのツイートから、Slidevという Markdown からスライドを作成できる OSS を知り、実際に使ってみたところ非常に感触がよかったので、今回の記事では Slidev の簡単な使い方や、なかはどうなっているのかなど紹介していきたいと思います！ 🚀 Slidev v0.9.0 Released 🤹 Animations / Motion by @vueuse's motion package 📰 Textual diagrams by Mer

こんにちは！！！ スマートキャンプでエンジニアをしている吉永です！ 得意領域はフロントエンドで、スマートキャンプではBOXILというプロダクトに主に関わってます。 自己紹介記事はこちら 早速ですが、皆さんはIEでの表示崩れ対応をしたことがありますか？ フロントエンド開発をしていると同じCSSが当たっているのにChromeとSafari、IEでレンダリングされるものが変わってしまう自体に遭遇することがあるため、各種ブラウザでちゃんとした挙動を調べる作業が生じることがあり、その作業でIEというブラウザの挙動を確認することをIE確認と言います。 IE自体、今後はサポートが終了されるという話も聞く上に、最近ではIEの対応を完全にやめた他社プロダクトも出始めてきました。 docs.microsoft.com しかし、現在BOXILではユーザの10%がIEからのアクセスとなっており、10%というユーザ

スマートキャンプ、エンジニアの入山です。 前回のブログにも書きましたが、弊社では昨年末から既存のEC2からECS/Fargateへのインフラ移行作業を実施しています。 EC2からECSへ移行する上では、特に運用面が大きく変わります。利便性やメンバーへの教育コストを考慮すると、今までEC2でやっていた運用をECSでどう上手く代替するかが力の入れ所だと思います。 一ヶ月前に弊社インターンの関口が書いた以下の記事も、既存運用の置き換えやデバッグ時の利便性向上を目的とした手段の１つで、この記事を執筆した時点ではECS/Fargate上のコンテナに対するAWS公式のログイン手段はありませんでした。 tech.smartcamp.co.jp 弊社のECS移行も稼働直前の佳境を迎えている最中ですが、この度Amazon ECS Execがリリースされ、待ち望んでいたECS/Fargate上のコンテナに対す

こんにちは、スマートキャンプでBALES CLOUDを開発している中川です！ 昨年の 9 月に Vue.js のメジャーバージョンが 3 になりかれこれ半年ほど経ちますが、みなさんのプロジェクトでは移行が進んでいますか？ 私が普段開発している前述のプロダクトにも Vue.js の 2.x 系を採用しているのですが、利用している UI ライブラリが Vue3 に対応するのを待っている関係でまだ移行には至っておらず、 先んじて Lint のルールを Vue3 のものに切り替えて準備だけ進めているような状況です。 さて、Vue3 といえば Vue.js の発起人である Evan You 氏が始めた高速な開発用フロントエンドサーバーを実現する OSS である Vite が昨年話題になりました。 話題になったタイミングで私も記事を書いたのですが、その時点ではまだ Beta ですぐに本番投入できる段階

こんにちは！スマートキャンプの21卒の内定者としてエンジニアインターンをしている関口です！ 私はBOXIL開発チームに所属しており、現在BOXILのインフラ基盤をAWS EC2からAWS ECS/Fargateへ移行するプロジェクトを行っています。 この記事ではそのプロジェクトを通して得た技術的な知見を共有していきます。 移行前、移行後のインフラ基盤の紹介 ECSとFargateの概要 基盤構築の際に詰まったこととその解決策 Fargate運用することの課題 Fargateのコンテナへログインするための概要 具体的なコンテナログインのやり方 amazon-ssm-agent、AWS CLIのインストール アクティベーションの作成、コンテナのマネージドインスタンスへの登録、SSMエージェントの起動 おわりに 移行前、移行後のインフラ基盤の紹介 現在のBOXILのインフラ基盤はEC2で運用が行

こんにちは、スマートキャンプのエンジニアの瀧川です。 私はこのブログではBigQuery大好き芸人としてよく記事を書いてますが、実は普段の業務では30%くらいの時間をエンジニア採用に割いております。 今日は弊社で実践している技術試験及び技術面接について、どのような目的を持ってどのように設計したか、またそこにかける思いを書かせていただこうと思います。 弊社に興味を持っていただき選考を受けようとしている方はもちろんですが、自社で技術の見極めに課題がある採用担当者の方などにも参考になれば嬉しいです！ ※ 今回は中途採用に限って書いていきます。 ※ 弊社の採用フロー全体については別途エントリーがあるので、興味があれば見てみてください。 tech.smartcamp.co.jp 背景 現在の選考フロー 技術面接で知りたいこと いままでの課題 課題解決のために事前技術試験の導入 導入した技術試験の構成

こんにちは！！！ スマートキャンプでエンジニアをしている吉永です！ 去年の8月に入社し、BOXILのフロントエンド開発に主に関わっています。 自己紹介記事&前回の記事はこちら 弊社の主力サービスであるBOXILは、リリースしてから既に何年も経っているということもあり全てが最新という訳ではなく、インフラからフロントまで様々な技術的負債を抱えています。 フロントエンドでは古いライブラリを使ってしまっているケースや、UIライブラリに依存してしまっているというケースが挙げられます。 他には、CoffeeScriptの中でnew Vue...としてVueを動かしている部分もあり、可読性や保守性に大きな弊害をもたらしてしまっている状況です。 昨年Vue 3がリリースされましたが、各種ライブラリの対応はまだ追いついていない部分も多く、「Vueのバージョンを2系から3にあげたいけど、主要なライブラリがいま

こんにちは、スマートキャンプの徳田です。 みなさんの会社ではテックブログやってますか？ findy-enterprise.connpass.com 昨年12月16日に、「エンジニア採用の最前線 メルペイとスマートキャンプが語る！採用につなげるテックブログ運営の秘訣 」というオンラインイベントが開催されました。 メルペイ社と弊社スマートキャンプのブログ運営担当が登壇し、それぞれブログをどういう考えで運営し、どう執筆者と連携を取っているかをディスカッション形式で話していました。 本記事はイベントレポートとして、トピックと話していた内容をまとめたものとなります。 登壇ゲストについて 株式会社メルペイ 安藤喜子さん スマートキャンプ株式会社 中川 眞誠さん 「テックブログの立ち上げの背景、社内での位置付けは？」 メルペイ 安藤さん: Q: 「どれぐらい採用目的を意識していますか？」 スマートキャン

スマートキャンプ、エンジニアの入山です。 昨年末から弊社BOXILでは、EC2からECS/Fargateへのインフラ移行作業を実施しています。 EC2運用からコンテナベースのECS運用への移行は、インフラの思想として異なる部分も多く、一筋縄ではいかないということを日々痛感しています。特に運用面に関する仕組みやノウハウは大きく異なっているため、今までと同等の運用を異なる方法で実現する必要があり、頭を悩ませることが多いです。 例えば、今まではEC2にSSHしてコマンドを投入していたが、ECS/Fargate上で同じことをどうやってやるのか…など。SSHしなくても良い運用にすることも必要ですが、今まで当たり前に出来ていたことが万が一の時にどうやっても出来なくなるのはやはり辛い問題ではないでしょうか。 また、とりあえず移行はできたけど、今までよりも運用に時間や手間が掛かるようになった…といったこと

スマートキャンプエンジニアの中川です。 このブログが開設されてから、今日でちょうど 2 年が経ちます。 また、私は去年のこの時期、つまり開設されてから 1 年時点でこのブログを引き継ぎ、以来今まで 1 年間運営してきました。 そこで、この記事ではこの 1 年間でブログがどう変わってきたかを振り返ってみようと思います。 ブログやその記事自体もそうですが、社内でテックブログを存続・発展させるためにやってきた取り組みなどに関してもご紹介します。 また、開設から 1 年間の出来事は以下の記事にまとめられていますので、ご興味のある方はこちらもあわせてご覧ください。 エンジニアブログを開設して１年でなにが起きたかすべてオープンにする - SMARTCAMP Engineer Blog ブログの数値を振り返る はじめに、このブログの数値が 1 年でどのように成長したかを振り返ります。 こちらが去年の数値

こんにちは！スマートキャンプでインサイドセールス管理システム『BALES CLOUD』を開発・運用している中川です。 今回は、上記のプロダクトが有しているフィルター機能を、個人的な興味から Prisma でトレースして作ってみたところ、良いポイントがいくつもあったので紹介したいと思います！ また、Prisma を試すにあたって、既存の DB からスキーマを生成して実行環境を用意したので、そのあたりについても説明した記事になります。 Prisma とは Node.js や TypeScript で使用出来る ORM DBMS は PostgreSQL、MySQL、SQLite に対応 データベースのスキーマをデータモデルに変換したうえで、データモデルに対して型推論が効く VSCode などエディタ上でクエリを書く際の DX が良い チュートリアルやドキュメントなど、非常に詳しくまとまっている

スマートキャンプエンジニアの瀧川です。 みなさん、BigQueryは使っているでしょうか？ BigQueryはデータのインポート、加工、エクスポートを便利にする機能が数多くリリースされており、ファンも多いことと思います。 かくいう私もBigQuery大好きマンとして社内で名を馳せていて、最近だと下の記事で笑顔になった1人です。 ユーザーを笑顔にする BigQuery の使いやすい SQL 新機能 | Google Cloud 公式ブログ 今回は2019年末にリリースされたBigQuery Scriptingに注目して、どんなものなのか、既存のワークフローの中でどう使えるのかを試してみようと思います！ BigQuery Scripting 試しにFizzbuzz書いてみた 既存のワークフローの一部を置き換えてみる お題: 個人情報の秘匿化 実装方針 完成したScript(クエリ) まとめ B

こんにちは！！！スマートキャンプ、エンジニアの吉永です。 私は8月にスマートキャンプに中途入社し、今月で3ヶ月目となります。 前職では受託開発を主にした小さな企業に未経験で入社し、そこで一年間フロントエンド、バックエンド問わず開発したり、テックリードのような業務も行ったりしていました。 小さな会社なので部署というような区切りはほぼ無く、社長含め全てのメンバーがエンジニアといったようなエンジニア集団の環境で、日々開発タスクをこなしていました。 しかしある時期をきっかけに、外部の方と協力する機会が増え、エンジニアだけがいる環境から様々な人間が関わる環境へと変わっていき、とあるプロジェクトを進めている最中、私達エンジニアサイドと、企画サイド、デザイナーサイドでうまく噛み合わず、スケジュールが大幅に遅れてしまいました。 そして、このことをきっかけに私自身がエンジニア以外の人間に対して苦手意識を持っ

こんにちは、 https://boxil.jp を作っている徳田(haze_it_ac)です。 先月に今風？な構成のAPIを業務で作ったので、その紹介をしようと思います。 作るもの・要件 雑な図 外部のAPIを叩くためのアプリケーションです。 BOXILのAPIサーバから今回作るAPIを叩き、そこから外のAPIを叩いて情報を取得したり、処理をしたりするものです。 現時点ではBOXILのみで使われていますが、それ以外からも使用されることを予定・想定しているため、BOXILとは別の基盤で作成しどこからでも実行できるように構築する必要があります。 なお、今回のサンプルリポジトリは以下になります。ソースコードと合わせて読んでみてください。 github.com 全体構成 概要 雑な構成図 AWS CDKを中心に据えた、AWS Lambdaで実行されるアプリケーションです。 実行環境 Webアプリケ