はじめに ざっくりしたシステム構成の紹介 全体の構造 設計のポイント コーディング規約 上の階層を見に行かない 変数名は全体でユニークにする 変数のデフォルト値は設定しない main, outputs, variables 以外のファイルを原則置かない ポリシードキュメントはJSONファイルのまま管理する 変数で処理を変える仕組みを極力使わない 値のハードコードをためらわない コードが冗長であることをためらわない 残っている課題 AWSアカウント単位でしか用意しないものの扱い ECSのタスク定義の扱い 最後に はじめに はじめまして。スマートキャンプのおにまるです。 2022年10月に入社し、SRE兼インフラエンジニアとして働いています。 今回は、あるプロダクトの再スタートにあたって新しく作った、AWSのTerraformについてお話したいと思います。 再スタートにあたってアプリケーション

挨拶 おすすめする人 dotfiles とは dotfiles を使ってみた感想 セットアップ方法 リポジトリ構成 自動セットアップ アプリケーションの管理 カスタマイズ デスクトップアプリケーション CLI アプリケーション Mac App Store のアプリケーション 完成系 プログラミング言語の管理 カスタム例 設定ファイルのシンボリックリンク作成 カスタム例 .gitignore および README.md .gitignore README.md さいごに 挨拶 こんにちは！スマートキャンプエンジニアの石井(トマス)です。現在、Boxil Event Cloudの開発に携わっています。 好きなことは「開発体験の向上」に取り組むことで、プロダクト参画時、開発環境をホストマシンに直接構築している状態で手順書もなく非効率だったのでDocker化し環境構築を簡略化しました。 今回は「開

こんにちは!!！スマートキャンプでエンジニアをしている吉永です！ 自己紹介記事はこちら 前回の記事はこちら 私は現在、スマートキャンプの主力サービスであるBOXIL SaaS（以下、BOXIL）の開発にフロントエンド、バックエンド問わず携わっています。 恐らく新年一発目になる弊社テックブログの記事は私の記事ということで、今年もよろしくお願いいたします。 はじめに なぜパフォーマンス改善を行ったのか Core Web Vitals(以下: CWV), Lighthouseとは？ CWVとは Lighthouseとは CWV & Lighthouseの改善結果 サービスページ(改善前) サービスページ(改善後) レビューページ(改善前) レビューページ(改善後) 改善をするにあたってチームで行ったこと コミュニケーション的なお話 タスクの洗い出し、調査方法 優先順位付け DatadogやSea

はじめまして！2021年7月にスマートキャンプに中途社員として入社した井上です！ 入社時から現在まで、BOXILの開発業務に携わっています。前職はSIerで顧客のシステム開発や新規プロダクトの開発などをしていました。スマートキャンプ、前職ともにフロント・バックエンド問わず開発をしていますが、スマートキャンプでは使用技術や開発するサービスの形態が前職と大きく異なり、新鮮な気持ちで業務に取り組めています。 今日は入社エントリーとして、私の経歴を含めた自己紹介と、なぜスマートキャンプに入社したか、そして入社後のギャップをメインに書いていこうと思います。 これまでの経歴 スピード感のある開発がしたい 技術的なチャレンジ なぜスマキャンを選んだか プロジェクト運営 技術的なチャレンジ 面接 入社してみて 前職との違い コミュニケーションが「密接」 開発スタイル 入社して感じたギャップ コミュニケーシ

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

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

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

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

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

スマートキャンプで業務委託でエンジニアをしている佐藤です。BOXILの開発を1年3ヶ月前から、沖縄からフルリモートでやっています。 皆さんは、毎日楽しくお仕事できていますか？　エンジニアという職業は労働時間やストレスが多く、IT業界は他の業界と比べて精神疾患にかかりやすいと言われています。 私はもともと自己否定ばかりしてしまう思考の癖があることに加えて、7年前に起業に失敗してメンタルを壊してしまったことをいまだに引きずっていて、日々悩みながら生活をしています。 スマートキャンプは、過労とは無縁で、メンバー間のサポートもよく、これ以上ないくらい私に合った職場です。それでも自分の心の問題で不安になったり、絶望感に襲われたりすることがあります。今回はそうなるたびに書き綴ったメモを、開発中にネガティブな気持ちにならないための技術としてまとめようと思います。 メンタルが強くないエンジニアはこんな気持

スマートキャンプ、エンジニアの入山です。 2020年7月にDockerとAWSのコラボレーションにより、単一コマンドでDocker ComposeのyamlファイルからAmazon ECS上に各コンテナをデプロイできる機能追加が発表され、非常に注目を集めました！ From Docker Straight to AWS - Docker Blog AWS and Docker collaborate to simplify the developer experience | Containers ローカルでDockerを利用して開発を行っている方々は、ほぼ間違いなくDocker Composeを利用してアプリの動作に必要な各コンテナを一括管理しているかと思いますが、このECS Pluginを利用するとAmazon ECSへの各コンテナのデプロイとECSの動作に必要な各AWSリソースを一括し

ボクシルのプロダクトマネージャーをしている笹原です。 ボクシルの開発チームは今年に入ってから規模をかなり拡大してきました。 一番少なかった2月と比べて3倍近い規模になり、拡大傾向も落ち着かせるフェーズになってきました。 そこで、今回はチームの規模を拡大する中で起こったことや、それに対してどのように対応してきたのか振り返って行きたいと思います。 併せて読んで欲しい記事 昨年の12月に同じように振り返ったときの記事です。 tech.smartcamp.co.jp 2020年2月〜: 2チーム制 この時期の体制 リモートワークへの対応 2020年4月〜: 1チーム制 この時期の体制 チーム内のコミュニケーションコスト増加 2020年6月〜: 3チーム制 この時期の体制 ストーリーポイントの安定化 ボトルネックが開発から企画へ 2020年9月〜現在: プロジェクトチーム制 この時期の体制 まとめ

こんにちは！スマートキャンプでインサイドセールスに特化した SaaSを作っているエンジニアの井上です。 携わっている上記のプロダクトは使いやすさにこだわっているため、UIの修正を行うことが多々あります。 そんななかで起こった問題の対応としてビジュアルリグレッションテストを導入したので、今回はその話をできればと思います。 背景 ビジュアルリグレッションテストとは？ ビジュアルリグレッションテストをやる目的 何をテストをするのか？ 使用したツール Cypress reg-suit 画像を取得する 画像の差分を検知する Circle CIによる自動化 ベース画像の自動更新 ビジュアルリグレッションテストの実行 ハマったところ 結果どうなったか reg-suitの結果画面 今後の改善・取り組みたいこと 背景 ビジュアルリグレッションテストを導入する前に、UIに大きく影響する改修がありました。 影響

こんにちは！スマートキャンプでインサイドセールスに特化した SaaSを作っているエンジニアの中川です。 上記プロダクトのフロントエンドは Vue.js を用いて開発しているのですが、 その中で SFC 内のtemplateタグで使用していた Pug をやめて HTML に移行した件をこの記事ではお話しようと思います。 また、実際にtemplateタグに ESLint を効かせてみて発覚したエラーや警告のなかで数が多かったものや、これから Vue 3 に移行していく上で対応する必要があったルールを紹介します。 背景 eslint-plugin-vue が効かない チームに Pug 推進派がいない Pug を HTML に移行するには Vue 3 に準拠した Lint ルールを導入する Lint を実行してみる 対応した目ぼしいルール vue-require-v-for-key vue/val

スマートキャンプの20卒エンジニアの高砂です！ 皆さんは、JavaScriptにおける絵文字の扱われ方が難しい事をご存知ですか？ 本記事では、その背景と適切な方法を解説していきます！ JavaScriptにおける絵文字の問題点 問題点の再現 問題点の背景 絵文字を適切に扱う方法 まとめ JavaScriptにおける絵文字の問題点 JavaScriptで文字数カウントを実装する際、素直に考えると下記のようなコードになるかと思います。 const text = 'おはよう😊' console.log(text.length) しかし、実は「絵文字が含まれている文字列は.lengthでは適切にカウントできない」という問題点があるのをご存知でしょうか？ 実際にご覧頂くのが早いと思うので、CodePen様をお借りして文字数カウントをしてくれるアプリを簡単に作ってみました。 以下に置いておきますので

こんにちは、 https://boxil.jp を作っている徳田です。 今回は技術共有ミーティングであるSMARTCAMP Tech Talk、通称「STT」と、Stay Home環境下でのコミュニケーション施策について紹介します。 SMARTCAMP Tech Talkについて はじまった経緯 準備するKibelaのイメージ 数回開催した結果 他: 在宅勤務でのコミュニケーション施策について プロダクト本部 夜会 メンバ間1on1 SMARTCAMP Tech Talkについて 2週間〜1ヶ月ぐらいの頻度で開催される、エンジニア達がそれぞれ興味のある技術ネタを持ち寄って紹介するミーティングです。 用意されたKibelaにそれぞれが事前に紹介したい内容を書いておき、それをもとにワイワイ話します。 持ち時間は一人5分程度、ラフなLT大会のようなノリで実施しています。 はじまった経緯 スマート

スマートキャンプ、プロダクトマネージャーの郷田です。 弊社スマートキャンプのセールスチームに、開発チームで行っているKPTによる振り返りを導入してみました。 この記事では実際にKPTを導入するまでの背景と流れ、また実施してみたセールスチームからの感想を紹介いたします。 きっかけ 何ができるか考える やってみた 心理的安全性の説明 リーンコーヒー KPT セールスチームによるKPTの感想 セールスチームに導入してみて まとめ きっかけ ある日に1日かけて、ボードメンバーとセールスチームのマネージャー数名と共に、BALES（自社サービス）の現在のアウトカムの設定・ターゲットの詳細化・仮説の設定などを行うMTGでファシリテーターをさせていただく機会がありました。 ディスカッションの準備から関わらせてもらったため、参加されてた方からは「フレームワークを使いふわっとしたことを整理するのが得意な人」と

スマートキャンプ、エンジニアの入山です。 突然ですが、みなさんはAmazon ECSを利用したことはありますか？ コンテナで開発したアプリケーションをフルマネージドで運用してくれるECSですが、その環境構築を簡単に一括で行ってくれるサービスAWS Copilotが先日発表されました！ AWS Copilotでは、ECSの環境構築だけでなく、GitHubと連携したCI/CDの構築もできるようになっており、AWSやCI/CDの知識や知見がなくとも手軽にコンテナでのサービス立ち上げができます。 AWS Copilotを利用したECSの環境構築については、AWS公式のブログで詳しく紹介されていたので、今回はAWS Copilotを使ったGitHubと連携したCI/CDパイプライン構築を中心に紹介したいと思います！ aws.amazon.com AWS Copilot とは AWS Copilotで

こんにちは。プロダクト本部で本部長（開発に関わる部署のマネージャー的な役割）をしている米元です。 弊社では昨年から技術顧問としてヨシオリさんに参画して頂いております。 今回はヨシオリさんにこれまでどんな形で関わって頂いたのか、スマートキャンプがどのように見えるのかを話して頂きました。 ​ 最初に自己紹介をお願いします！ 技術顧問を始められた背景を教えてください 試行回数を増やしたい 視野を広げたい 技術顧問として開発チームとどんな関わり方をしていただいていますか？ スマートキャンプ開発チームの印象はいかがでしょうか？ 全体的な印象 良いところ 改善点/足りない点 スマートキャンプで活躍できそうなはどんな人でしょうか 開発チームへの今後の期待をお願いします！ まとめ 最初に自己紹介をお願いします！ 庄司嘉織といいます。 インターネット上でも twitter.com/yoshiori とか y

ボクシルのプロダクトマネージャーをしている笹原です。 今年頭からエンジニアではなくプロダクトマネージャーに業務内容をシフトしています。 しかし、エンジニアブログは技術ネタを書こうかと思い、表題の件をサクッと試してみました。 AWS Client VPNとは AWS Client VPNのクライアント認証とユーザー管理 AWS SSOとは AWS SSOでのカスタムSAML2.0アプリケーションの追加 SAML2.0認証を利用したAWS Client VPNエンドポイントの作成 実際に使ってみる まとめ AWS Client VPNとは AWS Client VPNとは、AWSが提供しているクライアントベースのマネージドVPNサービスです。 マネージドなVPNサービスということでリモートワークが増えた今年から利用も増えているのではないかと思います。 詳しく知りたい方は、以下の記事を御覧くださ