はてなブックマーク

こんにちは。チームラボのフロントエンド班の志田です。好きなものはモアイです🗿 今回初めて技術記事を書いてみました。 Next.js、Orval、MSW に関して気になっている方、ちょっと長いですが、ぜひ最後までお付き合いください！ はじめに フロントエンド開発において、RESTful API を呼び出す処理（API クライアントコード）を作るのは結構手間がかかります。GET なのか POST なのか、リクエストやレスポンスの型は何なのかなど、考慮することが多いです。 といったことから近年では OpenAPI スキーマから、型定義や API クライアントコードを自動で生成するツールがよく使われています。 Orval は、OpenAPI のスキーマから、型安全な API クライアントコードを自動で生成してくれるツールです。 さらには、MSW で利用可能な API モック関数をスキーマから同時

こんにちは。チームラボフロントエンド班の鹿島です。最近の趣味は Factorio です。緑バイターに怯えています。 この記事では、React や Preact、Hono のような、JSX を扱うライブラリを作るために必要なあれこれについて、調べたことを紹介します。内容としては以前社内勉強会で発表したものと同じですが、記事にするにあたってまとめ直しています。すこし長くなってしまいましたが、ぜひ最後までお付き合いください！ JSX とは JSX は、JavaScript の拡張構文です。主に React でコンポーネントを書く際に用いられ、HTML のような見た目を持ちます。 <div className={style["todo"]}> <h2 className={style["heading"]}>Todo</h2> <TodoList> <TodoItem checked={true}

こんにちは。チームラボのフロントエンド班に所属しています、朴木です。趣味はNHKの連続テレビ小説を毎朝欠かさず鑑賞することです！ 今回は、GASこと、Google App Scriptについて基本的な内容紹介したいと思います！ フロントエンドの技術からは少し離れますが、チームラボのフロントエンド班では、仕事をする上で欠かせない強力なツールとなっています。これを機に、皆様もぜひGASを使ってみてください！ この記事のターゲット GASを始めたい人向けの内容になっています！ 触ったことがないが、GASに興味がある人 Google Workspaceのサービス使っている人 スプレッドシートの単純作業にうんざりしている人 基本的なJavaScriptの使い方を知っている人 GASとは？ GASはGoogleのサービスの作業を自動化・効率化する開発プラットフォームです！ Google App Scr

こんにちは、チームラボのフロントエンド班に所属している速水です。 今回、フロントエンド班内でツール・ド・フロントエンドというイベントを行ったので、その一部を紹介させてください。フロントエンド班の雰囲気が少しでも伝われば幸いです。 ツール・ド・フロントエンドとは フロントエンド班内で、開発環境や生産性の上がるツール、興味のある技術やテーマについて紹介し合うイベントです。 2016年からほぼ毎年行われていて、流れとしては、みんなで各テーマに関して自分の使っているツールや技術を下記のようにドキュメント上に記載し、意見を交換していく形です。 調査結果 開発機のOS Windows に一票も入らず、 Mac に票が集まる形になりました。 使用しているエディタ VS Code が、やはり強い結果となりました。 エディタの選定基準として「 GitHub Copilot が使えるかどうかが大事だよね」や「

はじめ はじめまして、チームラボ フロントエンド班のLIUです。中国四川出身で、CSSとホラー映画が大好きマンです。新卒でチームラボに入社し、現在フロントエンドエンジニアとして働いています。 この記事では、フロントエンド勉強会（チームラボ内で、隔週で開催しているフロントエンドに関するLT会）で発表したDefensive CSSについての内容を紹介します。 レスポンシブデザイン タイトルは「Defensive CSS」ですが、まずはレスポンシブデザインについて話したいと思います。 モバイル通信の発展や、スマホブラウザがPC並みのパフォーマンスを実現したことで、レスポンシブデザインが広く普及しました。これにより、フロントエンジニアはスマホ専用サイトの制作から脱却し、CSSを用いて簡単に画面サイズに応じたレイアウトを実装できるようになりました。 しかし、レスポンシブデザインにはメリットだけでなく