こんにちは久保田(@kubotak_public)です 先日の2021/06/23にNuxt道場というオンライン勉強会を開催しました。 macloud.connpass.com この勉強会は弊社でも扱っているフロントエンドのフレームワークであるNuxt.jsをテーマとした勉強会で、 株式会社Hajimariの三宅様、株式会社レアジョブの田原様を師範（登壇者）としてお迎えいたしました。 Nuxt道場はYoutubeLiveで配信したため、アーカイブとして現在でも視聴することができます。 Nuxt道場って何？

こんにちは。エンジニアの鈴木（yamotuki）です。 今回は本番や開発環境でエラーが起こったときに、効率よく対応ができるように Rollbar というツールを導入した話です。 Rollbar とは 公式はこちら JavaScriptやPHPで発生したエラー詳細をSlack通知してくれます。 通知や画面詳細ページは後述してあります。 導入目的 導入目的としては、フロントエンドのエラー検知とバックエンドサーバのエラー対応の簡素化の二つがあります。 1. フロントエンドのエラー検知 Universalモード（

こんにちは、久保田(@kubotak_public)です 今回は弊社で運用しているサービスであるM&Aクラウドのフロントエンドの実行環境をAWS LambdaからECS Fargateへ移行した話です。 まずは弊社のサービスが動いている環境は次のようになっていました。 フロントエンドにNuxt.js（JavaScript）、バックエンドにLaravel（PHP）を利用しています。 LaravelはAWS ElasticBeanstalkで作成されたEC2インスタンス上で動作しています。 そしてフロントエン

Nuxt.js化計画vol.6 第6弾です。 Nuxt.js化計画の概要についてはvol.1を参照ください。 また、過去のシリーズも通してリンクしているのでぜひ御覧ください。 tech.macloud.jp 今回はリプレースではなく、新規機能に伴う新しいページをNuxt.jsで構築しました。 かんたんM&A診断という機能です。 macloud.jp 7つの設問に答えることで売却したい会社・事業に対してマッチする買い手企業をレコメンドするという機能です。 今回はNuxt.js側では初の試みとしてABテストを

こんにちは。Ltech運営チームの井上です。 今回は、2021年3月2日(火)に開催した『Ltech#14 「LIFULL HOME'S」のフロントエンドについて語り尽くします！』についてレポートします。 事前に共有させていただいていたウェビナーのURLに誤りがあり入室できないというトラブルもありましたが、参加者の方の温かいフォローもあり、最終的には120名を超える方にご参加いただき会は大盛況で閉会することができました。ご参加いただいた皆様本当にありがとうございました！ lifull.connpass.c

はじめに DELISH KITCHENでは日々多くのレシピ動画を公開していますが、その動画は全てAdobe Premiere Pro(以下 Premiere Pro)を使用して編集しています。 今回はPremiere Proのエクステンションを作成して動画の編集効率を向上させた話をご紹介します。 これまで発生していた問題 レシピ動画にどのような材料を使っているか、どのような工程があるかは全てダッシュボード(データ管理用Webサイト)で管理しています。 動画編集者は動画データをPremiere Proに取り

プロダクトエンジニアリング部の佐藤です。 今回はLIFULLの開発において実際に使われている技術スタックの一例としてLIFULL HOME’S 引越し手続きを紹介いたします。 LIFULL HOME'S 引越し手続きとは Nuxt.js TypeScript Context Nuxt Community 認証 Nuxt 3に向けて まとめ LIFULL HOME'S 引越し手続きとは 住み替えの際、各事業者(電気・ガス・水道)の住所変更手続きを一括で申請できるサービスです。 主なシステム構成はこちらです。

こんにちは、スマートキャンプで BALES CLOUD を開発している中川です！ 昨年の 9 月に Vue.js のメジャーバージョンが 3 になりかれこれ半年ほど経ちますが、みなさんのプロジェクトでは移行が進んでいますか？ 私が普段開発している前述のプロダクトにも Vue.js の 2.x 系を採用しているのですが、利用している UI ライブラリが Vue3 に対応するのを待っている関係でまだ移行には至っておらず、 先んじて Lint のルールを Vue3 のものに切り替えて準備だけ進めているような状況

Nuxt.js化計画vol.5 第5弾です。 Nuxt.js化計画の概要についてはvol.1を参照ください。 また、過去のシリーズも通してリンクしているのでぜひ御覧ください。 tech.macloud.jp 徐々に弊社アプリケーションのフロントエンドもLaravelからNuxt.jsに移行しています。 今回は成約事例一覧とM&Aお役立ち資料ページがめでたくNuxt.js化されました。 実は今までNuxt.jsによる動的なルーティングは使っていませんでした。 今回のリニューアルのタイミングで個別のページはN

こんにちは。エンジニアの濱田（ @hamakou108 ）です。 先日、あるモーダルをサイトの各所で別々の条件によって表示する機能を Nuxt.js + TypeScript で実装する機会がありました。 このときの設計が他の場面でも応用できそうな知見としてまとめられそうだったので、この記事で紹介したいと思います。 話さないこと Vue.js (Composition API), Nuxt.js, TypeScript の基本的な使い方 時間計算などの細かいアルゴリズムの実装 背景 M&Aクラウドでは M

この記事は モバイルファクトリー Advent Calendar 2020 17日目の記事です。 こんにちは、エンジニアの shioiyan です。 モバイルファクトリーには部活動制度があり、いくつもの部活動が存在しているのですが、自分はそのうちのゲームジャム部に所属しています。 今年2月から弊社はリモートワークになりましたが、ゲームジャム部はビデオ通話を使って活動を継続しています。 近頃、外出自粛している人が増えた中でも、ビデオ通話で話しながら楽しく遊べるサービスを作ろう！ということで部活を通じて、We

こんにちはdelyでサーバーサイドエンジニアをしているyamanoiです この記事は「dely #2 Advent Calendar 2020」の12日目の記事です。 adventar.org adventar.org 昨日は @yochidros さんの「KMMでiOS・Android
を共通化しよう」でした。 みなさんwebサイトを作成する時にSPAを利用していますか？ SPAはユーザーに対してメリットが大きいですが、SEO観点やOGPタグのレンダリング等で SSRが避けられない場面に出くわすことがあ

この記事は モバイルファクトリー Advent Calendar 2020 9日目の記事です。 こんにちは、ブロックチェーンチームの新卒エンジニア id:charines です。 Nuxt.jsにおけるasyncDataの役割 ブロックチェーンチームでは、Nuxt.jsのサーバーサイドレンダリング機能を用いた開発を行っています。 asyncData はページの読み込み時に、返されたPromiseの値をコンポーネントの data にマージするためのフックで、ページの移動やエラーページの表示はPromiseの

DELISH KITCHEN WEBについて はじめに はじめまして。DELISH KITCHENバックエンドチームの梅木です。 DELISH KITCHENのバックエンドチームはアプリ向き合いとWEB向き合いのチームとで別れており、自分はWEB向き合いのチームに配属されています。 担当業務としては、DELISH KITCHENのWEBフロントの開発はもちろん、APIサーバーやインフラと、WEBサービスに関しての改修では境界を設けずに、開発・運用・監視を日々行なっています。 本日はDELISH KITCH

この記事は モバイルファクトリー Advent Calendar 2020 1日目 の記事です。 こんにちは、ブロックチェーンチームでソフトウェアエンジニアをしている id:odan3240 です。最近会社で使っていた椅子と同じモデルの椅子を購入して QoL が上がっています。 認証に Cookie を使用している API を叩いてサーバサイドレンダリング (以下 SSR) する場合、SSR 時にも認証を通しておく必要があります。 Nuxt.js において、API リクエストを行うライブラリとして nux