※本記事に出てくるアニメーションは全てCSSで作られています はじめまして、新卒エンジニアの yui540(@yui540)です。普段は、pixivFANBOXというサービスのCSSエンジニアをしています。 今回は、私がコーディング&ページ演出のアニメーションを担当させていただいたPIXIV TECH FES. の LP(第一弾)の CSSアニメーションの実装方法を一部解説します。 第一弾 conference.pixiv.co.jp 第二弾 conference.pixiv.co.jp とその前に、「PIXIV TECH FES.って何？」という方もいると思うので、簡単にご説明します。 PIXIV TECH FES. は、私たちピクシブのエンジニアが普段からお世話になっている方や、 お話ししてみたい方をお招きして、サービス開発で得た技術的知見とピクシブの未来についてお話しするテックカンフ
こんにちは。駅メモエンジニアの id:dorapon2000 です。 約半年前の 6 月 1 日にステーションメモリーズ！（駅メモ！）10 周年を記念してタイムラインと地図の切替機能をリリースしました。大変好評を頂いておりとても嬉しいです。 今回は、その機能の中で毎秒最寄り駅を計算するロジックをどのように実現しているのかについてお話します。様々なスペックの端末で遊ばれているため、可能な限りリソースを節約するような工夫をしました。堅い言い方をすれば、過去の計算情報を使った最近傍探索アルゴリズムを実装しました。 記事中のサンプルコードは TypeScript で記述しています。 2024/11/22 追記： はてなブックマークでのご指摘ありがとうございます。 ご指摘をいただいた「事前計算の時間計算量」と「基準点と現在地の距離が近すぎるとき」の説明部分を修正しております。 誤：事前計算を O(N
この前ポジショントークしたらそれなりに反響があったので書いてみる。 これまでの人生を振り返ると毎年ラジオや電話や配信サービスを作っている気がするし、なんかそういう仕事が回ってくることが多い気がする。 最近自分なりに答えが出たかなと思ったことがあるので言語化してみようと思う。 OGP は Flux ぽい画像だ。 注意・免責事項 ここにあるソースコードは不完全です。これは私が元々手元で実験していたボイラープレートであるとはいえ、いろんな仕事で培ったノウハウ的なものも含まれているので、念には念を入れて意図的に要件が透けそうな箇所は削除しています。 その結果元々のボイラープレートと乖離してしまい、動作しないコードになっています。ただ概念を伝えるには十分なコードになっているはずなので、脳内補完してください。質問は Twitter のメンション、もしくは Issue でのみ受け付けます。 (完全版を書
概要 GPT-4 に全自動で Minecraft をプレイさせる論文 "Voyager: An Open-Ended Embodied Agent with Large Language Models" を紹介します。 Voyager は、継続的・段階的に複雑なタスクを学習し続けることができ、マップ開拓や新アイテム獲得の能力で既存手法に勝ると主張されています。 既存手法との違い LLM にツールや外部 API を与えて自律的に計画・行動させるアルゴリズムと言うと、ReAct, Reflexion, Auto-GPT などが特に有名です。 これらと Voyager の一番の差別化部分は、Iterative Prompting Mechanism および Skill Library と呼ばれるコンポーネントです。 Voyager はボットを操作するために Mineflayer という Java
プログラミングをしているとき、変数名や関数名の命名に迷ったことはないでしょうか？ 時間をかけて考えた変数名や関数名を後で見返したときに何の処理なのかわからないと思ったり、他の人が書いたコードを理解するのに時間がかかった経験は誰でもあると思います。 一般に、プログラマーはコードを書いている時間より読んでいる時間の方が長いと言われています。 わかりにくい命名はコードを読んでいる時間を長くしたり、バグを生む原因になってしまいます。 この記事ではGoogleやAirbnbといった企業が採用しているスタイルガイドや、世界中で使われているJavaScriptライブラリであるReactとVue.jsのコードを調査する中で見つけた、わかりやすい命名をするためのテクニックを初級編と上級編の2回に分けて紹介します。 初級編では、実際に仕事をする中でよく目にしたり自分でも使うことの多いものなど、すぐに使えるテク
ステップ①：「ChatGPT for Google」をインストール まずは、Chromeの拡張機能である「ChatGPT for Google」をインストールしましょう。 すでに50万人以上のユーザーがインストールしています。 ステップ②：OpenAIのAPI Keyを取得 OpenAIに登録してAPI Keysページにアクセスします。 「Create new secret key」をクリックします。 生成されたAPI keyをコピーします。緑のボタンをクリックすると、簡単にコピーできます。（この後使います） ステップ③：Apps Scriptにコードをコピペ グーグルのスプレッドシートを開きます。 タブにある「拡張機能」から「Apps Script」をクリックします。 画面が表示されたら、以下のコードを貼り付けます。 「SECRET KEYを入力」の箇所には、先ほどOpenAIで取得した
OpenAPI Generator で API Client と型を自動生成した話 - BASEプロダクトチームブログ
フロントエンドエンジニアの @rry です。 自分は BASE の Sales Promotion というチームで主に新規機能開発を行っています。このチームでは主にオーナーさんの使う管理画面に新しく機能追加をしています。 そこで、管理画面で使っている API Client と型を、OpenAPI Generator を使って自動生成するようにしてみたのでそのお話を書きたいと思います。 そもそも OpenAPI とは？ https://www.openapis.org/ OpenAPI とは、RESTful Web サービスを記述、生成、使用、および視覚化するための仕様です。 ※ 以前は OpenAPI ではなく仕様自体も Swagger と呼ばれていましたが、現在は仕様自体については OpneAPI と呼ばれており、Swagger というのは OpenAPI を使ったツール群のことをさすよ
先日、React Server Componentsについてまとめる機会がありました。 この記事では、React Server Componentsの概要と、デモを触る中で感じたことについてご紹介します。 React Server Componentsとは React Server Componentsは、Reactコンポーネントをサーバーサイドでレンダーする新しい技術です。 一部のコンポーネントをサーバーサイドでレンダーしてしまうことで、アプリケーションのパフォーマンスを上げることを目的とします。 図は、デモの画面のうち、サーバーでレンダーされる部分を青で、クライアントでレンダーされる部分を赤で示したものです。 ページ全体をサーバーでレンダーするのではなく、一部のコンポーネントはクライアントにレンダーさせていることがわかります。 また、React Server ComponentsはCo
この資料のアレ。 mizchi.hatenablog.com Reducer は単なる (State, Action) => State の関数で、redux.combineReducers は複数の reducer を名前空間でマップした新しい reducer にするもの。 Rx分かる人、Redux分かる人向けに、 redux.combineReducers を実装して、Rx.Observable.scan で reducer として実際に動くコードを書いた。 const Rx = require('rx') const combineReducers = reducerMap => { const initialState = Object.entries( reducerMap ).reduce((acc, [key, reducer]) => { return Object.ass
皆さんこんにちは。現在、フロントエンドでは宣言的UIが大流行しており、そのためのライブラリもReactを筆頭に複数存在しています。 ライブラリが複数存在するところには当然のように比較や論争が起こるものですが、UIライブラリの場合はパフォーマンスがよく焦点となります。 筆者はReactの信者ですが、Reactは古株ということもあってか、最近の議論ではReactは他のライブラリと比較されるかませ犬のような役割を担うのがよく見られます。「仮想DOMは必要ない」といった類のものです。 しかし、筆者の考えではReactは今でも、もっとも真剣にパフォーマンスに取り組んでいるUIライブラリです。特に、Reactはパフォーマンスを高いユーザーエクスペリエンスのための手段として捉えており、ドキュメントにもユーザーエクスペリエンスという言葉が多く出てきます。 そこで、今回はReactが最も有利になるようなベン
Reactアプリを作成 Material-UIで管理画面を作るためのベースとなるReactアプリを作成します。 Create React App Create React Appで新しいReactアプリを作成します。 npx create-react-app react-material-ui-sample --typescript プロジェクトのディレクトリへ移動して実行します。 cd react-material-ui-sample npm start ブラウザにReactアプリが表示されます。 ディレクトリ構成 ディレクトリはあまりネストさせすぎずシンプルな構造にしました。コンポーネントの分け方はAtomic Designを参考にしています。 src/ ├ components/ │ └ atoms/ # 原子（個々のパーツ） │ └ molecules/ # 分子（原子の集合体）
何問解ける？TypeScriptクイズ！ #techtekt Q - techtekt
みなさまこんにちは。techtekt編集部です。 パーソルキャリアのエンジニアやデータサイエンティストなどが出題する「techtekt Q」という新たなコンテンツをスタートしました。 社内でよく使われる言語から、注目しているフレームワーク、答えを導くプロセスなど、さまざまな視点でクイズを出題します！ トップバッターをかざってくれたのは、主に新規サービスの開発を担う「サービス開発部」からYuto SAGAWAさんと、@_k725さんからの出題です。さて、あなたは何問解けますか？？？ ※Yuto SAGAWAは退職していますが、本人の同意を得て掲載を継続しています。 出題背景 私達のチームではメインの開発言語にTypeScriptが採用されています。 TypeScriptには静的型付けなどがあり、またトランスパイルする時点でエラーが分かることから、複数名での開発で便利なことが特徴です。 便利で
React Hook Formを1年以上運用してきたちょっと良く使うためのTips in ログラス（と現状の課題）
はじめに 早いものでこちらの記事が公開して約1年、ログラスでReactを書き始めて1年以上が経ちました。 今回はフロントエンドのアプリの中でも特段重要なフォーム、特にReact Hook Formについての解説をしていきます。 今回のTipsは公式がベストプラクティスとして発表しているものではなく、あくまで個人が1年間の経験の上で良いとしているものであしからず。 なるべく何故良いかの説明もしていきます。 目次 useFormをラップしてタイプセーフにする React Hook Formへの依存するコンポーネントを分ける yupを使って見通しの良いバリデーションを実装する 1. useFormをラップしてタイプセーフにする ログラスでは useForm をそのまま使うことはせずラップしています。理由は一部の型づけがゆるく実行時例外が起きる可能性があるためです。 問題なのは defaultVa
off-the-main-thread は今フロントエンドで熱いテーマの一つです。日本語圏では今ひとつ話題になってないので紹介しておきます。 off-the-main-thread の概念の大まかな概要については、Chrome 開発者の nhiroki さんの日本語の記事があるので、こちらを参照してください。 nhiroki.jp speakerdeck.com ここまでのあらすじ 従来のウェブブラウザーでは、一つの画面につき一つ割り当てられる、UI スレッドと呼ばれる名前空間で様々な処理を行ってきました。DOMセマンティクスの評価, CSS による rendering / painting、JSのScripting…。もちろん裏側ではブラウザが様々なバックグラウンドサービスに処理を委譲し、スレッドで実行され、その非同期な結果を受け取っているわけですが、少なくともUIスレッドで走るJSから
OpenAI が提供している ChatGPT は非常に面白いですね。今年以後、GPTやChatGPT周りがさらに流行ると思います。 この記事は、TypeScriptでChatGPTクローンを作る第一弾です。長くなりすぎるため、この記事では、GPTを使った検索エージェントを実行するまでを取り上げます。 検索エージェントは「ぼっち・ざ・ろっくの作者は？」と尋ねたら検索エンジンとGPTを使って「はまじあき」という結果を生成できる技術です。 またこの記事や、続く記事でLangChainのプロンプトをあれこれ読み解いていこうと考えています。 筆者は機械学習の初心者であるため、間違ったことが書かれている可能性があります。間違いがあった場合は、ぜひご指摘いただけると幸いです。 なお、この記事では添削にChatGPTおよびGPT-3.5を使っています[1]。 どうやってTypeScriptでChatGPT
対象 業務レベルでサーバーサイドでJestを書いたことはないけれど、新プロジェクトでは書くことになったみたいな方を想定して記述しています。 Jestについては中々ベストプラクティスが集まりにくいので、経験的にこう書くと「きれいに」・「早く」・「正確に」書けるよというTipsを集めてみました。もし、よろしければお読みください。 前提 TypeScript Node.js Jest DBアクセスありの状態を想定しています 1. it文内では、必ず1回は、expectをつかって検証をする JestのPRをレビューしてるとたまに見受けるのですが、expectを使ってないケースがあります。 // NG it('userを正常に、作成できること', async() => { await createUser({ name: 'Mike' }); }); // OK it('pdfが正常に削除できること
React でフォームを作るとき「制御・非制御」コンポーネントに関する知識は必須です。デザインシステムを作成するにあたり、どちらを採用するか検討されたこともあるかと思います。 「制御・非制御」コンポーネントの差分を一言でまとめると、次のとおりです。 制御コンポーネントはライブラリ（React）が「入力要素の状態」を管理 非制御コンポーネントは「入力要素の状態」を DOM 自身が保持 「制御・非制御」コンポーネントと Form ライブラリ React Hook Form は、非制御コンポーネントを使うことで、少ないコード量で高パフォーマンスの Form 実装が実現できる人気のライブラリです。「非制御コンポーネント」として作成された<Checkbox>コンポーネントの例を見てみましょう。次の方法で<input type="checkbox" name="test" />がレンダリングされ、Fo
【追記あり】ES2022 Array#at がちょっとおかしい #fix_ecmascript_at - Qiita
既に Stage 4 になっているので諦めていたんですが、流石に見逃せないかなと思ったので TC39 の Discourse にトピックをたててみました。意見がある方はこちらにお願いします。 https://es.discourse.group/t/fix-at/983 議論に伴って私が実際に欲しかったものをモジュールにして公開してみました。 https://github.com/petamoriken/safe-at それといまいちユーザーからの声が伝わっていない感じがしたのでハッシュタグ #fix_ecmascript_at を用意してみました。協力をよろしくおねがいします。 String#char{At, CodeAt} という存在を忘れてたんですが、この似た名前のメソッドたちが引数を整数に丸めるのに String#at が丸めないのはたしかに変だということに気づいてしまったので、自
もはやReactにHooksのない生活は考えられず、私たちのReactコードの中には多数のHooksが使われています。 一方でその弊害として、使われているHooksが多すぎてコードが散らかり始めた人も多いと思います。Hooksは便利ですが粒度は小さく、プログラムの規模によっては多用しなければなりません。 そこでカスタムHooksの使用を勧めます。カスタムHooksを使うことでコードの見通しを良くすることができます。 カスタムHooksをカジュアルに使っていく カスタムHooksというと、どちらかというとReactの中では難しい部類に入ります。主に「使い方がわからない」「公式ドキュメントが不親切」「ネットの解説が難しい」あたりが問題になるでしょう。しかし難しい機能だからと言って難しく使う必要はなく、自分の使える範囲で自由に使えばいいのではないかと思います。 カスタムHooksは一般にロジック
import { VoltAgent, Agent, createTool, createHooks } from "@voltagent/core"; import { VercelAIProvider } from "@voltagent/vercel-ai"; import { openai } from "@ai-sdk/openai"; import { fetchRepoContributorsTool } from "./tools"; import { fetchRepoStarsTool } from "./tools"; // Create the stars fetcher agent const starsFetcherAgent = new Agent({ name: "Stars Fetcher", description: "Fetches the numbe
C言語やC++,Javaにはvolatileという修飾子があります。組み込み系ソフトウェアやマルチスレッドのアプリケーションを書いている方にとっては、なじみ深い存在ですが、そうでない方にはあまり縁がないのかもしれません。しかし、volatileの使い方や存在意義を知らないままコーディングを行うと、思わぬバグを引き起こす場合があります。今回は、そのvolatileキーワードについて簡単に説明したいと思います。 volatileは初期のCであるK&Rには含まれていませんでしたが、ANSI C(C89)以降のC標準規格にはconstと一緒に含まれるようになりました(constとvolatileをあわせてcv修飾子と呼ぶこともあります)。一般的なCなら必ず備えている修飾子です。 volatile修飾子の意味ですが、「プログラミング言語C ANSI規格準拠」によると、 volatileの目的は，黙っ
Intro 脆弱性の原因となる DOM 操作の代表例として elem.innerHTML や location.href などが既に知られている。 こうした操作対象(sink) に対して、文字列ベースの代入処理を行う際に、一律して検証をかけることができれば、脆弱性の発見や防止に役立つだろう。 そこで処理前の文字列に対し、処理後の文字列を安全であるとして明示的に型付ける TrustedTypes という提案がされている。 まだ未解決の部分が多い提案だが、現時点での仕様と実装を元に、このアイデアについて解説する。 WICG/trusted-types Intent to Experiment: Trusted Types Sink XSS などの原因となる DOM 操作として、 DOM に直接文字列を展開する処理がある。 element.innerHTML location.href scri
シンプルさとパフォーマンスを両立した API 設計と実装の一例 - HeartRails Tech Blog
こんにちは、エンジニアの村田です。今回はシンプルさとパフォーマンスを両立した API を作るためにはどうすればよいのかについて述べていきます。 背景 いままで API サーバーを作ってきて、シンプルな API にすればパフォーマンスが犠牲に、パフォーマンスを優先すれば実装が複雑になって保守が大変になるということを経験してきました。具体的には、 関連リソースの Entity が何重にもネストしていたり、同じリソースに一覧用、詳細用などの Entity があり実装、保守が大変 1. の問題を解消するためにシンプルな API にする 2. では N+1 の問題がありパフォーマンスが悪い 1. 2. の問題を解消するためにリソースの Entity はシンプルにしつつ、パラメーターで関連リソースを指定すると関連リソースの Entity を埋め込んで返すようにする 4. だと関連リソースの権限管理やペ
Remixの凄みを紹介したい
DevinはクラウドエンジニアAIになれるのか!? 実践的なガードレール設計/devin-can-become-a-cloud-engineer-ai-practical-guardrail-design
こんにちは、クレイの正岡です。 コロナ禍が始まってから小学生時代以来のゲーム生活を送っています。ゲームボーイと呼んでください。 さて、今回は React × Typescript でコードを書いている人／書こうとしている人に向けて、Reactコンポーネントの型定義について頭の片隅に置いておいて欲しい情報を共有したいと思います。 寝ながら使えてしまうReactコンポーネントの3つの型 () => JSX.Element 型 interface Props { text: string } const Hoge = ({ text }: Props) => { return ( <p>{ text }</p> ) } 上記のように返り値の型を特に指定していない場合、 このコンポーネントは JSX.Element型 を返す関数（ () => JSX.Element ）として返ります。 React
「経年劣化に耐えるコード」というのは、だれもが目指すものでしょう。「そもそもフロントエンドのコードは、今ある技術で最良のものを書き捨てるべき」という意見も理解できますが「備えあれば憂いなし」ということもありますので、ここにメモを残します。あくまで、私なりのベストプラクティスですのでご了承ください。 5層に別れた SFC 私はレイヤーによる技術の分離で、ReactComponent の経年劣化に備えています。ここでいうSFCとは「Stateless Functional Component」の略称ではありません。Vue.js の文脈にある「Single File Component」を指します。 // (1) import層 import React from 'react' import styled from 'styled-components' // (2) Types層 type
Storybook First な開発のススメ
Storybook first な開発とは Storybook での呼び出され方を意識しながらアプリケーションコードを書くことをそのように呼んでいます。 道具に設計がひきづられるのはアンチパターンと言われそうな気もするのですが、コンポーネントのカタログを整備していくことは、コンポーネントが良い感じに再利用可能な形で分離できるということでもあり、やっていくとむしろ正道に近づいていくと思います。 Storybook First のコンポーネント設計や型定義をすると、パーツに限らず Storybook でカバーできる範囲が広がり、ページそのもののサンドボックスを作れます。 そして API がない状態でもデータを使って開発ができたり、特定のスナップショットの再現やタイムトラベルに近いことも可能になるというメリットがあります。 つまり、ただのコンポーネントカタログとしてではなく、開発のためのサンドボ
React Native導入ガイド - 環境構築からクロスプラットフォーム開発のメリットまでを理解する｜ハイクラス転職・求人情報サイト AMBI（アンビ）
React Native導入ガイド - 環境構築からクロスプラットフォーム開発のメリットまでを理解する React Nativeは、クロスプラットフォーム開発を行うためのツールの1つです。JavaScript言語の中で、UIフレームワークのReactを用いてUIの記述と状態管理を行うことで、アプリの動作を組み立てます。本記事では、React Nativeの導入やモバイルアプリ開発の現場で起きがちな課題を解決する手段としての強みについて解説します。 ReactとReact Native Reactとは／React Nativeとは／React Nativeの正体 React Nativeの環境構築 npm文化圏の流儀にのっとったワークフロー／スタイル定義／npmのライブラリ使用／リッチな機能を追加 広がるReact Nativeの世界 Windows向けのMS公式実装／ブラウザ向けの逆輸入／
階層メニューやトーストUIが簡単に作れる新技術！ JavaScriptで利用するポップオーバーAPI 2023年5月〜6月にリリースされたChrome 114とEdge 114には、「ポップオーバーAPI」というAPIが搭載されました。 ポップオーバーとはコンテンツの1番上に重ねて表示するUIで、ユーザーにアクションを促したり、補足の情報などを伝えるために画面に表示します。ポップオーバーAPIのMDNのドキュメントではオーバーレイ、ポップアップ、ポップオーバー、ダイアログなどを総称して「ポップオーバー」と呼んでいます。 ウェブサイトでよく見かけるポップオーバーですが、実装するには意外と調整や考慮の多いUIです。たとえば、画面の1番上に重ねるためにはz-indexで他の要素との重なり順を調整する必要があります。Escキーを押した時や要素外をクリックした時にポップオーバーを閉じるには、Java
Ruby の lazy loading の仕組みを利用して未使用の gem を探す - クックパッド開発者ブログ
技術部開発基盤グループのシム(@shia)です。 最近は cookpad のメインレポジトリを開発しやすい環境に改善するために様々な試みをしています。 この記事ではその試みの一つとして不要な gem を検出し、削除した方法を紹介したいと思います。 背景 cookpad は10年以上にわたって運用されている巨大なウェブアプリケーションです。 巨大かつ古いアプリケーションには昔は使っていたが、現在は使われてない依存性などが技術負債として溜まっています。 事業的観点から技術的負債を完全返却するのはコストとのバランスが悪いことも多いです。 これは20万行を超えるプロジェクトを幾つも抱えている cookpad のメインレポジトリも例外ではなく、その規模から使ってないと思われる依存性を探しだすのも大変な状況でした。 どうするか 人が頑張るより機械に頑張らせたほうが楽ができるし、何より確実です。 ですの
module: add --experimental-strip-types by marco-ippolito · Pull Request #53725 · nodejs/node It is possible to execute TypeScript files by setting the experimental flag --experimental-strip-typ... 💁♀️ まだマージされてない点に注意してください --experimental-strip-typesというフラグを実行時に付けることにより、Node.jsでTypeScriptのコードを実行できるようになるPRが出てきました。 背景 TC39でも型注釈の話題(議事録を読むとブラウザとの兼ね合いもあり道のりは長そう)が存在するほどJSのコードにおいて、型は当たり前となっています。 Node.jsと同
デザインとHTMLのズレを検出！ Node.jsとPuppeteer活用のビジュアル校正テストで実装時のケアレスミスを防ぐ ウェブ制作において、デザインとHTML実装の一致はエンジニアとして当然求められるものです。とはいえ、デザインツールとブラウザ画面をにらめっこしながら確認するのも大変です。本記事ではNode.jsで動くヘッドレスブラウザのPuppeteerパペティアーを使ってデザインとのズレを検知するビジュアル校正テストの方法を紹介します。 ウェブ業界ではデザイン制作とHTML制作が分業である場合がほとんどです。ビジュアル校正テストを導入することで、HTML制作の品質向上に役立てられます。デザインとHTML実装が別の会社のようなプロジェクトでは、HTML実装時の品質保証の担保になりますし、デザイナーとフロントエンドエンジニアが近い組織でもコミュニケーション円滑化に役立つでしょう。ICS
ブックマークしておくと便利！ Tailwind CSSで実装された最新のUIコンポーネントライブラリ -Sailboat UI
// tailwind.config.js const defaultTheme = require("tailwindcss/defaultTheme"); const colors = require("tailwindcss/colors"); module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: { // Set font family fontFamily: { sans: ["Inter", ...defaultTheme.fontFamily.sans], }, // Set theme colors (Required config!) colors: { primary: colors.blue, secondary: colors.slate, }, }, }, // Add plu
現在開催中のre:InventでAWS Lambdaがコンテナのサポートをするという発表がありましたね。 aws.amazon.com というわけでちょっと試してみました。 素材はここにあげてあります。 github.com 流れとしては、 普通にファンクション書く Dockerfile作る イメージをビルドする イメージをECRにプッシュする Lambdaファンクションを作るときにECR上のイメージを指定する という感じです。3,4のコマンド実行例はReadmeに記載しています。 イメージに関してはRuntime APIを実装する必要があるんですが、現在Lambdaがサポートしている各言語向けには既に用意されていてリリースされています。例えばNode.jsであればnpm install aws-lambda-ricでインストールできます。 加えて、これを組み込み済のベースイメージが既に用
TypeScriptの型初級 - Qiita
この記事は「TypeScriptの型入門」の続編です。入門の続編ということなので初級というタイトルにしてみました。TypeScriptの型よくわからんという方は先に入門から読むことをおすすめします。入門レベルのTypeScriptくらい分かるよという方は読まなくても大丈夫です。 TypeScriptの型入門 さて、前回の記事ではTypeScriptの型を一通り紹介しました。この記事ではその続編として、実用上必要になるTypeScriptの型の挙動を理解したり、標準ライブラリに存在する型の使い方を理解することを目標にします。前回に引き続き、あくまでTypeScriptの型に関する話ですから、JavaScriptの言語機能とか、TypeScriptの構文とかの話はしません。悪しからずご了承ください。 最終更新： 2019-03-16 (TypeScript 3.4に対応しました） union型
AI「できました！」人間「（…本当に大丈夫か？）」 Devinと探る、AIコードセキュリティ虎の巻 - GMO Flatt Security Blog
万華鏡のように変化するテクノロジーの世界。かつて専門家が丹精込めて紡ぎ出していた『創造物』――精巧な絵画や心揺さぶる音楽、そして複雑なプログラムコードでさえも――が、今やAIによって驚くほど自然に、そして巧妙に生み出されています。その筆致やロジックのきらめきが、人間の手によるものか、それとも精緻なアルゴリズムの産物か。見分けることの難しさは日増しに高まり、私たちに新たな問いを投げかけているようです。 と、ここまでがGemini 2.5 Proに書いてもらった導入文です！記事全文を読んでもらったうえで、「人間が書いたのと見分けがつかないような面白い導入文を載せて、AIが生成するものが高度化していることを興味深く紹介したい」と言ったら書いてくれました。まあまあいい感じですね。全然いい感じじゃないと思った人はAIに文句を言ってください。 個人的に冒頭の文章はわりかしいい線をいっていると思いますが
こんにちは、エンジニアの@sota1235です。 タイトルの通り、今回は愚直に改善をした話をします。 メルカリのJavaScript メルカリにおけるJavaScriptの活用場面は以下のようなものがあります。 メルカリWeb アプリ内Webview 社内ツール React Native Node.js製のbotやGoogle App Scripts etc… いずれもサービスにとって重要なものであり、サーバサイドエンジニアであってもJavaScriptに触る機会は少なくありません。 かくいう私も普段はサーバサイドエンジニアですが、JavaScriptコードを書いたりレビューする場面が多くあります。 そんな中でWebチームにおいて、JavaScript開発でいくつか問題がありました。 課題その1: JavaScriptのレビューコスト問題 1つ目の課題としてJavaScriptのコードをレ
というタイトルで先日 Kaigi on Rails 2021 で話してきました。 プレゼンで話せなかった内容なども含めてブログ記事にも書いておきます。 Intro Railsのことはけっこう知ってるけどNext.jsについて何も知らないという人をターゲットにしてNext.jsとは一体何なのか、いつどこで使えばいいのか、具体的にNext.jsのどういうところがいいのか、どういう機能があるのかという話をします。 最終的には普段Railsを書いているエンジニアが、Next.jsよさそうなんで使ってみようかな？と思ってもらえるといいかなと思っています。 Next.jsとは何か Next.jsのトップページを見てみましょう。 The React Framework for Production と書いてあります。これは読んで字のごとくですが、Next.jsというのはReactをベースにしたフレームワ
any禁止 絶対に型付けを諦めないための便利なユーティリティ関数 / techstand6
2021/11/10 TECH STAND #6 TypeScriptにて発表した資料です。
はじめに Zennのようなブログ記事やAstroなどの静的サイトジェネレーターが、どのようにMarkdownを受け取り、ドキュメントを生成しているのか。 その仕組みに強い関心を抱いた私はAstroの Content Collections のソースコードを読み始めました。とりわけ印象的だったのは、フロントマターを抽出する gray-matter でメタデータを取り出しつつ、本文をunifiedパイプラインへ流し込む一連の設計です。 この記事では、そうした実装を眺めた好奇心から始まり、多重パース時代の課題、ASTリレーがもたらした転換点やMDX 3・WASM・Edgeが広げる近未来までを、コードと図を交えながら俯瞰します。 第一世代：多重パース時代 Markdown変換ライブラリの草創期を支えた markdown-it や marked は、Markdown → HTML文字列 を1回だけ高
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PIXIV TECH FES.のLPを支えるCSSアニメーションテクニック - pixiv inside
毎秒現在地を使った最近傍探索をしたい - Mobile Factory Tech Blog
WebRTC と React を組み合わせるなら Flux 設計が有効
GPT-4 で Minecraft を自動プレイする Voyager を動かしてみた - Qiita
定番のコード規約とライブラリから学ぶJavaScriptの命名テクニック（初級編） - ICS MEDIA
ChatGPTをグーグルスプレッドシートに連携する方法【コピペでOK】
React Server Components 総まとめ
Redux は 概念的に Rx のサブセットであるという話 - mizchi's blog
Reactに有利なベンチマークを作ってみた - Qiita
React + Material-UIで管理画面を作成してみた | DevelopersIO
off-the-main-thread の時代 - mizchi's blog
TypeScriptでGPT-3.5を使ってChatGPTクローンを作る1 - GPTで検索エージェント
JestのTips集10選。サーバーサイドでNode.jsのJestを書いたことない人向け
React コンポーネントの「制御・非制御」を意識しない方法
ReactのカスタムHooksをカジュアルに使ってコードの見通しを良くしよう
VoltAgent - Open Source TypeScript AI Agent Framework
volatileで最適化を抑制する - 職業としてのプログラミング
安全な文字列であると型で検証する Trusted Types について | blog.jxck.io
【検証】React.FC と React.VFC はべつに使わなくていい説
経年劣化に耐える ReactComponent の書き方 - Qiita
階層メニューやトーストUIが簡単に作れる新技術！ JavaScriptで利用するポップオーバーAPI - ICS MEDIA
Node.jsでTypeScriptのコードを実行できるようになるかも - hiroppy's site
デザインとHTMLのズレを検出！ Node.jsとPuppeteer活用のビジュアル校正テストで実装時のケアレスミスを防ぐ - ICS MEDIA
AWS Lambdaがコンテナをサポートしたのでちょっと試してみた - Sweet Escape
愚直にESLintを導入した話 | メルカリエンジニアリング
RailsエンジニアのためのNext.js入門 - hokaccha memo
Markdown→HTMLはこう進化したーパイプライン最前線