RAKUS Developers Blog | ラクス エンジニアブログ

株式会社ラクスのITエンジニアによる技術ブログです。

フロントエンド

【初学者向け】CSR / SSR / SSG / ISRとは?架空アプリでレンダリング手法の違いを理解しよう!

初めまして!新卒1年目のmochi_proteinと申します。 CSR / SSR / SSG / ISRがどのような概念か、 架空アプリを例として、それぞれの違いを初学者向けにやさしく解説していきます! 目次は以下の通りです はじめに 架空アプリ「楽楽鮮魚」の仕様 前提知識 レ…

OpenAPI Specificationを導入するまでの苦労と失敗、その後の効果

はじめに 対象読者 TL;DR OpenAPI Specificationとは OASを導入することの何が嬉しい? 1. プロダクトごとにAPI仕様書を記述するツールやフォーマットがバラバラでスイッチングコストがかかる 2. 記述量が増えると動作が重くなる 3. API仕様変更の伝達漏れの…

【Playwright】v1.4系の新機能まとめ

こんにちは、フロントエンド開発課所属のkoki_matsuraです! 本記事では、E2EテストライブラリであるPlaywrightのv1.40 ~ 最新版v1.43で追加された機能の中から僕の独断と偏見でいくつかを紹介したいと思います。 では早速、紹介していきます! 以下は目次で…

TypeScript5.4の新機能をピックアップ

はじめに こんにちは。フロントエンド開発課に所属している新卒1年目のm_you_sanと申します。 3月6日にTypeScript5.4がリリースされました。 そこで、今回は個人的に気になった機能についてピックアップして紹介したいと思います。 はじめに 型の絞り込み No…

次世代フレームワークRemixで簡単なフルスタック開発を体験する

はじめに こんにちは。フロントエンド開発課に所属している新卒1年目のm_you_sanと申します。 最近話題のRemixを使って、シンプルなTodoアプリを作成する方法をご紹介します。 Todoアプリの作成を通じて、簡単なフルスタック開発を体験していただければと思…

【GitHub】チームの情報粒度を揃えるためのissue formsテンプレートの作り方

はじめに こんにちは。フロントエンド開発課に所属している新卒1年目のm_you_sanと申します。 今回はissue formsを使ってGitHub Issuesのテンプレートを作成する方法について、紹介したいと思います。 はじめに issue formsとは?導入するメリットは? 作り方…

【TypeScript】inferで型情報を取得する

はじめに こんにちは。フロントエンド開発課に所属している新卒1年目のm_you_sanと申します。 今回はTypeScriptのinferについて紹介したいと思います。 はじめに inferとは? 具体的な使用例 関数の戻り値の型を推論する Promiseの内部の型を推論する 配列の…

【Playwright】ココがスゴいぜ!Playwright Component Test!

こんにちは。フロントエンド開発課所属のkoki_matsuraです。 今回はPlaywrightのコンポーネントテストについて個人的な意見を書いています。 目次は以下の通りになっています。 はじめに 導入方法 Playwright Component Test Runner のスゴい点 コンポーネン…

【React】チュートリアルから学ぶZodの基本

はじめに こんにちは。フロントエンド開発課に所属している新卒1年目のm_you_sanと申します。 実務でZodを使う機会が多いので、基本から理解しようと思い、チュートリアルに取り組んでみました。 今回はZodの基本について、チュートリアルのコードを交えて解…

【Grit 入門】GritQL触ってみた。

こんにちは。フロントエンド開発課のkoki_matsuraです。 今回はX(旧Twitter)で話題になっていたポスト(旧ツイート) を見て、実際にGritのチュートリアルを通して触ってみたので、備忘録的な感じで軽くGritの概要やクエリ言語であるGritQLの基礎的な構文を紹…

【React】tanstack table + MUIでチェックボックス付きのテーブルを作る

はじめに こんにちは。フロントエンド開発課に所属している新卒1年目のm_you_sanと申します。 実務でtanstack tableを使う機会があり、便利に感じたので紹介させていただきます。 目次は以下の通りです。 はじめに tanstack tableとは 使い方 サンプルデータ…

【React】Reactのメモ化について~React.memo・useCallback~

はじめに 初めまして、新卒1年目のm_you_sanと申します。 初学者向けにReactにおけるメモ化の方法を簡単に紹介させていただきます。 目次は以下の通りです。 はじめに そもそもメモ化って? メモ化の方法 React.memo 使用例 注意点 useCallback 注意点 まとめ

ラクスフロントエンド開発課が測定するWebパフォーマンス指標と測定方法

はじめに はじめまして、ラクスフロントエンド開発課の斉藤です。 普段フロントエンド開発課では、一部のプロダクトにおいて新しく開発した機能を実装した画面や、パフォーマンスの劣化が懸念される画面に対して、性能計測を行っています。今回はフロントエ…

【E2Eテスト】ページオブジェクトモデルを使ったらメンテ地獄から解放された話

こんにちは!フロントエンド開発課のkoki_matsuraです。 この記事では、僕が開発に携わっている製品のE2Eテストに取り入れたページオブジェクトモデル(POM)という実装パターンの概要と取り入れたキッカケ、POMへリファクタリングする簡単な例をご紹介させて…

【Playwright 入門】Playwrightで始めるE2Eテスト

はじめに こんにちは!フロントエンド開発課のkoki_matsuraです。 この記事では、E2Eテストフレームワークとして用いられるPlaywrightのインストールといくつか基本的なテストコード、最後に拡張機能についてもご紹介させていただきます。これからPlaywright…

Laravel Viteを使ってTailwind CSSを導入する

こんにちは。配配メール開発課のmoryosukeです。 最新のLaravelではデフォルトのフロントエンドビルドツールがLaravel MixからLaravel Viteへと移行しました。 そこでTailwind CSSをビルドする手順を追いながらLaravel Viteに慣れていこうと思います。 Larav…

OAuth2.0認証クライアントを自前実装で導入してみる【SolidStart+OAuth2.0+Box】

こんにちは。新卒2年目のrksmskです。 今回は認証ライブラリを用いず、SolidStartでOAuth2.0認証クライアントを基本実装してクラウドストレージサービスであるBoxを利用できるようになるまでをまとめた記事となります。 よろしくお願いします。 モチベーショ…

【Nuxt3入門】Nuxt3で簡単なGPT-3アプリを作成する

こんにちは、フロントエンドチームの亀ノ上です。 最近は画像生成AIやテキスト生成AIなど、AIによる自動生成に関する話題をよく目にします。特にここ最近は ChatGPT の勢いが凄まじく、毎日のようにニュースを見かけるような気もしています。 今回はそんな C…

【SvelteKit入門】SvelteKit + Prismaによる掲示板アプリ作成

こんにちは!ラクス1年目のkoki_matsuraです。 今回は掲示板アプリ作成を通して、SvelteKitの基礎的な部分をご紹介させていただきます。 目次は下記のようになっています。 はじめに Svelteとは SvelteKitとは 掲示板アプリ作成 アプリの概要 環境構築 Svel…

モダンフロントエンドで始めるつらくないReactディレクトリ構成

はじめに こんにちは、ラクスフロントエンド開発課の斉藤です。 記事タイトルはReact開発者なら知る人ぞ知るりあクト! TypeScriptで始めるつらくないReact開発のパロディです。とてもわかりやすい入門書なのでReact初学者の方には学びの第一歩として自信を…

次世代ゼロランタイムCSS-in-JS「macaron」の導入方法を調べてみた

はじめに こんにちは!hy094です。 今回はZero-Runtime CSS-in-JSである「macaron」(macaron-css)の使い方を調べてみたので、 それをまとめたいと思います。 ※本記事は大部分が公式のGitHubと公式ドキュメントの和訳で構成されています。 ※英語がとても苦手…

【Recoil】Reactの状態管理ライブラリ基礎学習 ~リファクタ編~

こんにちは、ラクス入社1年目のkoki_matsuraです。 本日は前回記事の「【Recoil】Reactの状態管理ライブラリ基礎学習 ~第三部~」で作成したToDoアプリのRecoil部分をリファクタするとともにパフォーマンスを上げるためにどうするかについてご紹介させていた…

【Recoil】Reactの状態管理ライブラリ基礎学習 ~第三部~

こんにちは!ラクス入社1年目のkoki_matsuraです。 本日は、Recoilの基本的な状態管理や仕組みをTodoアプリ作成を通して、ご紹介させていただきます。 こちらの記事は「Reactの状態管理ライブラリ基礎学習」の3部目です。 「Redux編」「Redux-Toolkit編」も…

【Redux-Toolkit】Reactの状態管理ライブラリ基礎学習 ~第二部~

こんにちは!ラクス入社1年目のkoki_matsuraです。 本日は、Redux-Toolkitの基本的な状態管理や仕組みをTodoアプリ作成を通して、ご紹介させていただきます。 こちらの記事は「Reactの状態管理ライブラリ基礎学習」の2部目です。 前回の「Redux編」を読んで…

【Redux】Reactの状態管理ライブラリ基礎学習 ~第一部~

こんにちは!ラクス入社1年目のkoki_matsuraです。 本日は、Reduxの基本的な状態管理や仕組みをTodoアプリ作成を通して、ご紹介させていただきます。 この記事は「Reactの状態管理ライブラリ基礎学習」全3部作の1部目です。 Reactの状態管理ライブラリを勉強…

React Hook Form v7 + MUI v5 + zod v3を使ったコンポーネント実装例

はじめに TextField RadioGroup SelectForm CheckboxGroup DatePicker コンポーネント使用側実装例 おわりに 本記事を執筆するにあたって、 マナリンク Tech Blog運営さんのReact Hook Form(v7)を使ったコンポーネント設計案 piyokoさんのMUI v5 + React Hoo…

Next.js + Vercel + Supabase を用いた高速アプリ開発

こんにちは!ラクス入社1年目のkoki_matsuraです。 本日は、Next.jsとVercel、Supabaseを用いて簡単なアプリを高速で開発する手順についてお話しできればと思います。 アジェンダは以下の通りです。 Next.jsとは ReactとNext.jsの違い Next.jsの特徴 Vercel…

フロントエンド未経験のSREエンジニアが挑んだ技術選定のリアル体験

こんにちは!株式会社ラクスの@kzak_24と申します。 インフラ開発部 SRE課に所属しております。 さて今回は、現在アサインされている新規システムの開発プロジェクトにて、フロントエンドの技術選定を担当した時の経験をまとめようと思います。 フロントエン…

フロントエンド関連の最新ニュース・記事をラジオ感覚で聞く、フロントエンドTechCafe【まとめ】

技術広報のyayawowoです。 突然ですが、変化の多いフロントエンド関連の情報を日頃どのようにインプットされておりますでしょうか? SNSやWeb記事、最近ではPodcastという方もいると思います。 しかしながら「時間に余裕がない!」という方も多くいらっしゃ…

Tailwind CSS 社内勉強会【まとめ】

背景 スコープ Tailwind CSSとは? コンポーネント指向とは? Tailwind CSSのメリット class名を考える必要がない デザインシステムの最低保証 ドキュメント、チートシートの豊富さ Tailwind CSSのデメリット classに多くのコードを書く必要があり、可読性が…

Copyright © RAKUS Co., Ltd. All rights reserved.