技術コミュニティの活動を通して人生に整合性がとれた ─ 未経験30代がRubyのコア実装に挑むようになるまで - Findy Engineer Lab
高校を卒業した後、コールセンターでの派遣業務や非正規の事務職といった経歴から、33歳でまったく異なるソフトウェア開発の世界に飛び込んだ塩井美咲（@coe401_）さん。短期間でプログラミングのスキルを学び職業プログラマーへの転身を果たしただけではなく、プログラミング言語Ruby自体の開発をテーマとする国際カンファレンスRubyKaigiでも4年続けて発表するほどになっています。 キャリアチェンジの経緯やプログラマーとしての歩みについて塩井さんに伺うと、むしろ技術コミュニティとの出会いと積極的な参加があったからこそ、エンジニアとして多くの成長があったことが分かります。その熱意のベースには、何のためにソフトウェア開発者を志すかという思いがありました。 ▲ 松本市で開催されたRubyKaigi 2023に登壇する塩井美咲さん ソケットライブラリの改善にRubyの開発助成で取り組む 世の中をよくす
Vitest Browser Modeがアツい
Background これまでVitestでコンポーネントのテストを行う時は、jsdom や happy-dom を使ってブラウザ環境を偽装していました。しかし、偽のブラウザ環境を使うことは多くの問題があり、また開発者はテスト以外でどこにも存在しない環境を作り上げるという不毛な作業が必要でした。 この問題を解決するために、Playwright や Cypress などのテストフレームワークは Component Test をサポートしています。しかし、UnitテストでPlaywrightやCypressを使うのは少々Fatであり、Reactのhooksなどのテストをすることができません。 Vitest Browser Modeを使用することで、Vitest上でComponent Testが可能となり、これらの問題を解決できます。 Installation Browser ModeのSetu
次世代Web BandlerのFarmが熱そう
はじめに 昨今、ビルドツールは様々なものが開発され、いかに高速化するか、開発者体験を上げられるかが注目されているように思います。2024年6月にState of JSが公開され、その中でBuild Toolsはwebpackが最も使用されており、次いでViteがランキングしています。 Viteの伸びがすごいですね...🔥 ビルドツールも様々ありますが、2024年4月にFarmというWeb Bandlerのv1.0がリリースされました。 気になってドキュメントサイトを覗いてみるとなんだか良さげな雰囲気を感じたので、Farmの特長と推せるポイントをまとめてみようと思います。 やること、やらないこと やること Farmの紹介 Farmの特長とおすすめポイントの紹介 やらないこと Farmの導入方法や詳細について （ドキュメントがわかりやすい） Farmとは？ Farmは、webpackやVit
React19のRCが発表され数ヶ月が経ちました。Next.jsではReact19のExperimentalな機能を使った実装をいち早くしていたので、少し馴染みのあるアップデートが多かったように思います。 Next.js（特にApp Router）においてReact19のAPIやHooksをどのように使うべきかはNext.jsのドキュメントを見れば大体のベストプラクティスが見えてきます。ですが、実際の開発現場ではApp Routerを採用しているケース以外にもVite+ReactやPages Router, Remixなどと様々な実装があるのが現実です。 そこでこの記事では、特にVite+Reactのスタックを前提にReact19の新機能をいかに活用できるか整理したいと考えています。 また、React19の新機能を見た時にTanStack QueryやSWRのようなサードパーティの状態管理
FigmaのCode ConnectとCode Generation APIを導入しました - スタディサプリ Product Team Blog
はじめに スタディサプリ小学・中学講座を開発している Android エンジニアの @maxfie1d です。 スタディサプリ小学・中学講座ではデザイナーがFigmaで作成したデザインデータをもとにエンジニアがUIのコードを書いています。 UIのコードを書くことはとてもクリエイティブで楽しい作業ですが、一方でUIにたくさんあるプロパティを読み取りながらコードに反映するのはそれなりに時間がかかり面倒でもあります。 この面倒な「デザインからコードを起こす作業」を効率化できないかどうかを考え、Figma の Code Connect と Code Generation APIを導入したのでご紹介します。 デザインからコードを起こす作業の課題 デザインからコードを起こす作業の課題について具体例をもとに説明します。 例えば小学講座で利用しているMainButtonコンポーネントには Size Sty
Okta CIC (Auth0) Enterprise Connectionsを活用した外部IdP（SAML, OpenID Connect）認証設定ガイド | TC3株式会社｜GIG INNOVATED.
Okta CIC (Auth0) Enterprise Connectionsを活用した外部IdP（SAML, OpenID Connect）認証設定ガイド はじめに Okta CIC(Auth0)管理画面における認証関連設定項目 Okta CIC（Auth0）の認証方法(connection)は複数種類があります。例えば、ユーザー名/パスワードをAuth0に登録した上でログインする方法はDatabase Connectionsです。その他にも、Googleアカウントからの認証を実現するのであればSocial Connectionsがあります。Passwordless Connectionsについては以前のブログ記事にてご紹介しました。 このように様々な認証方法に対応していますが、本記事では、Enterprise Connectionsを利用した外部IdPを活用した認証をご紹介します。接続
export const tagSchema = z.object({ name: z .string({ required_error: "Name is required" }) .min(3, "Name is too short") .max(100, "Name is too long"), }) export type TagSchema = z.infer<typeof tagSchema> 一つポイントを挙げるとすると、このクライアント・サーバー間で使用するスキーマを use-tag-form.ts ファイル内で定義していない点です。 通常、状態管理やクライアントサイドのバリデーション検証を含むフォームコンポーネントはuse clientディレクティブを使用して Client Component として実装されます。同様に、そのコンポーネントで使用されるカスタムフックもクラ
はじめに GPT-4o miniが発表されたので、APIを使ってNext.js App routerにて簡単なAIチャットページを実装してみました。Vercel AI SDKを使用しています。 以前にも記事を書きましたが実装内容が古くなりましたので新たに記事にしてみました。（今回はLangChain JSは使っていません） GPT-4o mini また、今回はローカルLLM（Ollama）でも利用できる内容としています。 ※ マシンスペックが足りないなど環境がない方は、Ollamaの部分は読み飛ばしてください。 以前の記事 読者対象 Next.js開発の経験者 事前準備 OpenAI プラットフォームから API キーを作成＆取得しておく。 https://platform.openai.com/ Ollamaも使いたい場合は起動しておきます。 参考ドキュメント コードを書く ステップ N
What the New York Times Missed: 71 More of the Best Books of the 21st Century
What the New York Times Missed: 71 More of the Best Books of the 21st Century Last week, The New York Times Book Review published a list of the “100 Best Books of the 21st Century.” (Well, so far, obviously. Why not just call it the best books of the last 25 years? Do they know something we don’t? Oh well.) To put it together, the Book Review surveyed “hundreds of novelists, nonfiction writers, ac
ジャンプTOON Flutter × GraphQL ~宣言的なアプリ開発の工夫~ | CyberAgent Developers Blog
ジャンプTOON アプリチームの吉田航己(@koki8442)です。 5 月にサービスを開始した 「ジャンプTOON」 では、モバイルアプリを Flutter で開発し、通信には GraphQL を用いています。 本記事では GraphQL の解説、Flutter アプリで GraphQL を活用する際の工夫点や開発の知見を紹介していきます。 目次 GraphQL の概要 ジャンプTOON アプリでの GraphQL の使用 Flutter で GraphQL を使うメリット Flutter × GraphQL 開発の工夫 おわりに 参考文献 GraphQL の概要 GraphQL は Meta 社が REST の問題点を解決するために開発した API クエリ言語およびランタイムです。その概念は特定の言語やデータベースなどに依存するものではなく、ビジネスドメインのデータを Node と E
授業内開発で部室予約システムを開発した話
はじめに こんにちは。calloc134 です。 前回の授業内ハッカソン記事において、200 いいねを頂きました。ありがとうございます！ 自分の大学では、これ以外にも授業内で開発を行う実践的な授業がいくつか存在します。 前回の授業とは別に授業内開発を行う機会があったため、半年ぶりに大学の授業として開発を行いました。 簡単な概要 この授業では、チームで開発の分担を行いながら決められた期限までにコンテンツを制作していきます。自分は後輩とチームを組み、開発を行いました。 本来であればここで開発する内容は静的サイトで十分なのですが、せっかくなので動的サイトを作ることにしました。 後輩に聞いてみたところ、 「自分は軽音楽部に所属しているので、練習室の予約システムを作りたい」とのことでした。 丁度いい機会だと思い、自分の気になっている技術を利用しながら開発を行っていくことを決めました。 全体像 まずは
実は 学校課題の要件を見間違えており、使用するバックエンドが Django ではなく Flask だったため書き直しました😇😇😇😇😇 Django版はこちら はじめに みなさん、マイクロサービスに疲れていませんか？ バックエンドにFlask, Laravelをたてているのに、フロントエンドで別途Next.js(Node.js)をたてているのが意味わからん モダンにWebサービスをたてたいだけなのに、なぜAPIを解放しないといけないのか [Flask React アプリ構築] [検索] 単純にバックエンドはFlask, フロントエンドにReactを使いたい、それだけなのに、こんな複雑な構成にしないといけないの...？ 今回ご紹介するモジュラモノリスなアーキテクチャでは、以下のようにサクッとWebサービスを構築できます。 from flask import Flask from fl
本連載では分散型マイクロブログ用ソフトウェアMisskeyの開発に関する紹介と、関連するWeb技術について解説を行っています。 今回はWebページで3Dモデルを簡単にレンダリング（＋AR表示）できる、model-viewerについて解説します。 3Dってめんどくさい Web開発を行っていると、3Dモデルを表示したくなるケースがたびたび発生します。 たとえば、何かの商品のWebサイトであればその商品の3Dモデルだったり、ゲームが遊べるWebサイトであればキャラクターやアイテムの3Dモデルだったりと、何かと3Dモデルをレンダリングする機会はあると思います。 通常3Dモデルを表示するには、画像や動画とは違って、モデルそのものだけでなくそれを照らす光源や、それを映すカメラの配置・設定も必要になります。他にも、モデルが鏡面を持っているなら、周囲に映り込む景色も環境マップ等で用意しないと、それが鏡面で
JSer.info #700 - Vitest 2.0.0がリリースされました。 Release v2.0.0 · vitest-dev/vitest 非推奨のオプションを削除、一部オプションのデフォルト値の変更などの破壊的な変更が含まれています。 マイグレーションガイドも合わせて公開されています。 Migration Guide | Guide | Vitest Browser Mode改善、expect.pollの追加、test.forの追加などが行われています。 Browser Modeについては、次のページに詳しい説明が公開されています。 Vitest Browser Mode · vitest-dev/vitest · Discussion #5828 Node.js v22.5.0がリリースされました Node.js — Node v22.5.0 (Current) コアモジュ
はてなブログ独自の集計による人気記事のランキング。7月7日（日）から7月13日（土）〔2024年7月第2週〕のトップ30です*1。 # タイトル／著者とブックマーク 1 直近1年間で読んで面白かった本10選 (2023年下期 - 2024年上期) - 本しゃぶり by id:honeshabri 2 自己肯定感低くてもなんとか頑張れたいくつかの方法 - 腹は減る by id:blux 3 唐突に使っているChrome拡張を紹介 - laiso by id:laiso 4 Google フォームの共同編集設定に起因して発生していた情報流出についてまとめてみた - piyolog by id:piyokango 5 どうやったら連続性を維持したまま意識をアップロードできるのか？──『意識の脳科学 「デジタル不老不死」の扉を開く』 - 基本読書 by id:huyukiitoichi 6 生産性
Panic! at the Job Market “I have the two qualities you require to see absolute truth: I am brilliant and unloved.” ready for another too-long article about personal failure while blaming the world for our faults? let’s see where we end up with 7,000 9,000 10,000 11,500 words this time1. this post is sponsored by me trying to not get evicted. funding appreciated: https://github.com/sponsors/mattsta
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React 19によって状態管理はどのように変わるのか
クライアント・サーバー間の一貫したバリデーション管理: Conform + Server Actions
Next.jsでAI Chat UIを作る（ローカルLLMとGPT-4o mini）
Flask + Inertia + Vite + React で作る Web アプリの新たな選択肢
<model-viewer>を使って3Dモデルをノーコードで表示 | gihyo.jp
2024-07-18のJS: #700 - Vitest 2.0.0、Node.js 22.5.0(sqlite)、Private Browsing Mode
今週のはてなブログランキング〔2024年7月第2週〕 - 週刊はてなブログ
Panic! at the Tech Job Market