はじめに先日、初心者でも簡単に参加できる GitHub チュートリアル 『First Contributions JA』を共同開発しました! 振り返りも兼ねて、プロジェクトの背景や使用技術について、紹介していきます。 ▼ GitHub のリンク: なぜ First Contributions JA を構築したのか?さて、First Contributions JA には、次のような特徴があります: - React/ Next.js で構築されたWebサイト - 初心者向けのGitHubチュートリアル - オープンソースのプロジェクト 上記を踏まえて、プロジェクトの経緯は、主に2つあります。 (技術スタックは、後で詳しく説明します) 1. JavaScript/ React 学習コミュニティで、共同開発を提案した!以前、 「JavaScript/ React を学習するコミュニティを、期間限
javascripter です。ハローでは、プロダクトのローンチ前からAutoReserve の開発に関わっています。 今回は、筆者が社内で書いている技術ガイドラインについて紹介します。 はじめに ハローでは、高品質なコードを維持し、開発チームの技術レベル向上を図るため、社内で継続的に技術Tipsやガイドラインの整備・蓄積を行っています。 チーム横断的に、有用な技術Tips、ベストプラクティス・コーディングガイドラインなど情報をNotion上に集約し、自由にエンジニアが閲覧・編集できるようになっています。 この取り組みの目的は以下の通りです: コード品質の向上と統一 開発チームメンバーの技術スキル向上 「どう」直すかでではなく「なぜ」そう修正すべきかまで理解してる人を増やす 効率的な開発プロセスの確立 新メンバーのオンボーディング支援 今回紹介するドキュメント 今回は、その中から「reac
import React, { useState, useCallback, useMemo } from 'react'; const AmbientSynth = () => { const [audioContext, setAudioContext] = useState(null); const [activeOscillators, setActiveOscillators] = useState({}); const initializeAudioContext = useCallback(() => { if (!audioContext) { const context = new (window.AudioContext || window.webkitAudioContext)(); setAudioContext(context); } }, [audioConte
こんにちは、羽山です。 みなさんは業務に LLM(生成AI)を活用していますか?ラクーングループでは生成系AI LT大会を開催するなど、積極的な利用を推し進めています。 そこで今回は私がその生成系AI LT大会で発表し、隙間時間で開発して、社内で幅広く利用されるに至った AIアシスタント「おっさんずナビ」を紹介します。 おっさんずナビは LLM + RAG(Retrieval-Augmented Generation)を利用した Slackボットで「ラクーンホールディングスの社風を教えてください」という質問に 社内事情を踏まえた回答 をしてくれます。 ファインチューニングを利用せず RAG のみで精度を高めているのと、ベクトルDBなどの外部リソースを必要としないのがポイントで、使い込まれた Slack ワークスペースさえあればアプリを起動するだけで 社内事情通のAIアシスタント ができあが
こんにちは!飲食店システム開発部オーダーチームの開発エンジニアを担当している堀口です。 食べログオーダーは、レストランでの飲食体験をより快適にするためのモバイルオーダーシステムです。飲食店に来店したお客様が自身のスマートフォンを使用してQRコードを読み取り、Web上でメニューをカートに追加し注文することができます。メニュー選択や注文操作はWebでありながら、ハーフモーダルを使用したネイティブアプリのような注文体験ができます。 この記事では、モバイルオーダーシステムのUI改善に焦点を当てます。ハーフモーダルの採用がどのようにして決定されたのか、その開発プロセス、そして実際に達成された改善点について詳しく掘り下げていきます。Reactを使用したフロントエンド開発で遭遇した課題と、それらをどのように解決したかの具体例を紹介します。 目次 なぜ「ハーフモーダル」を採用したか ハーフモーダルの導入と
Render hooks とは、ReactにおいてカスタムフックからJSX式を返す設計パターンのことです。リンク先は私が当時在籍していた会社のテックブログに書いた記事で、当時の会社でこの設計パターンがハマる箇所に出会ったためアイデアを記事化したものです。ちなみに、Render hooksという命名は私ではなく当時の私の上司です。 私は当時から今までずっとこのパターンを推奨しているのですが、あまり流行る気配がありません。そこで、この記事では皆さんがこのパターンの考え方にもう少し納得できるように、render hooksパターンは普通のコンポーネントの拡張であるという見方をご紹介します。 Render hooksパターンの概要 Render hooksパターンは、UIの実装(JSX)と、そのUIに関連するロジック(たとえばステート)をまとめてカスタムフックから提供することを指します。簡単な例を
Render hooks とは、ReactにおいてカスタムフックからJSX式を返す設計パターンのことです。リンク先は私が当時在籍していた会社のテックブログに書いた記事で、当時の会社でこの設計パターンがハマる箇所に出会ったためアイデアを記事化したものです。ちなみに、Render hooksという命名は私ではなく当時の私の上司です。 私は当時から今までずっとこのパターンを推奨しているのですが、あまり流行る気配がありません。そこで、この記事では皆さんがこのパターンの考え方にもう少し納得できるように、render hooksパターンは普通のコンポーネントの拡張であるという見方をご紹介します。 Render hooksパターンの概要 Render hooksパターンは、UIの実装(JSX)と、そのUIに関連するロジック(たとえばステート)をまとめてカスタムフックから提供することを指します。簡単な例を
こんにちは、うしろのこです。直近1年ではVueから離れて、maja と呼ばれる組織管理基盤の新規プロダクトの開発をしていました。 プロダクトの話はこちら(maja)↓ note.st.inc 今回は、0->1における技術選定や開発中の工夫、結果どうだったかなどを書きます。 技術選定 初めに、前提条件は以下のような感じでした。 メンバーはReactの経験が豊富、フロントを触るのは多くて3,4人くらい 常にユーザー認証された状態で操作されるため、FE用のmiddleware的な層があるとうれしい toBアプリケーション せっかくなので使ったことのないものを使ってみよう、ということで、すでにWAFでの導入が進んでいたCloudflareの技術の採用をFEでも検討しました。少し触った感じではdeploy体験がよく、ローカル開発環境であるwranglerの出来も申し分なかったため、Cloudflar
時系列データ分析ツール「Node-AI」を開発するスクラムチームは、LeSS(Large-Scale Scrum)を参考にした開発プロセスを採用しました。 本記事では、その背景や数か月試した結果について紹介します! 目次 目次 はじめに Node-AIについて フロントエンドのリプレイスを終えて チーム分割に対する勘所 コンポーネントチームとフィーチャーチーム 実際の運用 チームへの愛着 2チーム体制を続けてきて おわりに はじめに はじめまして、イノベーションセンター Node-AIチームの中野、半澤です。 (中野)Node-AIチームでは2024年4月からスクラムマスターとして活動しております。 過去には研究者やデータサイエンティスト、ソフトウェアエンジニアなど幅広くジョブチェンジして今に至ります。 中野 将尚 | LinkedIn (半澤)Node-AIチームでは開発者としてインフラ
Why are Japanese developers not undergoing mass layoffs? After Microsoft shut down Tango Gameworks, we look at the reasons why Japan has otherwise been sheltered (but not immune) to many of the layoffs and trends seen further afield On 14th June, Tango Gameworks employees had a pizza party. It was the studio's final day following the announcement of Microsoft's decision to close the studio behind
Can you really adopt Next.js App Router incrementally? At WorkOS, we learned that you can’t really migrate a complex app page by page without a hit to the UX. Instead, we worked out a migration guide that allowed us to test our entire app with App Router while still serving the Pages Router to users—before making the final switch. We use Next.js for all of our frontend apps at WorkOS. Recently, th
手間をかけずにCloudFrontを使った静的Webサイトを作りたい こんにちは、のんピ(@non____97)です。 皆さんは手間をかけずにCloudFrontを使った静的Webサイトを作りたいなと思ったことはありますか? 私はあります。 過去にAWS CDKを使ってこの思いを実現したことがありますが、一からAWS CDKを作り込むのはなかなか大変でした。 そんな苦労はCloudFront Hosting Toolkitを使用すると少し解消されるかもしれません。 CloudFront Hosting ToolkitはCLIまたはAWS CDKでフロントエンドのホスティングとCI/CDパイプラインを用意するツールです。 今だとAmplifyを使えば良いのではないか? という声も聞こえてきますが、細かいカスタマイズを行いたい場合にCloudFront周りを直接操作したい場合があります。そうい
目次 目次 はじめに 企画LPの儚さ 企画LPをアーカイブする! 仕様 開発について 技術選定 ちょっと技術の話 スクラム開発 ユーザーの反応 おわりに はじめに こんにちは! ZOZOTOWN企画開発部・企画フロントエンド1ブロックの秋山です。ZOZOTOWNトップでは、セール訴求や新作アイテム訴求、未出店ブランドの期間限定ポップアップ、著名人コラボなどの企画イベントが毎日何かしら打ち出されています。私はそのプラットフォームとなる企画LPをメインに実装するチームに在籍しています。 チーム特性としては以下のようなものがあります! クリエイティブコーディング寄りの実装をする機会に恵まれやすい 普段のLP案件内では、エンジニアよりも他職種(デザイナー、PM、ビジネス職)と連携することが多い 企画LPの儚さ 定常的なページと違って、開催期間が定まっている企画LPの命は儚いものです。月に20本ほど
はじめに リテールアプリ共創部のるおんです。 みなさんはプロジェクトを始める時や、既存プロジェクトでNode.jsのバージョンをあげたい時にどのような基準で使用するバージョンを決めてますか? 実際に、自分も定期的なライブラリアップデートの際や、新しくLambda関数を作ってNode.jsを選択する際にどのバージョンを使うべきか迷う時があります。 そんな時、Node.jsのリリースサイクルを理解しておけば、今自分たちが作っているアプリケーションにあったバージョンを正しく指定することができます。 今回は、Node.jsのリリースサイクルを解説し、適切なメジャーバージョンを指定する方法について解説します。 リリースサイクル メジャーバージョン まず、Node.jsのメジャーバージョンでは偶数番号と奇数番号で役割が異なります。 我々開発者が本番環境で基本的に使用するバージョンはNode.js v1
昨今のフロントエンド向けUIライブラリでは、コンポーネントの設計が重要です。この記事では、コンポーネントのスタイリング、その中でもとくにコンポーネントの大きさに関わるコンポーネント設計について考えます。 私の考える結論は、むやみに大きさを指定できるpropを生やさずに、CSSで外から大きさを制御できるようにしたほうがいいです。 コンポーネントの大きさを制御したい UIの一部分を再利用可能なコンポーネントとする場合、同じコンポーネントがさまざまな場面で使えるのが望ましいでしょう。コンポーネントが提供する機能にもよりますが、場面に応じてさまざまな大きさでコンポーネントを使用できたほうがよいこともあります。 具体例として、このようなコンポーネントを考えてみましょう。例はReactで示しますが、この記事の内容はReactとは関係ありません。 const Card: React.FC<React.P
Automatically replacing polyfill.io links with Cloudflare’s mirror for a safer Internet06/26/2024 polyfill.io, a popular JavaScript library service, can no longer be trusted and should be removed from websites. Multiple reports, corroborated with data seen by our own client-side security system, Page Shield, have shown that the polyfill service was being used, and could be used again, to inject ma
はじめに リアルタイムでみんなの反応が見れるアプリ、作りたいですよね。 X や instagram など各種 SNS では、何かアクションがあれば通知に数字がつきます。 Slack や Chatwork でも同じですね。メンションされたらチャンネルに数字がつきます。 モンスターハンターは凄まじいです。 最大4名のプレイヤーで同じモンスターを狩るのですが、どこに誰がいるかリアルタイムで確認できます。 ディアボロスに追いかけ回されながら、半泣きで逃げ回っているとき、共闘しているはずのプレイヤーがホームから動かなかったり、明らかに素材集めに勤しんでいたらx意が湧きます。 このようなリアルタイム通信を実現するために、どのような方法があるか探したところ WebSocket WebRTC SSE(Server-Send Events) というものが見つかりました。 WebSocket を試したい 本当
これはなに 自身のプロジェクトに適合した ESLint Config の設計および実装方法についてまとめたものです。 業務や趣味プロに関わらず、 JavaScript / TypeScript でコーディングする際に ESLint は非常に有用なツールであり、広く使われています。ほとんどの場合において ESLint 基盤はプロジェクトごとに必要なパッケージをインストールして設定ファイルを作成し、構築されます。しかしその設定内容がプロジェクト間で重複することは珍しくなく、プロジェクトの数が増えるにつれ冗長となりがちです。そこで、複数プロジェクト間で共通のルールセットを定義して単一の ESLint Config として再利用することで、メンテナンス性や再利用性の向上が期待できます。本稿では、そのような用途で使える自分だけの ESLint Config を設計・実装する方法を紹介します。 前提
はじめに 現代の人に名著以外の本を読むような時間はない こんにちは、Watanabe Jin (@Sicut_study)です みなさんは何か新しい技術を学ぶときにどんなコンテンツを利用するでしょうか? 最近ではUdemyなどの動画講座を利用する人が多いと思いますが、本を読んで学ぶという人もまだまだ多いのではないかと思います 今回は私がこれまで5年間読んできた150冊以上の中から厳選した30冊の本を紹介します。広く多くの人に役立つものから、特定の技術の書籍までどれを読んでもあなたの大切な一冊になるのでぜひ読んでみてください 現代人には時間がない なぜ働いていると本が読めなくなるのかという本が話題になりました 現代人は本を読む時間がなくなっています。 仕事に追われてしまい、プライベートで本を読む暇などなくなっているのです。 しかし、エンジニアは「技術職」なのでプライベートの時間でも学習をして
It’s not just you, Next.js is getting harder to use I wrote a blog post the other day about how Next.js Middleware can be useful for working around some of the restrictions imposed by server components. This led to some fun discussions in the world about whether this was a reasonable approach or if Next.js DX was just... bad. From my perspective, Next.js’ App Router has two major problems that mak
RubyKaigi 2024 キーノートレポート Samuel Williamsさん「Leveraging Falcon and Rails for Real-Time Interactivity」 ~RubyKaigi 2024 2日目キーノート RubyKaigi 2024レポートの第二弾です。今回は2日目の、Samuel Williamsさんによる「Leveraging Falcon and Rails for Real-Time Interactivity」という基調講演です。本発表ではRubyの非同期IOや並行処理を前提としたリアルタイム処理、そしてタイトルにあるようにRailsとの連携が主な話題となります。 前提知識 Samuelさんは過去にRubyKaigi 2019とRubyKaigi 2023に登壇しました。 2019年のときは、TCP Serverにおける、よくあるfo
useEffect を使って「初回以外の再レンダリング時に実行される処理」を書くにはどうすれば良いのか? という疑問を、たまに目にします。 … 前回の記事では、「useEffect ではなくイベントハンドラに処理を移動することで、《どのユーザーイベントに反応して、そのステートの遷移を引き起こすのか》を明確にする」グッドプラクティスについて説明しましたが、 これだけでは「エフェクトが初回に実行されてほしくない…」と困るケースの全てがカバーしきれていないと思います。 この記事では、もう一つのケース、「エフェクトが初回に実行されてほしくない」けど、《ステートと外部の同期》という本来の用途に当てはまるケースについて解説します。 本題: ステートによって実行する/スキップを制御する イベントハンドラに移すような処理ではないけど、「初回レンダリング(マウント)時には実行せず、再レンダリング以降にのみ実
概要 Share Artifact という Claude の Artifacts を URL 共有できるようにするサイト作りました。 Artifacts は2024/06/30 現在、ログインユーザーしかプレビューできませんが このサイトにコードを貼り付けることで同じ動作をする公開ページを作ることができます。 React も環境設定無しで動きます。 使い方 Claude に Artifacts で動作するコード作らせる できた Artifacts のコードをコピー サイト左の入力欄に貼り付け(①)。コードが解析できるとプレビューが始まり、共有 URLが発行される(②) SNS などで URL をシェアしよう 制限 1. 対応形式 2024/06/30 現在、 React、SVG、HTML のみに対応。 Mermaid はまた時間があれば対応します。 2. 再現度 React のプレビューは
はじめに こんにちは!SREを担当してます上平と申します。 このエントリーではスマートバンク内部の業務で使われるシステムを構築した際の話を苦労した内容や学びを含めてご紹介したいと思います! 我々のようなカード発行業者はカード番号からユーザーを特定する業務があります。 この業務を効率化し、よりセキュアに担当者が業務を実施できるように管理画面を構築する必要がありました。また、このシステムはPCI DSSに準拠するように構築する必要があります。 今回は構築する際の技術選定や問題点についてご紹介し、これから同じようなシステムを構築される方の参考になれば幸いです。 PCI DSSとは PCI DSSとはクレジットカード業界のセキュリティ基準のことで詳しくは以下の記事も御覧ください! blog.smartbank.co.jp 技術選定の観点 まず技術選定を行う上で、我々がやりたかった観点と、PCIDS
はじめに こんにちは、AI Shiftフロントエンドエンジニアの安井(@ytaisei_)です。 AI Shiftでは週に1回フロントエンドトーク(フロントエンドに関する情報共有会)を行なっています。今月も様々なジャンルの技術に関する話題があったので共有したいと思います。 📈 shadcn/uiがchartに対応予定! shadcn/uiといえば、Radix UIとTailwind CSS を利用して作成した、再利用可能なコンポーネントを提供してくれるライブラリです。今回はそのshadcn/uiにchartのコンポーネントが追加予定であるというニュースがありました! また、chartを構築するためのライブラリとしては内部にrechartsを採用しているとのことです。記事執筆時点(2024/06/28)ではまだ追加されていませんが、今後の開発に期待です。 🛫 React Compiler
昨今のフロントエンド向けUIライブラリでは、コンポーネントの設計が重要です。この記事では、コンポーネントのスタイリング、その中でもとくにコンポーネントの大きさに関わるコンポーネント設計について考えます。 私の考える結論は、むやみに大きさを指定できるpropを生やさずに、CSSで外から大きさを制御できるようにしたほうがいいです。 コンポーネントの大きさを制御したい UIの一部分を再利用可能なコンポーネントとする場合、同じコンポーネントがさまざまな場面で使えるのが望ましいでしょう。コンポーネントが提供する機能にもよりますが、場面に応じてさまざまな大きさでコンポーネントを使用できたほうがよいこともあります。 具体例として、このようなコンポーネントを考えてみましょう。例はReactで示しますが、この記事の内容はReactとは関係ありません。 const Card: React.FC<React.P
Conformの概要 Conformは、RemixやNext.jsのようなフレームワークをサポートしており、クライアントサイドとサーバーサイドのフォームバリデーションを同じ記述で書くことができるライブラリです。RemixやServer Actionsの台頭により、ZennでもConformを紹介する記事がいくつか投稿されています。 今回は「Conformを使うとWeb標準なフォームを作ることになる」という別の観点でConformについて紹介します。ReactではJavaScriptでフォームの状態を管理することが当たり前になっており、仮にフォームのマークアップが正しくなかったとしても入力〜バリデーション〜送信まで機能を作ることができてしまいます。 SPA時代からエンジニアになった自分のようなエンジニアは、正しいフォームのマークアップを知らないことが多いかもしれません。Conformが生成す
One million checkboxes that anyone can check Jun 25, 2024 Hi. It’s Nolen (eieio) from the future, a day and half after I posted this. Since launch, One Million Checkboxes has been played by over half a million people. We’ve checked something like 100 million checkboxes. I have spun up a lot more infrasture and made a lot of changes. My description of how the site works is out of date. I’m too busy
案件でUIライブラリの shadcn/ui を利用しているのですが React Hook Form との連携に少しクセがあるので連携を深堀りしてみます。 shadcn/ui は React Hook Form に依存しているのでフォームライブラリは基本的にはReact Hook Form一択になるかと思います。 FormFieldコンポーネントを使って連携 連携方法のベースはshadcn/uiの公式サイトで解説されています。 公式サイトのコード 公式サイトでサンプルコードとして以下のような実装が提示されています。 "use client" import { zodResolver } from "@hookform/resolvers/zod" import { useForm } from "react-hook-form" import { z } from "zod" import
こんにちは、つくぼし(tsukuboshi0755)です! 生成AIという技術がさらに進化を遂げ、本番利用される事例も増えてきました。 そのような時代の流れに従って、生成AIに関する入門書も続々と増えてきています。 そんな中、現状世界で最も利用されているクラウドであるAWSで提供されているAmazon Bedrockというサービスを用いて、生成AIアプリを構築するにはどうすれば良いか?という所に重点を置いた「Amazon Bedrock 生成AIアプリ開発入門」という本が発売されました。 今回著者であるみのるん(minorun365)さん、moritalous(moritalous)さん、Kumada(hedgehog051)さんに本書をご恵贈頂いたので、紹介させて頂きたいと思います! 本書の概要 想定読者 こちらの本は、ITエンジニアの方を主な対象としつつ、内製開発に入門してみたい非エン
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く