akbピンボールマシン

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

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

フロントエンド

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

【CSS実装予定】カスケードレイヤー「@layer」について

注(zhu)(zhu)意 カスケードレイヤーは正(zheng)式実装の機能ではないため、これから仕様変更の可能性があります。 目次(ci) 注(zhu)(zhu)意 目次(ci) はじめに カスケードについて Origin and Importance Context Specificity Order of Appearance カスケードレイヤーについて The Style Attribu…

フロントエンドエンジニアたちが語る、Tips【23選】

こんにちは、技術広報のyayawowoです。 フロントエンドエンジニアの皆様、今のフロントエンドを楽(le)しんでおりますでしょうか? 変化の多いフロントエンド領域を楽(le)しむために・・・ ラクスが開催している 「フロントエンド LT会」で発(fa)表された資料をご紹(shao)介(jie)しま…

手軽に始めるビジュアルリグレッションテスト【導入記】

こんにちは!フロントエンドエンジニアの松本です。 私が担当するプロダクトは今年(nian)で20年(nian)に到達し、ご長(chang)寿プロダクトとなりました。 息(xi)の長(chang)いプロダクトにはレガシー化が付(fu)き物でありますが、レガシー化を進めないためにも、日々技術を最(zui)新化するためのリフ…

フロントエンド最新ビルドツールを調べてみた

はじめに まずはwebpack esbuild swc Snowpack Vite まとめ

【2021年版】Vue.js + TypeScriptの開発スタイル

はじめに 主に2通りのやり方(fang)がある 想定している読(du)者 Class Styleの書(shu)き方(fang) Class Styleの特徴 Object Styleの書(shu)き方(fang) Object Styleの特徴 どっちで書(shu)く? 見やすさ・馴染みやすさ 利(li)用者の多(duo)さ 公式のサポート まとめ 参考

はじめての Next.js 入門(Headless CMSとの連携)

こんにちは。 株式(shi)会社ラクスで先行技術検証をしたり、ビジネス部(bu)門(men)向けに技術情報を提供する取り組みを行っている「技術推(tui)進(jin)課」という部(bu)署に所属(shu)している鈴木(@moomooya)です。 今回は最(zui)近プライベートで利(li)用するようになったフロントエンドフレームワー…

CSS(スタイルシート)の書き方【初心者向け】

はじめに 技術(shu)広報のyayawowoです。 今回(hui)は、CSSについて初(chu)心(xin)者向(xiang)けに基本的な書き方を解(jie)説します。 CSSを書く上(shang)で覚えておくべきことや、基本的な書き方をまとめております。 また、直ぐに実践できるようにサンプルコードを交えながら進めていきますので是(shi)…

Sassの記法と種類について

はじめに こんにちは、フロントエンドチームのta_kameです。 私(si)がSassを使(shi)い始めた頃、Sassに種類(lei)があるなんてことは全く知らず、その上(shang)多(duo)くの人に使(shi)われているはずのLibSassが非(fei)推奨(jiang)になるなんて思ってもみませんでした。私(si)自(zi)身(shen)知らずのうちに使(shi)っていて、…

HTMLで改行【brタグ・pタグ・preタグ】

はじめに 技術広報(bao)のyayawowoです。 Webサイトを作成する上で欠(qian)かせないのがHTMLのスキルです。 エンジニアの皆様にとっては、必ずと言(yan)っていいほど学(xue)習はされてきた方が多いのではないのでしょうか? 今回(hui)以下(xia)の方向(xiang)けに、HTMLの基本からHTMLで改行する方法…

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