はじめに 自己紹介 こんにちは、株式会社ソーシャルPLUSのフロントエンドエンジニア @zomysan です。 ソフトウェアエンジニアとしての経験は10年と少しで、趣味は個人開発と食べることです。直近では Discord の読み上げ Bot「shovel」のWebインターフェイス（マイページ）機能・有償プランなどを作りました。 この記事について 個人開発でタイピングゲームを作ったので、それについて前半・後半に分けて話します。 前半では作ったタイピングゲームの技術選定の理由や 何を大事にして作ったのか？ ということを紹介します。 後半は今回の開発を実例として、私が開発をするときの進め方について紹介します。誰にでも合うものではないかもしれませんが、少しでも参考になれば嬉しいです。 ゲームの紹介 tstt で遊びながら学ぼう！ TypeScript Touch Typing 略して tstt と
http://localhost:3000/ にアクセスすると、Waku のデフォルトのページが表示されます。 React Server Components 冒頭で述べたように、Waku は React Server Components に対応しています。React Server Components は React の新しいパラダイムであり、サーバー上でのみ実行されるコンポーネントを提供します。サーバー上でのみ実行されることで、以下のような利点があります。 クライアントに JavaScript が送信されないため、バンドルサイズを削減できる コンポーネントを非同期関数として、直接データベースや外部 API からデータを取得でき、パフォーマンス上の利点がある React Server Components は、サーバー上でのみ実行されるため、クライアント側でのイベントハンドリングや状態
2024 年 5 月現在だと Next.js のドキュメントには明示的な記載がないが、「同時に実行可能な Server Action は常に１つだけ」という件について。 実は自分もこれをちゃんと認識しておらず、先日会社の先輩に教わって初めて知ったので、試したことなどを書き残しておく。 Next.js の場合、App Router (Router Reducer) によって、Server Action の実行が直列化 (キューイング) されるようになっている。 このキューイングの挙動を考慮すると、以下のような呼び出し方は危ういコードとなる。 "use client"; import { useState } from "react"; import { increment } from "./actions"; export default function Page() { const [
Relay-style GraphQL
🇰🇷 한국인 (Korean) translation available (courtesy of Yujin Lim) “The future Relay-style GraphQL is already here – it’s just not evenly distributed.” – William Gibson, probably ”Relay-style GraphQL” is an opinionated way of consuming GraphQL in a React application, and probably better than whatever you’re currently doing. It follows the ideas pioneered by Meta’s open-source GraphQL library, Relay.
Rust+WebAssemblyを使ったWebアプリでの高速画像処理入門 - アダコテック技術ブログ
要約 背景 WebAssembly (WASM) とは？ Rust言語とは？ サンプルアプリ概要 LBP特徴量計算をRustで実装 フロントエンド環境構築 バックエンド環境構築 スキーマ定義 Rust実装 WASMバイナリの生成 TypeScript実装 実行結果 まとめ メンバー募集しています！ おまけ こんにちは！美味しいタコスを食べることを専門としているプロダクト開発部エンジニアの井上です。 要約 WebAssembly（WASM）、Rustは近年注目されている技術であり、これを利用することでWebアプリケーション上で高速な画像処理を実現できるよ。 我々も画像前処理を行っていたWindowsデスクトップアプリケーションを、WebAssembly+Rustを使用してWebアプリケーションに置き換えたよ。 Rust言語で実装した画像処理をWASMにコンパイル、そしてWebアプリケーション
PHPerKaigi 2024【参加レポート】 - RAKUS Developers Blog | ラクス エンジニアブログ
はじめに メールディーラー開発課のyamamuuuです。 2024/03/7(木) ~ 03/9(土)の3日間に渡ってPHPerKaigi 2024が開催されました。 今回もオンライン・オフライン両方のハイブリッド開催でした。 phperkaigi.jp ラクスはシルバースポンサーとして協賛し、3名が登壇した他、数名のメンバーが参加しました。 今回はラクスからの登壇者本人と参加者によるレポートを紹介させていただきます。 はじめに 参加レポート php-src debug マニュアル 10年モノのレガシーPHPアプリケーションを移植しきるまでの泥臭くも長い軌跡 ウキウキ手作りミニマリストPHP Laravel OpenAPIによる "辛くない" スキーマ駆動開発 こんな静的解析導入は負けフラグ 帰ってきた「完成度低いの歓迎LT大会」（PHPerKaigi出張版） WebAssembly を理
Introducing Project IDX, An Experiment to Improve Full-stack, Multiplatform App Development
Introducing Project IDX, An Experiment to Improve Full-stack, Multiplatform App Development Posted by Bre Arder, UX Research Lead, Kirupa Chinnathambi, Product Lead, Ashwin Raghav Mohan Ganesh, Engineering Lead, Erin Kidwell, Director of Engineering, and Roman Nurik, Design Lead These days, getting an app from zero to production – especially one that works well across mobile, web, and desktop plat
登壇者の自己紹介 蒲生弘郷氏：「ChatGPTの10ヶ月と開発トレンドの現在地」というタイトルで、蒲生から発表します。よろしくお願いいたします。 ちょっと私の自己紹介です。Azure OpenAI Champという立場で、外部発信などをやっています。いっぱい自己紹介をしていきたいところですが、本日はあまり時間もないので省略して、次にいきたいと思います。 今回は、けっこう開発者向けの発展的な内容を扱っていきますが、もし基本的な内容から確認していきたいという場合には、「Azure OpenAI 大全」というものを公開していて、リンクを貼っておくので、そちらの資料を併せてご確認いただければと思います。 「ChatGPT」の登場から今までを振り返る では、本日のテーマとして「ChatGPT」の登場から10ヶ月（※登壇当時）ということで、2022年11月から登場したChatGPTに関する技術について
This page will give you an introduction to the new experimental React Compiler and how to try it out successfully. These docs are still a work in progress. More documentation is available in the React Compiler Working Group repo, and will be upstreamed into these docs when they are more stable. React Compiler is a new experimental compiler that we’ve open sourced to get early feedback from the com
Cloudflare Workersを利用した静的配信ページへの動的なOGPメタタグの挿入 - pixiv inside
こんにちは、ピクシブでエンジニアをしているnamazuです。 ピクシブ株式会社ではpixivを始めとする複数のサービスにおいてDDoS防御やBotへの対処としてCloudflare CDNを利用しています。 この度Cloudflareの提供するCloudflare Workersをマンガ家デビューを目指すクリエイターと出版社の編集者が繋がるサービス pixivコミックインディーズ にて利用しました。 本inside記事ではコミックインディーズの開発チームが取り組んだCloudflare Workersの活用事例についてご紹介します。 課題 pixivコミックインディーズはReact (+ vite)を用いて作られたウェブアプリケーションです。 CSR(ClientSideRendering)のSPAであり、コンテンツ配信用のNginxサーバーからindex.htmlを静的コンテンツとして配
「ChatGPT Meetup」は、プロンプティングからOpenAI API、さらには周辺のライブラリやHubのエコシステムまで広く活用の助けになる知見を共有し、みんなで手を動かして楽しむためのコミュニティです。1回目に登壇したのは、株式会社フィードフォースの八百俊哉氏。ベクトルデータベース「Pinecone」の概要とプラクティスについて発表しました。 自己紹介とアジェンダ紹介 八百俊哉氏：では、最後の発表です。「Pineconeの重要性とプラクティス」というところでお話をしようと思います。よろしくお願いします。 まず自己紹介です。名前は、「やお」と読みます。八百俊哉です。大学で機械学習を専攻しており、画像処理や自然言語処理の概要はそこで学びました。 2020年に新卒で株式会社フィードフォースに入社して、入社時からデータサイエンティストとして、社内のデータ分析を中心に業務を担っています。
グループ読書が少し便利になるアプリ「ぐるどく」の技術構成
グループみんなで EPUB ファイルの本文にコメントができるリーダーアプリ「ぐるどく」を作りました。iPhone/iPad/Apple Silicon Mac に対応しておりますので、下記リンクよりお試しください。 経緯や想いの話は別途 note に記事を公開しているので、気になる方はこちらも合わせてご覧ください。 これは何ができるの？ 「ぐるどく」でできることはシンプルです。 EPUB 形式の本が読める 本文にグループメンバーそれぞれがコメントが書けて、それを確認できる その他ブックリーダーに必要な機能がそれなりに使える Kindle にもメモ機能があると思いますが、あれをグループで使えるようにしたイメージを持ってもらうのがわかりやすいでしょう。 技術構成 私が考えた条件は下記でした。 縦スクロールではなく Kindle のように横にページを捲るように読めること モバイルだけではなく P
monorepo開発を快適にするツール選定
先日、location-stateというパッケージについての記事を公開しました。 履歴に基づいて状態を復元できるReact系ライブラリで、現在はNext.jsを重点的にサポートしています。このライブラリの構成はcoreとなる部分とNext.js依存な部分を切り離しscoped packageとし、内部構成もこれに合わせていわゆるmonorepo構成で開発を行なっています。 @location-state/core: coreとなる部分 @location-state/next: Next.js依存な部分 この記事では、monorepoのパッケージ開発を快適にするために実際に採用したツールを紹介していきます。本稿で紹介するツールは以下になります。 pnpm turborepo tsup changesets Renovate pnpm まずパッケージマネージャーですが、個人的に最近はpnpm
HTMLを直接読み書きせず、スクリーンリーダーも使わずに、アクセシビリティを向上させられないだろうか（と思ってブラウザ拡張を作ってる）
HTMLを直接読み書きせず、スクリーンリーダーも使わずに、アクセシビリティを向上させられないだろうか（と思ってブラウザ拡張を作ってる） これまでの何年間か、Webアクセシビリティまわりのことをやってきた中で、「Webアクセシビリティに取り組む」上でいろいろな障壁を感じてきました。 「なぜWebアクセシビリティをやるのか」の理解を得る・得てもらうまでの障壁 イノベーター層・アーリーアダプター層な開発者（エンジニアやデザイナー）が取り組みを始める上での障壁 マジョリティ層が取り組みを始める上での障壁 今回はこの3つめの「マジョリティ層が取り組みを始める上での障壁」の話です。 残りの2つについては、私が執筆に参加したWebアプリケーションアクセシビリティが網羅的なガイドになってくれるはずです。しかしコイツは内容的にも物理的にもゴツすぎる問題があると思っていて、導入編としては見えにくい、読みにくい
あなたのキャリアに影響を与えた本は何ですか？ 著名エンジニアの方々に聞いてみた【第四弾】 - Findy Engineer Lab
書籍には、特定領域の専門家たちが習得してきた知識のエッセンスが詰まっています。だからこそ「本を読むこと」は、ITエンジニアがスキルを向上させるうえで効果的な取り組みと言えます。では、著名エンジニアたちはこれまでどのような書籍を読み、そこから何を学んできたのでしょうか。今回は7人の著名なエンジニアのキャリアに影響を与えた“珠玉の書籍”を、ご本人にまつわるエピソードとともに紹介してもらいました。 *…人名の50音順に掲載。回答者は敬称略。 あらたまが紹介『なぜ人と組織は変われないのか――ハーバード流 自己変革の理論と実践』 小田中育生が紹介『Measure What Matters: 伝説のベンチャー投資家がGoogleに教えた成功手法OKR』 風間裕也が紹介『ソフトウェアプロセス改善手法SaPID入門－現場力を引き出すシステムズアプローチ－』 小林謙太（kobaken）が紹介『組織開発の探究
フロントエンドのLinterやCIを改善した話
この記事は 株式会社エス・エム・エス Advent Calendar 2023 の21日目の記事です。 介護事業者向けの経営支援サービス「カイポケ」のリニューアルプロジェクトでフロントエンド開発をしている @hush_in です。 今年の4月にエス・エム・エスに入社しました。 入社してからフロントエンドのLinterやCIを改善した話をします。 忙しい人向けまとめ ESLint の recommended 系 extends を追加 全般 eslint:recommended plugin:import/recommended TypeScript plugin:@typescript-eslint/recommended-type-checked plugin:@typescript-eslint/stylistic-type-checked plugin:import/typescri
Next.jsを使い続けたい好きなトコロ
ムーザルちゃんねるのzaruです。今回はムーさんと、Next.jsを使い続けたい好きなトコロについて話しました。Next.jsが合うか合わないかは、正直プロジェクトとチーム体制や方針に大きく左右されます。僕たちが好きなトコロにピンときた方にはきっと合うと思いますのでぜひさわってみてください。 フロントとバックの境界線がなくなる フロントエンドとバックエンドの境界線がなくなるって、何、なくなるわけないだろ！と思うかもしれません。確かに実際には境界線がなくなるわけではなく隠蔽されているのが実態ではありますが、それによる開発体験の向上がとても好きです。 バックエンドの処理を簡単に実行できる Next.js（実態はReact）のServer Componentを使えば、コンポーネント内でSQLの実行などがそのままできます（以下のコードは例のために直接SQLを書いているので「うぇ？」と思うかもしれま
Reactコンポーネント同士の結合度を考える
この記事は株式会社ゆめみ Advent Calendar 2023 | Qiita の 2023-12-21 投稿分です。 React のコンポーネント間の結合度、特に「〇〇的結合」といった段階を使った評価について、私なりにその考え方・用語を React に翻訳してみました。 React のコンポーネント同士の結合のしかたの制約を考慮に入れてみると、結合度の各レベルにはこのような短い説明を付けられます。 レベル１: 内容結合 ―― 高水準言語なので起こらない レベル２: 共通結合 ―― グローバル or Context. 賢く使おう レベル３: 外部結合 ―― React では原則として禁止 レベル４: 制御結合 (ここからがマシな結合) ―― 論理的凝集におちいるので注意 レベル５: スタンプ結合 ―― 無駄なデータにだけは注意 レベル６: データ結合 ―― 理想的 番外編: 名前や型付
こんにちは、VPoEの北川です。 今回はトレタで現在使用している技術スタックについて紹介します。 創業時から稼働している予約・顧客台帳サービス「トレタ」から現在の注力事業のモバイルオーダーサービス「トレタO/X」までをあらためて振り返ってみると、まるで異なる技術スタックになっているので歴史的な背景などを辿りながら紹介していきます。 技術スタックの変遷 予約・顧客台帳「トレタ」 会社名にもなっている予約・顧客台帳の「トレタ」は創業当時から稼働している築11年ほどのシステムです。 サーバーサイドにはRubyとRubyOnRailsで作られた巨大なコードベースのAPIサーバーがあり、予約台帳のiOSアプリやウェブ予約などのWebアプリケーションなどが利用しています。 長年このモノリシックなシステムを成長させてきたので、以前からトレタを知ってくださっている人にはトレタはRubyの会社と認知されてい
SSH keys stolen by stream of malicious PyPI and npm packages
A stream of malicious npm and PyPi packages have been found stealing a wide range of sensitive data from software developers on the platforms. The campaign started on September 12, 2023, and was first discovered by Sonatype, whose analysts unearthed 14 malicious packages on npm. Phylum reports that after a brief operational hiatus on September 16 and 17, the attack has resumed and expanded to the
とほほさんのキーノートに感動、ベストスピーカーに聞く登壇の感想、YAPCはコミュニティが混ざる場。YAPC::Hiroshima 2024 非公式ふりかえり会文字起こしレポート - STORES Product Blog
2024年2月13日に『YAPC::Hiroshima 2024 非公式ふりかえり会』を開催しました。イベントでお話した内容を文字起こし形式で紹介します。 hey.connpass.com 登壇者紹介 STORES hogelog：YAPC初参加 ヨヨイ：YAPCは3、4回参加経験あり hiromu：YAPC初参加 藤村：YAPC初参加 えんじぇる：YAPC初参加 スマートバンク 三谷：YAPC初参加、YAPC::Hiroshima 2024でベストスピーカー賞を受賞 nyanco：YAPCスタッフ 前夜祭の感想 hogelog：『YAPC::Hiroshima 2024 非公式ふりかえり会』を始めていきます。ぜひYAPCのスタッフだった方や登壇してた方などなど、喋ってもいいですよという方はぜひ挙手をしていただけると嬉しいです。 本日の登壇者側で喋る人を紹介させていただきます。私はhoge
こんにちは、アルダグラムでエンジニアをしている松田です。 Reactで状態を管理するにあたっては、useStateの利用が挙げられることが多いです。 実際、数値や文字列、真偽値などのプリミティブな値であれば、useStateが適切なケースが大半でしょう。 ただ、値を投入するだけではなく、追加・削除・更新といった操作が要求されるケースもあると思います。 その際に、配列やオブジェクトなどといった形式でデータを取り扱うことに併せて、useReducerやuseContextの利用も視野に入れると、開発手法の幅が広がります。 今回は、次の目標に掲げるUIを実現する過程を、useReducerとuseContextの活用方法の1つとしてご紹介します。 目標 以下のような操作ができるUIを作成する。 名前と年齢を入力して、ユーザーを作成 作成したユーザーは一覧に表示 各ユーザーの権限(一般 or 管理
どのようにして Findy Team+フロントエンドチームは高速な開発をしているか 〜開発フロー編〜 - Findy Tech Blog
こんにちは。こんばんは。 開発生産性の可視化・分析をサポートする Findy Team+ のフロントエンド リードをしている @shoota です。 Findy Team+はエンジニア組織の開発生産性を可視化し、開発チームやエンジニアリングメンバーのパフォーマンスを最大化するための支援をしています。 そして（当然のことながら）Findy Team+ を作っている自分たちも、チームや個人でドッグフーディングをして、チームや自分自身の働き方やエンジニアリング組織の健康チェックをしています。 今回はそんな Findy Team+の開発チームのうち、フロントエンドチームがどのような開発環境・開発インフラで働いているかの概要をご紹介したいと思います。 フロントエンド技術スタックとCI高速化 技術スタック まずはじめにフロントエンドの技術スタックを簡単に紹介します。一般的なSPA構築の技術スタックを採
JavaScript/TypeScriptプログラマのIDEは半数以上がVSCode、32％がテストを書かない。JetBrainsによるアンケート調査
JavaScript/TypeScriptプログラマのIDEは半数以上がVSCode、32％がテストを書かない。JetBrainsによるアンケート調査 Kotlin言語やIntelliJ IDEAなどの開発ツールを開発提供しているJetBrainsは、 JavaScriptとTypeScriptに関する調査結果「2024 年の JavaScript と TypeScript のトレンド: 開発者エコシステムアンケートのインサイト」を公開しました。 この調査は世界中の2万6348人の開発者からのアンケートを集計したもので、アンケートは2023年に行われています。公開された集計結果から興味深いものを見ていきましょう。 IDEはVisual Studio Codeが過半数のシェア 回答者の半数以上となる51％が、JavaScriptやTypeScriptのプログラミングを行う場合の統合開発ツール
この記事では、ReactにおいてDOMへのアクセスが必要な理由と、その際にRefがどう役立つのかを見ていきます。また、useRef、forwardRef、useImperativeHandleという3つのフックについて説明し、これらを適切に使用する方法を紹介したいと思います。 この記事と同じ内容を扱ったYouTube動画も公開していますので、活字媒体よりも動画視聴を好まれる方はそちらをご覧ください。文字ではなく、アニメーションと音声で同じ概念を解説しています。 この記事は動画形式でも公開しています。 目次 useRefを使用してReactでDOMにアクセスする 親から子にRefをpropとして渡す forwardRefを使用して親から子にRefを渡す useImperativeHandleを使用した命令型API useImperativeHandleを使用しない命令型API Reactには
yoshiko さんが提唱された 『React のステート 3 分類』 すなわち 「1. サーバーデータのキャッシュ, 2. Global State, 3. Local State」の 3 種類に分ける 考え方は、みなさんご存じかと思います。 この分類をさらに一般化かつ微細化して、React で登場する変数（または const, 引数）および状態が、それぞれ異なった長さのライフタイムを持っている、と捉えなおすことで、満たしたい仕様をシンプルな方法で、かつ精密に実現するコードを書けるようになります。 ライフタイムは大まかに 4 種類に分けられます。短→長（すなわちスコープの狭→広の順）に並べると、以下のようになります。 アクション ライフタイムは最も短い・スコープは最も狭い 「クリック」など、特定のアクションによる処理の間だけ 一度っきりの一時変数 レンダー React コンポーネントのレ
登壇者の自己紹介とアジェンダ紹介 金岡亮氏：みなさんこんばんは。「LLMからはじめる、プロダクトへのAI導入」というタイトルで発表いたします。私たちSmartHRは「従業員サーベイ」というプロダクトを提供しており、その中で「要約AI」というLLMを使ったサービスをプロダクトとして出しています。これをリリースするまでにどんなことをやってきたのかというお話ができればと思っています。 私は金岡と申します。私はふだん、プロダクトマネージャーをしており、弊社のタレントマネジメント系のプロダクトを複数見ています。今年に入ってからLLM利用のタスクフォースや、AI活用のR&Dの組織を立ち上げています。前職では、AIの受託系の会社でプロジェクトマネージャーをしたり、データアナリストをしていました。 今日のアジェンダですが、機能リリース前のお話と機能リリース後のお話。あとは4つ学びと今後の展望というかたちで
Back to articlesWinterJS 1.0Announcing WinterJS 1.0, the fastest Javascript web server now also supporting Cloudflare applications and React Server Components WinterJS 1.0 is finally here. WinterJS is an incredibly fast WinterCG-compatible Javascript runtime written in Rust using the SpiderMonkey engine to execute JavaScript, and Tokio to handle the underlying HTTP requests and JS event loop. Wint
React Compiler React 19 Beta から React Compiler が導入され利用可能となりました。 ※単体での検証としては次の記事が参考になります。 Next.js での利用 React Compiler のドキュメント内には、各種バンドラやフレームワークで利用する方法も記載されています。 というわけで、Next.js で実際に試してみよう、というのがこの記事の主旨です。 事前準備 / セットアップ 基本的にドキュメントに従って進めます。注意点としては、執筆時点での Next.js の Stable バージョン 14.2 ではまだ React 19 が利用できないため、canary バージョンの利用が必要です。 適当なディレクトリを作成し、その中で create-next-app を実行します。 実験用のためオプションは適当に選択しますが、せっかくなので Tur
2023/11/19(日)で開催された JSConf JP 2023に関する、現時点での公開資料と X アカウントリンクをまとめました。 よろしければご活用ください。 はじめに 登壇者名は敬称略させていただいています。 x アカウントについては、以下のように確認できたものを記載しております。 JSConf JP 公式サイトに記載がある JSConf JP 公式サイトに記載のプロフィールと一致している 当イベントで登壇されることに言及されている スライドに記載されている リンクの間違い等ありましたらコメントいただけると助かります🙏 アーカイブ 本イベントは YouTube で配信されていましたが、執筆時点ではトラック A の動画が非公開になっていました。 アーカイブとして残るのかがわからなかったため、一旦 JSConf JP の YouTube アカウントへのリンクのみ記載にしておきます。
はじめに ❓ この記事は何 本文 🧑💻 Sansan でやったこと 📱 個人向け名刺アプリ Eight の開発 📄 データ化システムの開発・運用 🌐 クローリング・スクレイピングを行うシステムの立ち上げ 📝 Sansan で学んだこと 💡 転職しようと思ったきっかけ 転職活動について おわりに はじめに ❓ この記事は何 2024年2月末で、Sansan株式会社を退職しました。2018年2月に入社したので、約6年お世話になりました。 人生の節目として、Sansan でどんなことを経験し、何を学び、なぜ転職しようと思ったのか、書き残しておこうと思います。また、関連するアウトプット（登壇資料やブログなど）も載せておきます。 本文 🧑💻 Sansan でやったこと 📱 個人向け名刺アプリ Eight の開発 サーバーサイドエンジニアとして、Ruby on Rails の開
前回の記事の続きです。 前回までは、その1でMapped TypesとConditional Typesを、その2でDiscriminated Union TypeとUnion Distributionを見ていきました。 実をいうと本当に書きたかったのは、本稿の「Reactとそのデザインシステムの実装における型定義」という話でした。しかし、そのための前提がいっぱいあって、三部作という長編になってしまいました。 つまり、ここからが本題です。 前段のTypeScriptのテクニックを活かして、まずButtonのコンポーネントを作っていきます。また、Polymorphic Componentというコンポーネントの汎用性を上げるテクニックを取り上げます。最後に、デザインシステムの実装、共通コンポーネントのインターフェースの設計について簡単に触れて終わります。 TypeScriptで型安全にReac
こんにちは、Technology部のジョシュです。 今日は、最近バズっている生成AIモデル「Claude 3」と「GPT-4」を比べてみましょう！ 生成AIが絶え間なく進化し続けるなかで、2024年3月に登場したAnthropic社の大規模言語モデルClaude 3。OpenAI社のGPT-4と比較され、多くの議論を呼び起こしています。 この記事ではこれら2つのモデルを深掘りし、それぞれの特徴、能力、そして生成したコードの結果を比較しながらご紹介します。生成AIのトレンドを知りたい方やAI開発に関心を持つ方々のご参考になれば幸いです。 GPT-4とClaude 3の概要 OpenAI社が開発した言語モデルGPT-4は生成AIを広めたモデルとして非常に有名で、様々なタスクをこなす能力があります。そんな中で3月に登場したAnthropic社のClaude 3は、いくつかの分野ではGPT-4を上
Vue/Vite 関連のライブラリー名の読み方は間違えられやすいものが多く、混乱を招くことがあります。この記事では、2024 年現在における Vue/Vite 関連ライブラリーの正式な読み方や由来をまとめ、正しい知識を共有することを目的としています。 Vue フロントエンド UI フレームワークのひとつ。 「ヴュー」と読む（口語だと「ビュー」と発音することが多い）。 Vue（発音は /vjuː/、view と同様） https://ja.vuejs.org/guide/introduction.html#what-is-vue Pinia Vue 公式の状態管理ライブラリー。 「ピーニャ」と読む。スペイン語で「パイナップル」を表す単語 piña に由来。 「ピニア」ではない。 Pinia (pronounced /piːnjʌ/, like "peenya" in English) htt
最近Sassを使ってないなぁって話
2023年10月26日 Webサイト制作 初学者向けの記事やSNSの投稿で「Sassはマジで必須！」なんて書いているのを見かけますが、私の場合、そういえば最近は素のCSSばかりでSassは使っていないなーと思ったので記事にしてみます。私自身Sassが大好きでずっとお世話になっていましたが、CSSの進化も著しく、使い所があまりなくなってきているんですよね。 ↑私が10年以上利用している会計ソフト！ 変数やネスト、計算はCSSだけでOK 過去記事「Sass不要！CSSだけでも変数やネスト、演算子が使えるよ！」でも書いたとおり、Sassのメリットでもある変数やネスト、数値の計算はCSSだけでも可能です。 変数は過去記事「CSSで変数（カスタムプロパティ）を使ってみよう」で紹介したように、メディアクエリーによって柔軟に変化させたい時は、SassよりもCSSのカスタム変数の方が便利です。計算式を使い
「Svelte」はWebページ用UIフレームワークで、コンパイル時にプレーンなJavaScriptを生成するといった特徴があります。本連載ではSvelteの活用方法を順を追って説明していきます。初回となる今回は、Svelteの概要と特徴を説明するとともに、実際にプロジェクトを作成して実行させ、Svelteを体験します。 はじめに WebページのUIを構築するためのライブラリやフレームワークは、ReactやVue.js、Angularといったさまざまなものが存在します。本記事で取り上げるSvelteも、そのようなフレームワークの1つです。 図1 Svelteの公式ページ 他のライブラリやフレームワークでは、それ自体のコードがブラウザーに読み込まれて実行されるのに対して、Svelteでは、Svelte自身のコードを含まないプレーンなJavaScriptをコンパイルで生成するため、実行ファイルサ
7月21日、Sveltrisを使用して相互運用可能なReactとSvelteアプリを構築する方法が発表されました。 Sveltrisは、ReactとSvelteの独自の強みを組み合わせることで、より効率的でカスタマイズされたソリューションを提供します。 この記事では、Sveltrisの詳細な説明と、ReactとSvelteを組み合わせてアプリを構築する際の利点と欠点について紹介します。 7月21日、Sveltrisを使用して相互運用可能なReactとSvelteアプリを構築するためのツール「Sveltris」がリリースされました。 Sveltrisは、ReactとSvelteの独自の強みを組み合わせることで、より効率的でカスタマイズされたソリューションを提供します。 この記事では、Sveltrisの詳細な説明と、ReactとSvelteを組み合わせてアプリを構築する際の利点と欠点について紹
LLMに狙いどおりの動きをさせるために内部で使われているプロンプトエンジニアリングから、LangChainに入門する「プロンプトエンジニアリングから始めるLangChain入門」。ここで大嶋勇樹氏が登壇。最後に、LangChainのモジュールである「Agents」について解説します。前回はこちらから。 LangChainのモジュール「Agents」 大嶋勇樹氏：最後に、一番おもしろいモジュールであるAgentsを見ていこうと思います。質問をまあまあもらっていますが、最後までいってから回答できればと思います。最後に、一番おもしろいのがこのAgentsです。 まずAgentsのモチベーションですが、Indexesを使ってVector Storeを検索する以外にも、LLMが必要に応じていろいろなことをしてくれたら夢が広がると思います。 例えば、必要に応じて知らない知識だったらGoogleで検索し
RubyKaigi 2024 のサイネージについて
今月中旬に沖縄県那覇市で RubyKaigi 2024 を開催した。COVID-19 対応をしていた RubyKaigi Takeout 2020, RubyKaigi Takeout 2021, RubyKaigi 2022, RubyKaigi 2023 とは異なり、今回は配信を伴わないオフラインのみの開催だった。 わたしは Organizer の一人として Sponsor Relations 業などをしつつ、Wi-Fi の支度をしたり、サイネージの支度をしたりしていた。Wi-Fi の話はこれまでもいくつか書いている のでまた今度として、今回はサイネージの話をかきます。 RubyKaigi ではいくつかのサイネージの映像を用意して会場のあちこちに表示している。各セッション会場の横に添えて字幕やチャット, LT タイマーを流すサブスクリーン、お知らせやセッション案内を廊下に設置したモニタ
こんにちは、ファインディ株式会社でフロントエンドのリードをしております 新福(@puku0x)です。 この記事では、IT/Webエンジニアの転職・求人サイト Findyのメッセージ画面の改善についてご紹介します。 メッセージ画面の課題 メッセージ画面の改善 Apollo Clientキャッシュの利用 読み込み画面の条件修正 ページ設計の最適化 まとめ メッセージ画面の課題 Findyのメッセージ画面は数年前にデザインを刷新しました。 現在では、3種類のメッセージを表示するようになっています。 通常のマッチングのメッセージ プレミアムスカウトのメッセージ Findyからのメッセージ 機能拡充される一方で「読み込みが多い」「画面遷移がサクサク動くようにして欲しい」との声をいただく機会が増えていきました。 実際に触ってみると確かに読み込み画面が頻繁に表示され、画面遷移に時間がかかっていることがわ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Reactのコードを打ち込むタイピングゲームを作った話&個人開発の流れ
React Server Components を使うためのミニマムなフレームワーク Waku
Server Actions の同時実行制御と画面の状態更新
Microsoft社のアーキテクトが説く、LLM実装の最前線 登場から今までを振り返って、予想する未来像
React Compiler – React
LLMの普及で、ますます重要となるベクトルデータの活用 シチュエーション別「Pinecone」の3つのプラクティス
Next.jsとGoを使っていきます - トレタ開発者ブログ
Reactの状態管理におけるuseReducerとuseContextの活用例
ReactにおけるRef：DOMへのアクセスから命令的APIまで | POSTD
React の変数・状態をライフタイムで分ける――アクション/レンダー/コンポーネント/ファイル
AIエンジニアがいない中でLLMとどう向き合ったか 自社プロダクトへのAI導入で得た、4つの学び
WinterJS 1.0 · Blog · Wasmer
Next.js で React Compiler を試しつつ出力コードを見てみる
JSConf JP 2023 公開資料・Xアカウントリンクまとめ
Sansan株式会社を退職しました（約6年お世話になりました） - 明日から本気出す
明日から使えるTypeScriptの応用テクニックその3 -Polymorphic Component編-
Claude 3とGPT-4のコーディング性能を比較！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Vue / Vite 関連ライブラリー名の読み方 2024
Webページ用UIフレームワーク「Svelte」とは？ プレーンで軽量なJavaScript生成を体験しよう！
Sveltrisが公開 ー ReactとSvelteの「いいとこ取り」なフレームワーク
まるで“LLMがツールを使う”かのように動作する デモから見るLangChainのモジュール「Agents」の使い方
Findyのフロントエンドにおけるメッセージ画面のパフォーマンス改善 - Findy Tech Blog