こんにちは。あるいはこんばんは。LayerX HRのtalosです。 最近は、SPY×FAMILYのアーニャちゃんに癒されております。 大阪からフルリモート社員としてLayerXで働き始めてから7ヶ月ほどが経ちました。直近、fukkyy-sanからLayerX羅針盤がメンバーにシェアされ、改めてLayerXで働く意思決定をして良かったと感じている今日この頃です。 ※今回の記事は、10月から始まっているLayerX 2022アドベントカレンダー(概念)、29日目の記事です。 前回はupamueさんによるメガベンチャーから “LayerX” にソフトウェアエンジニアとして転職して、コンフォートゾーンを抜け出した話 の記事でした。 次回は、Akinoさんにバトンを繋ぎます。 LayerX Advent Calendar2022どんな人にオススメの記事か・1on1の時間を有効活用したいと考えている

The wonderful thing about glimpsing into the future is that the path is never completely clear. We can look at trends, and look at innovations and try to chart a course. Better still we can be part of those innovations to guide the direction. But nothing is certain. 2022 had a ton of big releases that push web development forward. We saw the 1.0 releases of both Astro and Sveltekit. SolidStart, an

対象読者 RemixがNext.jsなどとはどんなところが違うのか知りたいJavaScriptエンジニア WebブラウザとNode.jsという異なるランタイムをそれぞれキャッチアップするのが辛くなってきたエンジニア 前提環境 筆者の検証環境は以下の通りです。 macOS Monterey 12.5.1 Remix 1.7.1 Webフロントエンド技術の広がり Webブラウザ上で動くアプリケーション周辺のエンジニアリング分野は、JavaScriptの進化とともにサーバーサイドの責務から分離され、「Webフロントエンド」という名前で呼ばれることが多くなりました。この分野は、Webブラウザをランタイムとしてリッチなアプリケーションを効率良く開発し、ユーザーに良い体験を与えることを主な目的としていると、筆者は認識しています。 ここで着目したいのが、このWebフロントエンド分野においては「Webブラ

Astroは、ブログやマーケティング、eコマースなど、コンテンツ駆動のウェブサイトを作成するためのウェブフレームワークです。Astroは、新しいフロントエンドアーキテクチャを開拓し、他のフレームワークと比較してJavaScriptのオーバーヘッドと複雑さを低減することで知られています。高速でSEOに優れたウェブサイトが必要なら、Astroが最適です。 Astroはオールインワンのウェブフレームワークです。 Astroには、ウェブサイトを作成するために必要なすべてが組み込まれています。また、さまざまなインテグレーションやAPIフックがあり、プロジェクトを自分のユースケースやニーズに合わせてカスタマイズできます。 特筆すべき点は以下の通りです。 アイランド: コンテンツ駆動のウェブサイトに最適化されたコンポーネントベースのウェブアーキテクチャです。 自由なUI: React、Preact、Sv

Cloudflareブログで興味深い記事が投稿されていたので読んだ。 趣旨としてはマイクロフロントエンドアーキテクチャのFragments組成をブラウザからではなくEdgeサーバーとSSRのレイヤーで実現する、というものだと思う。 マイクロサービスアーキテクチャのAPI Gateway / Backends for Frontendsパターンのうちブラウザアプリケーションに限定して拡張したものという理解をした。 Fragments組成 例えばこんな感じに画面の一部を描画するエンドポイントがある https://cloud-gallery-header.web-experiments.workers.dev/ https://cloud-gallery-footer.web-experiments.workers.dev/ これら1つ1つをCloudflare WorkersのService

Vue Fes Japan 2022 の発表内容です https://vuefes.jp/2022/sessions/KushibikiMashu ■ 概要 社内のコンポーネントライブラリに対してStorybookとChromaticでビジュアルリグレッションテストを導入して、見た目のデグレを防止している話をします。 ■ 詳細 Chromaticとは、Storybookのメンテナーが作成しているStorybook用のツールです。 ストーリーごとのスクリーンショットを撮影し、差分を画像で比較してくれる機能を備えています。 以下の課題を解決することを目的にして Chromatic を導入しました。 既存のコンポーネントを改修した際に発生する DOM、CSS に起因する表示崩れを自動で検知できないこと 依存モジュールのバージョンアップに時間がかかること その結果、両方の課題を解決できた上に作業が

React＋Reduxによる状態管理とフロントエンドの技術的負債 ─ 長く継続するサービスのアプリケーション設計 遷移なく表示コンテンツを変更できるシングルページアプリケーションでは、ページの状態管理が重要になります。現在はReactによるUI構築とReduxによる状態管理を選択しているChatworkは、jQueryなどの技術的負債と共存しながら、フロントエンド設計の見直しを重ねてきました。クライアントサイド・アーキテクトの火村智彦（@eielh）さんと、エンジニア採用広報の高瀬和之（@guvalif）さんによる解説です。 クラウド型ビジネスチャットツール「Chatwork」は、2011年3月にローンチされて10年以上にわたり開発を継続してきました。このように長く続くサービスがユーザーに価値を提供し続けるには、時間経過による変化に適応するため設計の見直しが必要になります。 しかし、設計を

この記事は新野淳一氏のブログ「Publickey」に掲載された「オープンソースのプラネタリウムソフト「Stellarium」が20年を超える開発期間を経てバージョン1.0に到達」（2022年10月4日掲載）を、ITmedia NEWS編集部で一部編集し、転載したものです。 オープンソースのプラネタリウムソフト「Stellarium」が、20年以上の開発期間を経てついにバージョン1.0に到達したことが発表されました。 開発チームはバージョン1.0到達に当たり、ブログで「After more than 20 years of development the program is finally accurate enough for historical application.」（20年以上の開発を経たこのプログラムは、ついに歴史的アプリケーションにふさわしい十分な正確さを得た）とコメントし

2022年10月1日に開催された #postdev での発表です

昨今、働き方改革の浸透によって、残業時間削減や働く場所の自由化など、労働環境の整備が強く求められています。働きやすさに加え、仕事への誇りや充実感といった「働きがい」も重要課題の一つとなっています。Unipos 働きがいサミットでは、チームワークの土台となる「心理的安全性」と、やる気の源泉となる「エンパワーメント」の2つの視点から、一人ひとりが働きがいを感じる組織づくりの方法を学びます。本セッションでは「今いる仲間でうまくいく宇宙兄弟から学ぶチームの話」をテーマに行われた、組織開発ファシリテーター長尾彰氏の講演の模様をお届けします。 優れたリーダーがいると、メンバーは他責になる 長尾彰氏：全部を説明しちゃうと時間がなくなっちゃうので、先に進みますね。特長として、このタイミングで押さえていていただきたいのは、下から2番目の「メンバーのメンタルモデル」です。 メンタルモデルですから、姿勢や態度、

T3 Stackとは 昨今のWeb開発ではTypescriptによる型安全なWebアプリケーションの開発を求められている。またバックエンドとフロントエンド、さらにBFFによる構成においていかに型安全で効率よく開発するかはWebアプリ開発において非常に重要な課題となっている。 そこでTheo氏によって「T3 Stack」という技術スタックが提唱された。 これは最近注目のWeb開発の技術スタックとなっている T3 Stackにおいては以下3つの思想に焦点が当てられている。 simplicity(簡潔さ) modularity(モジュール性) full-stack typesafety(フルスタックの型安全) そしてこれらの思想を実現するためにT3 Stackでは以下6つの技術を採用する Next.js tRPC Tailwind CSS Typescript Prisma NextAuth.j

Next.js, Prisma, GraphQL Code Generator で作るフルスタック Web アプリケーション おもにNext.js、Prisma、GraphQL Code Generatorを用いたWebアプリケーションの構築手法について解説した書籍となります。 上記技術に加えて、以下の技術も採用しています。 ・Tailwind CSS ・NextAuth.js ・Apollo GraphQL ・Prettier ・ESLint ・Vitest ・React Testing Library ・GitHub Actions モダンなWebアプリケーションの開発手法について興味がある方にオススメです。 1章 Next.jsのセットアップ 2章 Prismaのセットアップ 3章 GraphQL Code Generatorのセットアップ 4章 テストコードの追加 5章 本番環境へ

はじめに 本記事では、Reactの状態管理ライブラリであるJotaiにおける、リクエスト処理など非同期処理の基本的な方法を紹介します。 概要 Read-Only Atom の復習　<- Jotai初学者向け 非同期処理を持つ Read-Only Atom の扱い方の紹介　<- Suspense と Async atomの基本 非同期で配列表示する例 一覧画面の例　<- ページネーション無し 注意点 Dependency Atom と Async Atom、 jotai/utis の紹介　<- 実践向きな使い方の紹介 Dependency Atom って何？　<- Jotai初学者向け ページネーション <- Dependency Atomを用いた例 キャッシュありのページネーション <- atomFamilyを用いた例 リフレッシュ方法 <- ちょっと・・・ 今のオススメ 　<- @tan

Author: @urahiroshi, Engineering manager of Web Platform team 2022年8月4日、メルカリで “web-2” と呼ばれるサーバがシャットダウンされました。これはメルカリWeb版の開発に携わっているチームにとって、一つの区切りとなる出来事でした。 web-2はPHPで記述されたwebサーバで、2015年から https://www.mercari.com/jp/ 配下のコンテンツを配信していましたが、現在では複数のWebマイクロサービスがその機能を担っており、 https://www.mercari.com/jp/ 配下のページは後継となるWebマイクロサービスが配信するページへリダイレクトされています。 メルカリWebのマイクロサービス化に向けた開発が始まり、最終的にweb-2がシャットダウンされるまで、実に4年以上の期間がかか

InterviewThis is an open source list of developer questions to ask prospective employers during the hiring process. I created this list because, frankly, the existing lists that I saw on this topic really sucked. Many of the starting questions came about from years of hiring into jobs only to find out about some lousy attribute of the company which, had I known about, I probably wouldn't have acce