UI の一部を非表示にする React の Activity コンポーネント React の新しい実験的なコンポーネントとして `<Activity>` が追加されました。これは UI の表示非表示を切り替えるために使用されます。従来の条件付きレンダリングとは異なり、アンマウントされた場合にも状態を保持する点が特徴です。 音声による概要 この音声概要は AI によって生成されており、誤りを含む可能性があります。 React の新しい実験的なコンポーネントとして <Activity> が追加されました。これは UI の表示非表示を切り替えるために使用されます。 import { unstable_Activity as Activity } from "react"; function App({ isVisible }: { isVisible: boolean }) { return (

WebAssembly Advent Calendar 2024の5日目の記事になります． 先月，Deno 2.1がリリースされ，Wasmを直接importできるようになりました． Deno 2.1: Wasm Imports and other enhancements 従来のWasmサポート Denoは今までもWasmをサポートしてきました． 例えば次のようなWATファイルを用意します． このWATファイルは，ポインタと文字列長を受け取るconsole_log関数をインポートし，_start関数を実行すると"Hello, Wasm!"のポインタと文字列長をconsole_log関数に渡します． ;; main.wat (module (import "env" "console_log" (func $log (param i32 i32))) (memory (export "mem

「React Three Fiber」は、Three.jsをReactで扱うためのライブラリです。Reactの特徴である再利用可能なコンポーネントを活かしながら、宣言的に3Dシーンを構築できるのが大きな魅力です。 通常のThree.jsでは、メッシュの作成、マテリアルの適用、シーンへの追加などひとつひとつの処理を命令的に記述する必要があります。しかしReact Three Fiberを使えば、裏側の複雑な処理をライブラリ側が担ってくれるため、作りたいシーンをコンポーネントとして宣言でき、処理の流れがわかりやすいコードが書けます。 ▼ 通常のThree.jsで立方体メッシュを記述する例 const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshNormalMaterial(); const box = n

配列（Array）との比較 JavaScriptにはTypedArrayとは別に配列（Array）の違いを説明します。 ArrayはTypedArrayと比べると柔軟で汎用性が高いです。しかし、Arrayは内部で動的なメモリー管理を行うため、データ処理や転送を高い頻度で行う場合にはオーバーヘッドが発生する可能性があります。 TypedArrayは長さが固定であり、バイト単位のデータ格納が可能なため、メモリーアクセスが効率的に行われます。数値計算においてもバイナリデータを直接操作できるので、高いパフォーマンスが期待できます。また、メモリー領域が連続しているので高速なデータの転送が可能です。 大量のデータを処理する数値計算の場合にはTypedArrayで管理するとデータのまとめた取り回しが楽になります。逆にデータの規模が小さい時は汎用的なArrayが良いでしょう。 TypedArrayは決まっ

概要 socket.ioは低遅延、双方向、イベントベースの通信を行う。 websocketだけではなく、HTTP long-polling, WebTransportもサポートしている。ブラウザやネットワークの状況(e.g., websocketがブロックされてないかとか)を見て、適切な通信方法を選んでくれる。 server側は、node.js, python, java, golang, rustとかも使える。client側もswift, kotlinとか使える 注意点 socket.ioはwebsocket実装ではない。なので、ふつうのwebsocketクライアントはsocket.ioサーバには繋げない。逆に、socket.ioクライアントは普通のwebsocketサーバにはつなげない。 プレーンなwebsocketサーバなら、wsなどを使うのが良い。 特徴 websocketが繋げな

「TensorFlow.js」を使って、ブラウザで「物体検出」を行います。Chromeで動作確認しています。 1. 物体検出「TensorFlow.js」による物体検出のコードは、次のとおり。 <!-- TensorFlow.jsの読み込み --> <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script> <!-- coco-ssdモデルの読み込み --> <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"> </script> <!-- テストに使用する画像 --> <img id="img" src="cat.jpg"/> <script> // 画像の取得 const img = document.getEleme

楽器毎に1小節を任意の数に分割する事ができるリズムマシンを作ってみた。 何かの役に立つかどうかはわかりませんが、一定の周期性を持つインダストリアルなリズムを作るためにデザインしました。 https://g200kg.github.io/flex-rhythm/ ちなみにキジバトの鳴き声の聴こえ方は 9/8 拍子アウフタクト派です。

「TypeScriptではじめる型システム」という記事をn月刊ラムダノートに寄稿しました。 新刊を発売しました "『n月刊ラムダノート』Vol.4 No.3（2024）発行のお知らせ https://t.co/PGppk1aRRA— lambdanote (@lambdanote) 2024年10月4日 どんな内容？ TypeScriptの極小サブセットに対する型検査器を書き、それを通して型システムを体感してみよう、という内容です。 詳しく言うと、boolean型とnumber型と関数型しかないTypeScriptサブセット言語がターゲットです。 型検査器の実装言語にもTypeScript（処理系はDeno）を使います。 TypeScriptづくしの一品です。 わかる人向けに言うと、「型システム入門」という本（通称TAPL）の単純型付きラムダ計算に相当する内容をTypeScriptで説明し

2024年度リクルート エンジニアコース新人研修の講義資料です

去年末ぐらいから Deno を使う割合がグッと増えてきた。最近のJS関連は7割ぐらい deno 環境の VSCode でコードを書いている気がする。 今回はいくつかの実例を示しながら、実際に Deno 使えるじゃんというイメージを持ってもらうためのユースケースを紹介していく。 というか、 deno が普及してくれないと、自分が作ったツールの紹介を全部 deno のインストールから書かないといけなくなる。みんなインストールしといて。 最初に: なぜ Deno を使いたいか 一番の問題点、Node は新しいプロジェクトを一式整えるための手間が非常に重い。 とくに ts で書いたものを他の環境に渡すための方法が未だにしんどい。ある環境で動いたコードをそのままコピーしても、プロジェクト設定の非互換を踏む可能性が非常に高い。 deno にそういう側面がないとは言わないが、非常に少ない。とくに TS

Slack releases platform open beta powered by Deno 2022/09/21にSlackの公式ブログでDenoを使ったSlack platformのオープンベータがリリースされていました javascriptランタイムとして最速を目指すDenoで動くなんてワクワクしちゃいますが、個人的にはDenoだろうがSlack botのインフラができたことが嬉しいです 以前のSlack bot開発 これまでの自前Slack bot開発といえば頑張ってインフラを用意しつつSlack APIを使うか？Boltを使うか？という流れだったと思います 筆者はインフラをAWS CDKのNodejsFunctionをつかってAPI Gateway / Lambdaを用意しつつ、SQSを使っていい感じにtimeoutしないように作っていました Node.jsで開発するのであ

こんにちは！小田島です。ウェブ業界に来る前は手品業界で働いていました。最近は外出自粛で手品をやる機会がないので家でひたすら練習しています。 前回の記事「いまさら聞けないNode.js」は、「わかりやすい」「いい記事」「背景の説明が丁寧」といった好意的な反応が多くて安心しました。 「Denoについては後日記事を書きます」と前回宣言したので、今回はDenoについての入門記事を書きます。よろしくおねがいします！ 対象者 今回は、こんな人が対象です。 Denoって何？ Node.jsとどう違うの？ 全然触ったことないけど何か簡単で応用が効くものを作ってみたい 前回と違い、ハンズオンも含まれています。ぜひ読みながら実際に動かしてみてください。 Denoとは？ 前回同様に超ざっくりと説明すると、JavaScriptとTypeScriptの動作環境です。作者はNode.jsと同じライアン・ダールです。D

半年程前に、以下のような記事を書きました。 この記事では、上記の記事から半年程の間で起きたDenoでのフロントエンド開発に関して影響がありそうな内容などをまとめていきます。 Deno本体のアップデート 直近半年ほどでDenoに導入された機能からフロントエンド開発に影響しそうなものについていくつか紹介します。 npmパッケージの対応状況について 大きな点として、Deno v1.35からAstroが動作するようになったようです。 それ以外にはDenoでNext.jsを動かすための試みがいくつか進んでいるようです。next buildやnext devを動かすための対応がいくつか入っています。 また、直近で公開されたロードマップではSvelteKit, VuePress, Qwik, Remixなどを動かすための対応を進めていくことが検討されているようです。 Remixについては公式でRemix

はじめに 皆さんこんにちは、株式会社エムアイ・ラボのエンジニアです！ 今回はソフトウェア設計のSOLID原則について学習したので、弊社のメインの開発言語であるTypeScriptのサンプルコードを使って共有できればと思います。 SOLID原則は、オブジェクト思考プログラミングにおいて、ソフトウェアがメンテナンスしやすく、拡張や変更に強いソフトウェア設計を行うための原則です。 SOLID原則にはSOLIDの頭文字をそれぞれとった、５つの原則があります。 単一責任の原則（Single Responsibility Principle） 単一責任の原則とは、クラスが一つの機能や責任を持つべきで、クラスが変更される理由は一つであるべきというです。 クラスが一つの機能や責任のみを持つようにすることにより、コードは再利用可能でテストが容易になります。 単一責任の原則を遵守している例 以下のBirdクラ

サードパーティライブラリが無いよ問題 いきなりネガティブな話で申し訳ございません。愚痴みたいなものです。本題ではありませんので読み飛ばしていただいて問題ありません。 Denoユーザーの1人としての個人的な印象として、Denoの勢いは2023年に入った頃から低迷しているように感じます。2022年末からnpm対応によってNode.jsの資産を使えるようになったにも関わらずです。実際のユーザー数はDenoチームではないので分かりませんが、登場から数年経って真新しさも無くなったので、どんなサービスにもありがちなことなのかなと思います。 ありがちとはいえ、ただ低迷しているだけではありません。ここからNode.jsを超えるのはなかなか難しいです。なぜならnpm対応というのは、明示的にNode.jsに対して「生き残っていい」それどころか「あなたが正しい」と宣言してしまったようなものです。Node.jsの

先日 フロントエンドの Monorepo をやめてリポジトリ分割したワケ というブログがバズっていた。そのおかげか、Twitter でもモノレポに関する言及がちょこちょこあった。一家言あるドメインなので書きたい。ただの一家言(a.k.a お気持ち)なのでぜひ皆さんの意見も聞いてみたい。 tl;dr 別に自分はどっち派とかではなく、どっちも選ぶ。強いて言うならリポジトリ分割派で、依存更新がしんどくなったら monorepo 派。 免責 モノレポに対する一家言を書きたいだけであって、内容自体はフロントエンドの Monorepo をやめてリポジトリ分割したワケ と全く関係なく、そのブログで述べられている施策については何も言及しません。ただ一つ言及するとしたら肉の部位がコードネームに採用されているのは良いと思いました。🍖🍖🍖 モノレポにしたくなる状態の前提にあるもの 前提は元記事と同じように

yarn v3 が出ました。詳しい解説は譲るとして、esbuild integration や パフォーマンス向上が目玉です。 Yarn 3.0 🚀🤖 Performances, ESBuild, Better Patches, ... - DEV Community 流石に v1 はもう古いが、 v2 からの独自路線は受け付けがたい…という立場なのですが(yarn オリジナル作者の sebmck も難色を示しています)、今回は yarn 特有の機能をできるだけ避けて、できるだけ npm や pnpm 等と互換な部分だけで yarn v3 を使います。なので pnp も使いません。eslint や vscode の typescript 等でハマりどころが多すぎます。 ゼロインストールも否定派です。git blob objects のサイズが爆発して仕事にならなくなったことがあります。

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

ある日、Twitterを巡回していると え...マジで？となりました。自分の専属AIを作りたい！と思い立ち、実際に動かしてみました。 目標 このようにローカルPC上でLLaMAとチャットできるようになります。 ただ、自分が使ったモデルは7Bモデルと言って、パラメータがあまり大きくない＝あまり賢くないモデルだったので出力は変な感じになっています笑 (明らかにネットの会話を推論に引っ張ってきてますね...) なので、今回はとりあえず動かしてみたい人向けです！精度などは気にせずお試しください。 ちなみに、自分はM1 MacBookAir(8Gメモリ)で動きました！信じられないぐらい遅いですが笑 Macユーザー向けに解説しますが、windows、linuxユーザーでもほとんど変わらないと思います。 手順 基本的にはこのgithubでの手順を踏んでいきます。 Node.js (npm) をインストー

NewsPicks エンジニアの中村です。普段はデータ基盤や機械学習システムの開発、運用をやっています。 さて皆さん、すでにChatGPTは使っていらっしゃるでしょうか。エンジニア、非エンジニアを問わず世の中を席巻している感のある ChatGPT ですが、今月初めにいよいよ API も公開されて、アプリケーションやサービスに組み込みたいと考えている方も多いのではないでしょうか1。 というわけで、弊社でもこの新しい技術をより多くのエンジニアに使いこなせるようになってもらいたいと考え、ChatGPT API に関する社内勉強会を先日開催しました。本記事ではこの勉強会の内容を再構成してお届けします。 とりあえず使うだけなら簡単な ChatGPT ですが、本記事では、長文を扱ったり、ChatGPT と外部のシステムを連携させたりするテクニックなど、知っている人はすでに知っているが、まだそれほど広く