はじめに ラボルのフロントエンドエンジニアの寺岡です。 最近、ラボルで受付システムを自社開発しました。 オフィスの受付でよく見る、来訪者がタブレットで社員を呼ぶやつですね。 このアプリケーションをNuxt × Amplifyの技術を使い、ほぼフロントエンドのみの技術で、実装からリリースまで行ったので、今回はその経緯の共有記事となります。 主に、以下の方に向けた記事となっております！ フロントエンド完結で、アプリケーションをデプロイする方法を知りたい方 ラボルの開発者は、何を考えて解決策を講じているかを知りたい方 開発者にとって、ラボルはどのような環境かを知りたい方 目次 はじめに 目次 内製化…

アプリケーション開発でGeneral logを用いた複雑なテストデータの作成（MySQL） ラボルでバックエンド担当している川村です。 複雑なアプリケーション開発において以下をしたい時、事前にテストデータを準備しないといけない場面が多々あると思います。 〇〇機能を試したい 〇〇機能のテストしたい 新規機能の開発したいが、その機能開発するまでに、前提となる状態を作りたい（会員登録済みアカウントの発行など） 複雑なプリケーションだとテストデータを作るだけでも、かなり骨が折れる作業となります。 簡単なアプリケーションであればテーブル構造を見るだけで作れそうではありますが、 複雑なアプリケーションでは…

こんにちは。ラボルのバックエンドエンドエンジニアの中垣です。 この記事はClojureを知ってる前提で書いてます。Clojureを知らない人はClojureをやってみるのをおすすめします。楽しいですよー。最初はBrave Clojureで基本を学べます。 この記事では、ClojureでBabashkaと呼ばれるツールを使用してBashスクリプトを書く方法を紹介します。普段Bashスクリプト書かないけどClojure好きな人におすすめです。Clojureを使う機会が増えますよ。 僕はBabashkaを使ってこんな感じなことをやってます。 Build toolでやっていること 開発環境のセットアッ…

はじめに こんにちは、新卒2年目のバックエンドエンジニアの伊藤です。 みなさんは、テーブル作成の際にCOLLATEを意識していますか？ 文字の比較を行う際に文字コードと共に利用される要素のことをCOLLATEと呼び、 CHARSET毎に、デフォルトで設定されているため、意識しない人もいると思います。 ただ、このCOLLATEの設定を間違えると、欲しいデータを得られなかったり、意図しないデータを取得してしまいます。 本記事ではutf8mb4のCOLLATEについて、説明していきます。 なぜ、utf8mb4なのかについてはこちらの記事を読んでください。 utf8mb4のCOLLATEについては下記…

はじめに こんにちは🧑‍💻 ラボルのUIデザイナー/フロントエンドエンジニアの寺岡です。 今回はVue開発者向けの記事になります。 Vue2のバグ修正・セキュリティアップデートが、2023年12月31日に終了することをご存知でしょうか？ ja.vuejs.org これ受けて、ラボルのフロントエンドチームは、Vue2→Vue3にアップデートする移行作業をこの半年間実施していました。 今回の記事は、その移行作業の目的や手順、2→3の変更点など、これから作業する方に向けたものになります。是非ご一読ください。 目次 はじめに 目次 Vue3移行の目的 Vue3移行の手順 Vue2(旧)コード Vue3…

はじめに こんにちは、ラボルのフロントエンドエンジニアのchi-satoです。 ラボルでは、フロントエンドのフレームワークでVue.jsを使用しているのですが、2023年12月末でVue2のサポートが終了するため、Vue3へのリプレイスを進めてきました。 その中で、Vue2で使っていたツールチップの実装がVue3では使えなくなってしまったので、Vue3でも対応できるようにライブラリをアップデートしました。そのため今回は、アップデート後のツールチップのライブラリ「floating-vue」についてと、より楽に実装するための方法をご紹介します！ floating-vueを使うことになった経緯 Vu…

はじめに こんにちは、ラボルのフロントエンドエンジニアのchi-satoです。 ラボルでは先日、Vue3/TypeScriptのプロジェクトにESLint/Stylelint/Prettierを導入しました。 そこで、今回は ESLint/Stylelint/Prettierとは? 導入前のラボルの開発環境の課題 導入後の恩恵 導入手順 について紹介します！ ESLint/StyleLint/Prettier とは？ ESLint/Stylelint/Prettierはコーディングルールのチェックとコード整形を効率的に行うことができるツールです。 それぞれのツールを説明します。 ESLint …

こんにちは、新卒2年目のバックエンドエンジニアの伊藤です。 みなさんは、テーブル作成の際にCHARACTER SET(charset)を意識していますか？ 環境によっては、デフォルトで設定されていることもあり、意識しない人もいると思います。 ただ、このcharsetの設定を間違えると、特定の文字が使えないや絵文字が使えないなどといった問題が発生してしまいます。 タイトルにもある、MySQLでは使用できるcharsetを下記のコマンドで確認することができます。 -- MySQL version8.1.0 SHOW CHARACTER SET; +----------+--------------…

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

はじめに こんにちは🧑‍💻 ラボルのUIデザイナー/フロントエンドエンジニアの寺岡です。 今回は「GSAP」というアニメーション制作ライブラリの紹介になります。 Webサイトに動きのあるデザインを実装したいな〜と思っている方にオススメです。 目次 はじめに 目次 GSAPとは？ UIアニメーションの必要性 GSAPを導入する理由 1. アニメーションの実装難易度が低い 2. アニメーションの管理がしやすい 3. 安定性がある GSAPのインストール方法 CDNの場合 npmの場合 yarnの場合 基本的な実装例 Method Property Easing Handling Stagger T…

ラボルの川村です。 この度学生ハッカソン用に、 BackendのAPIとしてSpringBoot3、FrontendとしてNuxt3を用いた認証付きCRUD操作が可能なサンプルプロジェクト を作成したので紹介します！コードはGitHubにあげてます。 github.com この記事では、サンプルプロジェクトがどのようなシステム構成となっているかや、どういう機能があるかなどを紹介していきます。 また、どのようにサンプルプロジェクトを作っていったかも解説していくので、SpringBootの我流サンプルプロジェクト作ってみたい！という人はぜひ参考にしてください。 サンプルプロジェクトの紹介 システム…

こんにちは、新卒2年目のバックエンドエンジニアの伊藤です。 ラボルでは先日、デプロイツールをJenkinsからAWSのCodePipelineに変更しました。 今回の記事では、その移行の際に自分が起こしてしまった不具合について体験談について書いていきます。 起きた不具合 発生した不具合はデプロイしても一部変更が反映されないというものです。 この不具合は、ブラウザがトランスパイル後のjsを使用する際に、 サーバーから取得したものを使用せずブラウザキャッシュにあるものを利用していたため発生しました。 下記の画像のように、クエリパラメータが同じ場合サーバからは304が返されブラウザにあるキャッシュが…

ラボルの川村です ところでssh config書いてますか？ ~/.ssh/config に羅列しまくってて見通し悪くなってるんじゃないですか？ 実はいい感じにファイル分割して、グルーピングできるんですよ。 （そんなに接続先多い人も少なそうですが...自分は多いので、この設定役立ってます） と言っても実は簡単で、ssh configではincludeが使えるのでそれでファイル読み込むだけです。 少し脱線しますが、数年前自分は5個くらいプロダクトを担当してて、それぞれ開発環境・本番環境などなど接続先が大量にありました。 当時はconfigに羅列してたんですが、いい感じに管理できてなかったので、汚…

こんにちは！ ラボルのUIデザイナー/フロントエンドエンジニアの清野です。 UA(UniversalAnalytics)で今までサイト分析をしてきたけど、GoogleAnalytics4(GA4)こんなに変わってどうしちゃったんだよって思ってるみなさん。 私も一緒です 今回は、UAでもよく分析されていたのではと思われる確認方法を5つ紹介したいと思います。 これが分かれば自分のサイトの状況が把握できること間違いなし！ お役に立てますように 今回紹介する分析方法 どんなユーザーが多いか(性別、年齢、興味関心、地域など) ユーザーが使用しているデバイスやOSは何か サイトを初めて訪れたユーザーの流入…

こんにちは、新卒2年目のバックエンドエンジニアの伊藤です。 1年間の開発経験を経て、先日AWS上での設定から実装までを初めて経験しました！ 今回は、ラボルで利用しているメール配信ツールをMailtrainに切り替えるために、AWS上での構築を行った経験について共有します。 背景 ラボルでは以前から利用していたメール配信ツールが処理速度の面で問題があり、運用者からの苦情がきていました。具体的には、メール作成ページに遷移する際にタイムアウトになるほどです。 そのため、私はMailtrainを採用することにしました。Mailtrainは手軽に実装できるだけでなく、必要な要件をすべて満たしていました。…

labolの川村です 皆さんは自分たちのシステムでモニタリングはされてますか？ おそらく大抵の場合システムのモニタリングが実施されていることでしょう。 外形監視やCPU/メモリなどのリソース監視などたくさん監視対象があり、アラート設定なども数多くされていると思います。 今回は上記のようなシステム中心のモニタリングではなく、ユーザー中心の「リアルユーザーモニタリング」について話していきます。 labolではAWS CloudWatch RUMを用いてリアルユーザーモニタリングを実施し日々改善を行っています。 リアルユーザーモニタリングとは？ 一般的にリアルユーザーモニタリング（以下RUM）は、 …

こんにちは、ラボルの@naoki_m05です。 @lbl_teraokaがローカルで起動しているWebサーバーをインターネットに公開するツールであるngrokの紹介をしていますが、ngrokの代替ツールでありOSSでもあるExposeを使ってみたので、それの紹介をしたいと思います。 Exposeとは なぜExposeなのか Exposeのサーバ経由でインターネットに公開する方法 インストール方法 アカウント作成とトークン取得 トークンの設定 ローカルにWebサーバー立てる 公開 自前のサーバ経由で公開する方法 トンネリングするためのサーバを自前で立てる 設定の追加 自前で立てたサーバでトンネリ…

はじめに こんにちは🧑‍💻 ラボルのUIデザイナー/フロントエンドエンジニアの寺岡です。 みなさんは開発環境を開発者以外の人に共有したい時、どのようなやり方をしてますでしょうか？ 本番環境以外の確認用の環境があればいいですが、新規開発などではそこまで整備されていないでしょうし、デプロイに時間がかかったりと色々手間ですよね。 今回紹介するngrokというツールを使えば、開発環境を素早く・安全に公開できます！ 開発者以外の人に表示確認してもらうには、中々手軽な手段なので是非ご一読ください。 目次 はじめに 目次 ngrokでできること 手順 インストール 1. ngrokに会員登録 2. ngro…

はじめに こんにちは🧑‍💻 ラボルのUIデザイナー/フロントエンドエンジニアの寺岡です。 今回はVue3から新しく使えるようになったComposition APIと、既存のOption APIの比較記事です。 Composition APIは何ができるようになったのか？どういった場面でメリットを感じるのか？を紹介していきます！ 目次 はじめに 目次 どんな人向けの記事か CompositionAPIとは？ 特徴 バージョン CompositionAPIのメリット 機能の再利用が可能 可読性が高くなる テストがしやすい CompositionAPIのデメリット データの参照が冗長 複雑なComp…

はじめに こんにちは🧑‍💻 ラボルのUIデザイナー/フロントエンドエンジニアの寺岡です。 早速ですがフロントエンドのみなさん、フォームのリアルタイムバリデーションってどのように実装されてますでしょうか？ リアルタイムバリデーションとは、入力時やフォーカスアウト時に入力内容のチェックを行い、OKかNGかの結果をリアルタイムに表示する以下のようなフォームのことですね。 出典: Form Validation GIF 「あるフォームの400エラーが著しく多い」などの問題がある場合、UX改善として実装する機会があるかと思います。 というわけで、今回はリアルタイムバリデーションの実装方法についての記事に…

はじめに こんにちは🧑‍💻 ラボルのUIデザイナー/フロントエンドエンジニアの寺岡です。 みなさんFigmaは使っていますか？ 最近、UIデザインツールとしてトレンドであり、ラボルもUIデザインはFigmaを採用しています。 そんなFigmaですが、ただUIデザインを作るだけにとどまらず、変更に強いUI管理ツールとしての使い方ができます。 今回はそんなFigmaの、変更に強いデザインを実現するための素晴らしい機能を紹介します。 目次 はじめに 目次 今回紹介する機能 Component機能 Auto Layout機能 formのUIを作ってみよう！ 今回作るUIデザイン Component編 …

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

はじめに こんにちは🧑‍💻 ラボルのUIデザイナー/フロントエンドエンジニアの寺岡です。 みなさんはアコーディオンUIのデザイン・コーディングはどのようにしてますでしょうか？ よくある質問とかに使われる、こういったUIですね。 「情報を階層的に定義する」・「コンテンツの高さをコンパクトにする」といった目的でアコーディオンUIは用いられますが、 デザイン・コーディングに関して初学者の方は、以下の問題点が生じると思います。 デザイン問題点: アコーディオンのUIをどのようなデザインにすべきかわからない コーディング問題点: 開閉の処理をどのように実装するのかわからない 本記事では、これらをデザイン…

こんにちは、ラボルの@naoki_m05です。 ラボルでは、フロントエンドにVue.jsを使用しているのですが、コードレビューにて「ここはdataじゃなくてcomputedにした方がいいよ」という指摘がこれまでで10回以上ありました。 suggestion getCurrentYear()はcomputedで書き換えたほうが、記述も減るし勝手に算出してくれるのでいいですよ question: これって変更できていいんですか？変更できちゃだめな気がするのでcomputedがしっくりきます。 nitpick: flag系のdataはなるべく増やさないって感じじゃなかったですっけ？computed使…

こんにちは！！ 新卒1年目の伊藤です。 今回の記事では、私がしてしまったALTER文にまつわる失敗とその再発防止に役立つIntelliJの機能を紹介していきます。 私がした失敗の再現 私が当時した失敗をsampleテーブルを用いて紹介します。 やりたかったことは既存のテーブルにAUTO_INCREMENTの追加です。 他の制約やCOMMENTについて変更は加えません。 /*テーブル作成*/ CREATE TABLE `sample` ( `id` bigint(20) NOT NULL COMMENT "識別ID", `name` varchar(40) DEFAULT NULL COMMEN…

はじめに こんにちは🧑‍💻 ラボルのデザイナーの寺岡です。 突然ですが、デザイナーのみなさん。名刺データってどうやって管理・作成してますか？ 僕は今までスプレッドシートでテキストを管理して、Illustrator(デザインファイル)で情報を入力していく、という作成方法でした。 スプレッドシートを見ながらイラレの中でレイヤーを複製して、名前やメアドとかを手動でカタカタ…といった作業でした。 まぁ、社員数も少ないし変更も数ヶ月に1回なので、このままの運用方法でいいかと思ってました。 しかし、今後は弊社は採用に力を入れていくつもりです。そうすれば当然、名刺作成作業の頻度は増えるはずです。 新入社員の…

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

こんにちは。ラボルのかわむらです。 ラボルでは、定期的に「システム障害対応訓練」を実施しています。 今回は、なぜそのような訓練を始めたのか、どういう感じで訓練しているのか、どのような成果が得られているのかについて紹介していきます。 なぜ訓練を始めたのか どういう感じで訓練をしているか システム障害に関することを明文化 対応フロー ロール分けについて 司令塔 作業員 記録係 システム障害指標 実施している訓練について どのような成果が得られたか 未然に防げる障害をピックアップできる 現在使っているシステムのサブ機能について深く知れる 単純に楽しい 最後に なぜ訓練を始めたのか 訓練を定期実施して…

こんにちは。ラボルのかわむらです。 金融サービス事業のlabolのシステムでは、定期的にいろいろなバッチ処理が「ECS Scheduled Tasks」上で動いているんですが、 それを「CloudFormation nested stack(以降CFn nested stack)」を導入して、簡単安全に追加・修正・削除できるようにしてみたので、導入背景等々も踏まえて解説していきます。 labolの定期バッチはECS Scheduled Tasksで実行されている CFn nested stackの導入背景 コード管理ができてない 属人性が高い 共通設定をするのが大変 環境変数の設定が消えてしま…

みなさん初めまして、株式会社ラボルCTOの町田(@naoki_m05)です。 タイトルの通り、テックブログを始めることにしたのですが、そもそも株式会社ラボルについてまだ知らない人も多いと思うので、まず最初に簡単に説明させていただきます。 株式会社ラボルとは？ 株式会社ラボルは、株式会社セレスの金融サービス事業のlabolとメディア事業の資金調達プロという2つのプロダクトを担うチームが子会社として独立して誕生した会社です。 金融サービス事業のlabol(https://labol.co.jp) 2020年07月に資金調達メディアである資金調達プロから多角化して生まれたプロダクトです。リリース以降…