らぼるてっく。

てっくてっく歩いてっく。

Nuxtで受付システムを内製化しAWS Amplifyにデプロイしました!

はじめに ラボルのフロントエンドエンジニアの寺岡です。 最近、ラボルで受付システムを自社開発しました。 オフィスの受付でよく見る、来訪者がタブレットで社員を呼ぶやつですね。 このアプリケーションをNuxt × Amplifyの技術を使い、ほぼフロントエンド…

アプリケーション開発でGeneral logを用いた複雑なテストデータの作成(MySQL)

アプリケーション開発でGeneral logを用いた複雑なテストデータの作成(MySQL) ラボルでバックエンド担当している川村です。 複雑なアプリケーション開発において以下をしたい時、事前にテストデータを準備しないといけない場面が多々あると思います。 〇〇…

Babashkaを使えばClojureでShell Script作れるよ

こんにちは。ラボルのバックエンドエンドエンジニアの中垣です。 この記事はClojureを知ってる前提で書いてます。Clojureを知らない人はClojureをやってみるのをおすすめします。楽しいですよー。最初はBrave Clojureで基本を学べます。 この記事では、Cloju…

utf8mb4のCOLLATEの違いについて

はじめに こんにちは、新卒2年目のバックエンドエンジニアの伊藤です。 みなさんは、テーブル作成の際にCOLLATEを意識していますか? 文字の比較を行う際に文字コードと共に利用される要素のことをCOLLATEと呼び、 CHARSET毎に、デフォルトで設定されている…

ラボルで実施した、Vue2→Vue3移行手順と注意点を公開します!

はじめに こんにちは‍ ラボルのUIデザイナー/フロントエンドエンジニアの寺岡です。 今回はVue開発者向けの記事になります。 Vue2のバグ修正・セキュリティアップデートが、2023年12月31日に終了することをご存知でしょうか? ja.vuejs.org これ受けて、ラボ…

Vue2のv-tooltipからVue3のfloating-vueへの移行

はじめに こんにちは、ラボルのフロントエンドエンジニアのchi-satoです。 ラボルでは、フロントエンドのフレームワークでVue.jsを使用しているのですが、2023年12月末でVue2のサポートが終了するため、Vue3へのリプレイスを進めてきました。 その中で、Vue2…

入社8ヶ月目の若手エンジニアがVue3/TypeScriptのプロジェクトにESLint/Stylelint/Prettier を導入した話

はじめに こんにちは、ラボルのフロントエンドエンジニアのchi-satoです。 ラボルでは先日、Vue3/TypeScriptのプロジェクトにESLint/Stylelint/Prettierを導入しました。 そこで、今回は ESLint/Stylelint/Prettierとは? 導入前のラボルの開発環境の課題 導…

MySQLでUTF-8を扱うならutf8mb3よりutf8mb4を使おう!

こんにちは、新卒2年目のバックエンドエンジニアの伊藤です。 みなさんは、テーブル作成の際にCHARACTER SET(charset)を意識していますか? 環境によっては、デフォルトで設定されていることもあり、意識しない人もいると思います。 ただ、このcharsetの設定…

JavaのOptionalとかを使ったらNull Safeなコードにできるよ

コード書けたあとに実行してみたらNullPointerExceptionが起きるのいやですよね。なので今回はNull Safeなコードにする方法を書きます。

GSAPで高度なアニメーション実装

はじめに こんにちは‍ ラボルのUIデザイナー/フロントエンドエンジニアの寺岡です。 今回は「GSAP」というアニメーション制作ライブラリの紹介になります。 Webサイトに動きのあるデザインを実装したいな〜と思っている方にオススメです。 目次 はじめに 目…

学生ハッカソン用にSpringBoot3とNuxt3でSPAのサンプルアプリケーションを作ったよ

ラボルの川村です。 この度学生ハッカソン用に、 BackendのAPIとしてSpringBoot3、FrontendとしてNuxt3を用いた認証付きCRUD操作が可能なサンプルプロジェクト を作成したので紹介します!コードはGitHubにあげてます。 github.com この記事では、サンプルプ…

AWS CodePipelineへ移行した時の失敗から得た学び

AWS

こんにちは、新卒2年目のバックエンドエンジニアの伊藤です。 ラボルでは先日、デプロイツールをJenkinsからAWSのCodePipelineに変更しました。 今回の記事では、その移行の際に自分が起こしてしまった不具合について体験談について書いていきます。 起きた…

ssh config の接続先をファイル分割してグルーピングしてみたよ

ラボルの川村です ところでssh config書いてますか? ~/.ssh/config に羅列しまくってて見通し悪くなってるんじゃないですか? 実はいい感じにファイル分割して、グルーピングできるんですよ。 (そんなに接続先多い人も少なそうですが...自分は多いので、こ…

UAでよく見ていた内容をGA4でみるには?サイト分析5選!

GA4

こんにちは! ラボルのUIデザイナー/フロントエンドエンジニアの清野です。 UA(UniversalAnalytics)で今までサイト分析をしてきたけど、GoogleAnalytics4(GA4)こんなに変わってどうしちゃったんだよって思ってるみなさん。 私も一緒です 今回は、UAでもよく…

新人エンジニアがAWS上でOSSのメール配信システム Mailtrainを構築

AWS

こんにちは、新卒2年目のバックエンドエンジニアの伊藤です。 1年間の開発経験を経て、先日AWS上での設定から実装までを初めて経験しました! 今回は、ラボルで利用しているメール配信ツールをMailtrainに切り替えるために、AWS上での構築を行った経験につい…

リアルユーザーモニタリングとは?CloudWatch RUMでサービス改善をがんばる

AWS

labolの川村です 皆さんは自分たちのシステムでモニタリングはされてますか? おそらく大抵の場合システムのモニタリングが実施されていることでしょう。 外形監視やCPU/メモリなどのリソース監視などたくさん監視対象があり、アラート設定なども数多くされ…

トンネリングツールのExposeを使ってみた

こんにちは、ラボルの@naoki_m05です。 @lbl_teraokaがローカルで起動しているWebサーバーをインターネットに公開するツールであるngrokの紹介をしていますが、ngrokの代替ツールでありOSSでもあるExposeを使ってみたので、それの紹介をしたいと思います。 E…

ngrokの使い方と運用方法

はじめに こんにちは‍ ラボルのUIデザイナー/フロントエンドエンジニアの寺岡です。 みなさんは開発環境を開発者以外の人に共有したい時、どのようなやり方をしてますでしょうか? 本番環境以外の確認用の環境があればいいですが、新規開発などではそこまで…

CompositionAPI vs OptionAPI

はじめに こんにちは‍ ラボルのUIデザイナー/フロントエンドエンジニアの寺岡です。 今回はVue3から新しく使えるようになったComposition APIと、既存のOption APIの比較記事です。 Composition APIは何ができるようになったのか?どういった場面でメリット…

Vue3を用いた「リアルタイムバリデーション」の実装方法

はじめに こんにちは‍ ラボルのUIデザイナー/フロントエンドエンジニアの寺岡です。 早速ですがフロントエンドのみなさん、フォームのリアルタイムバリデーションってどのように実装されてますでしょうか? リアルタイムバリデーションとは、入力時やフォー…

Figmaで作る、変更に強いWebデザイン

はじめに こんにちは‍ ラボルのUIデザイナー/フロントエンドエンジニアの寺岡です。 みなさんFigmaは使っていますか? 最近、UIデザインツールとしてトレンドであり、ラボルもUIデザインはFigmaを採用しています。 そんなFigmaですが、ただUIデザインを作る…

リモート開発で実現した僕のSemi-ultimate coding experience

PCが遅い問題を解決するため、ローカルPCの負荷をリモートサーバーに移すような環境を作りました。

アコーディオンUIのデザインからコーディングまで

はじめに こんにちは‍ ラボルのUIデザイナー/フロントエンドエンジニアの寺岡です。 みなさんはアコーディオンUIのデザイン・コーディングはどのようにしてますでしょうか? よくある質問とかに使われる、こういったUIですね。 「情報を階層的に定義する」・…

Vue.jsのコーディングスタイルとcomputedを使うべき理由

こんにちは、ラボルの@naoki_m05です。 ラボルでは、フロントエンドにVue.jsを使用しているのですが、コードレビューにて「ここはdataじゃなくてcomputedにした方がいいよ」という指摘がこれまでで10回以上ありました。 suggestion getCurrentYear()はcomput…

ALTER文を正しく安全に使うためのIntelliJの機能を紹介

こんにちは!! 新卒1年目の伊藤です。 今回の記事では、私がしてしまったALTER文にまつわる失敗とその再発防止に役立つIntelliJの機能を紹介していきます。 私がした失敗の再現 私が当時した失敗をsampleテーブルを用いて紹介します。 やりたかったことは既…

Illustratorの変数・アクションを活用して、CSVから名刺データを一括生成!

はじめに こんにちは‍ ラボルのデザイナーの寺岡です。 突然ですが、デザイナーのみなさん。名刺データってどうやって管理・作成してますか? 僕は今までスプレッドシートでテキストを管理して、Illustrator(デザインファイル)で情報を入力していく、という…

手動テストでコードカバレッジがほしい?IntelliJ's gotchu

IntelliJ っていいですよね。今回は IntelliJ のコードカバレッジを手動テストでも使えることがわかったので紹介します。

ラボルで定期実施しているシステム障害対応訓練について

こんにちは。ラボルのかわむらです。 ラボルでは、定期的に「システム障害対応訓練」を実施しています。 今回は、なぜそのような訓練を始めたのか、どういう感じで訓練しているのか、どのような成果が得られているのかについて紹介していきます。 なぜ訓練を…

CloudFormation nested stackを使ってECS Scheduled Tasksを簡単に設定する

こんにちは。ラボルのかわむらです。 金融サービス事業のlabolのシステムでは、定期的にいろいろなバッチ処理が「ECS Scheduled Tasks」上で動いているんですが、 それを「CloudFormation nested stack(以降CFn nested stack)」を導入して、簡単安全に追加・…

テックブログ始めました!!

みなさん初めまして、株式会社ラボルCTOの町田(@naoki_m05)です。 タイトルの通り、テックブログを始めることにしたのですが、そもそも株式会社ラボルについてまだ知らない人も多いと思うので、まず最初に簡単に説明させていただきます。 株式会社ラボルとは…