ts-loaderとbabel-loaderを組み合わせる babel-loaderだけで、TypeScriptはトランスパイルが可能です。 具体的には @babel/preset-typescript を使います。 もしBabelが必要な状況なのであれば、ts-loaderは必要ありません。 逆に、Babelが不要なのであればts-loaderが必要です。 しかし、 レガシーブラウザ向けにBabelを通したもの モダンブラウザ向けにTSをトランスパイルしただけのもの の両方が必要な場合は、自分はts-loaderとbabel-loaderを組み合わせるようにしています。 私の環境ではtsconfig.jsonはいずれの場合も次のようなイメージでした。 project │ .babelrc │ package-lock.json │ package.json │ tsconfig.json

マンヤオベガス @Nishimuraumiush 大学院卒レベルの人が、生き方や人間関係や話し方や自分磨きについての小学生女児向けの本を買うケースを何度か見てきた。 結果を見るに、ムチャクチャ正しい方法論だと思う。ホストが国語ドリルやるのとある意味同じことで、適切なレベルの教材を学習する事が何よりも近道になる。 2024-03-14 04:02:52 マンヤオベガス @Nishimuraumiush 読んだ後に確実に賢くなっているし、しかも、キラキラし始めたことがタイムラインからもわかる。学習の効果が出ている。 女児向けの自分磨き本を読んでいなければ彼等もインセルになっていたかもしれない。 2024-03-14 04:04:29

こんにちは。ぬこすけです。 最近（2022/10/24）、 setTimeout について記事を書いたのですが、予想以上に多くの人に読んでいただけて嬉しい限りです。 setTimeout によって処理を遅らせることは皆さんご存知かと思います。 （上の記事に詳しい仕組みは解説しているので、ぜひ一読ください） ただ、 setTimeout にも問題はあります。 それは 処理の優先度をブラウザに教えることができない 問題です。 setTimeout はただ処理を後回しにしているにすぎません。 後回しにするにしても「この処理は優先度が低いので、ひまな時にやってね」みたいに詳しくブラウザに教えることができません。 パフォーマンスの観点では、重要な処理は優先的にさばいてより快適なユーザー体験を提供したいところです。 この問題を解決するためにあるブラウザ API が生まれました。 今回はこのブラウザ A

こんにちは。ぬこすけ です。 皆さんは「 setTimeout とはどんな関数でしょう？」と聞いたら、どう答えますか？ おそらく、ほとんどの人が「指定した時間に処理が走るようにする関数」と答えるのではないでしょうか？ function main() { console.log('動いたよ！！'); } // 大体 ３ 秒後に main 関数が動き出す setTimeout(main, 3000); 大雑把な理解としては問題ないですが、実は setTimeout の隠された能力はそれだけではありません。 setTimeout の隠された能力を知るとどんな良いことがあるのでしょうか？ 例えば、次のような良いことがあります。 ブラウザに対する理解が深まる Web サイトのパフォーマンスを向上させることができる ドヤれる まず、 ブラウザに対する理解が深まります 。 かのアリストテレスはこう言い残

三菱鉛筆がドイツの高級筆記具メーカー、LAMY（ラミー）の全株式を同社の創業家から取得することで合意したことが28日、分かった。買収額は非公表。ラミーは高級筆記具として世界で認知度が高い。買収で手薄だった高価格帯を強化し、海外市場の開拓を加速させる。ラミーは欧米などを中心にボールペンやシャープペン、万年筆などを80カ国以上で展開している。年間生産本数は800万本以上に上る。主力のボールペンで価

要素をドラッグして移動することは、JavaScriptにおいて頻出パターンです。 しかし、それを簡単に実現するコードは意外と知られていません。 <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove = function(event){ if(event.buttons){ this.style.left = this.offsetLeft + event.movementX + 'px' this.style.top = this.offsetTop + event.movementY + 'px' this.style.position = 'absolute' this.draggable = false this.setPointe

ここから下で話す際、主に使う言語・フレームワーク・ツールとしては - Typescript - React (Next.js) - Jest - React Testing Library - ブラウザテストツールとしてPlaywright を前提としています。ただ話す内容の本質的な部分はVueでもSvelteでも、Vitestだろうがあまり変わらないだろうなと思ってます。そう思って見ていただけると助かります。 現代ではReactでUIの単体テスト・インテグレーションテストを書く場合、Jest x React Testing Library を使うのが一般的かと思います。皆さんはJestでUIテストを書いていますか？Jestでコンポーネントの単体テストを書いていると辛いことがたくさんありませんか？例えば 大量のライブラリのモックによる(これってテストやる意味あるの・・・？)と感じる虚無感

Sora Creating video from text Sora is an AI model that can create realistic and imaginative scenes from text instructions. Read technical report We’re teaching AI to understand and simulate the physical world in motion, with the goal of training models that help people solve problems that require real-world interaction. Introducing Sora, our text-to-video model. Sora can generate videos up to a mi

OpenAIは2月15日（現地時間）、テキストから最大1分間の動画を生成できる動画生成AIモデル「Sora」を大量のデモ動画と共に発表した。複数のキャラクター、特定の種類の動き、被写体と背景の正確な詳細を含む複雑なシーンを生成することができるという。 プロンプトから破綻のない動画を生成 Introducing Sora, our text-to-video model. Sora can create videos of up to 60 seconds featuring highly detailed scenes, complex camera motion, and multiple characters with vibrant emotions. https://t.co/7j2JN27M3W Prompt: “Beautiful, snowy… pic.twitter.com

WebアプリケーションのUIの表現はどんどんリッチになってきています。しかしその一方でブラウザ上での描画の負荷は増大し、時としてスムーズに動かず体験を損ねることもあります。ユーザーにとって使い心地の良いUI体験はフロントエンドのパフォーマンスチューニングに大きく委ねられていると言えるでしょう。 スタートアップ開発を支援する株式会社Gaji-Laboでは、サービスの価値に直結するエンドユーザーの体験向上のため、快適なUIを提供する事をとても大切にしています。 この記事では、快適に動くUIを作るため、フロントエンドフレームワークのマジョリティであるReactとどう付き合っていくべきかを考えていきましょう。 Reactの仕事を理解するまず、Reactがどんな仕事をしているのかを理解するところからはじめましょう。Reactの主な仕事はUIを描画すること、そして必要に応じてそれを再描画することです。

西暦79年の火山噴火で埋もれたポンペイ近郊邸宅で発掘された、炭化したパピルスの巻物の文字を解読するコンテスト「ベスビオ火山チャレンジ」で、2000文字以上のテキストが解読され、解読したチームに70万ドルの賞金が授与された。 このコンテストは、ケンタッキー大学のブレント・シールズ教授らが2019年に開始した巻物解読研究に端を発するもの。シールズ教授らが解読を加速するため、研究で構築した機械学習モデルと画像をオープンソース化したものに着目した元GitHubのCEO、ナット・フリードマン氏と投資家のダニエル・グロス氏の支援でコンテストが立ち上げられた。 コンテストでは、主催者が公開している粒子加速器で3D CTスキャンした巻物の画像や機械学習モデルを使って解読する。

この文章は何： 近年の生成AIブームにより、革命的なまでにプログラミングという仕事の形は変わることが予想され、実際、今までにない速度で世界が効率化され様々なサービスがローンチされていく中「使う側」としても「作る側」としても「IT業界(特にSaaS業界など)での生存」は難しくなっているように感じます。正解を知っていたらとっくに僕は大儲けをしているわけですが、当然わかるはずもなく生存戦略に苦しむだけの中での寝言です。 まとめと結論めいたもの：AI技術の発展により「プログラミング」と呼ばれる「人間の仕事を機械に引き継ぐ行為」のほとんどはゼロコストで行えるようになり、少なくとも今ほどの価値や競争優位の源泉とはならないだろう。今やるべきは、AIを自社の競争優位の源泉とするべく、まるで人材投資のようにAIへの引き継ぎ書を書くことと、AIの研修制度を作ることかもしれない。 プログラミングという仕事の終焉

日本テレビ系ドラマ「セクシー田中さん」の原作者で漫画家の芦原妃名子さんが亡くなられました。 とても悲しいです。 漫画を原作とした映像化のトラブルということで、僕の名前を思い出す人も多かったようです。 日テレ「セクシー田中さん」だけではない…意外と多いテレビ局と原作者のトラブル、「海猿」は未だ二次使用できず、「のだめ」で揉めたTBS 再放送もない「海猿」 「テレビ業界で最も騒がれた原作者とのトラブルは、連ドラだけでなく4度も映画化された佐藤秀峰氏の漫画『海猿』です。 最初にドラマ化したのはNHKで、国分太一の主演で02年に放送された『海猿～うみざる』（BS hi）でした。 その後、04年にフジが伊藤英明の主演で映画『海猿　ウミザル』を公開し、翌年に放送された連ドラ『海猿 UMIZARU EVOLUTION』は平均視聴率13・2％を記録。 映画2作目『LIMIT OF LOVE 海猿』は興収7

2023年の流行語大賞にも選ばれた「生成AI」。 ChatGPTだけでなく、Google BardやClaude2など似たようなAIチャットボットも登場し、性能も日に日に上がっている感覚がありますね。 しかし、結局どれが一番賢いんだろう？と思いつつひとまずChatGPTを使っている方も多いはず。 そこで、今どのチャットAIが一番頭良いのか白黒つけてしまおう！ということで、ちょうど週末に行われた大学入試共通テスト2024を使って学力テストを行いました！ 参加する学生は、 ①GPT-4くん ②Google Bardちゃん ③Claude2さん の三名です 果たして誰が学力王の座に輝くのか・・・？ 選手入場①GPT-4くん一人目は、皆さんご存じChatGPTです。Open AI予備校に月額＄20の課金して学力武装しています。 特徴としては、プロンプトの研究が進んでおり、画像やPDFファイルの読み

昨今のマークアップでは、CSS設計の発展やフロントエンドフレームワークの台頭によって、以前よりも詳細度を意識することが少なくなっているかもしれません。たとえばBEMやFLOCSSを使った従来のCSS設計によるアプローチをはじめ、CSS in JSやCSS Modulesを使った技術的なアプローチ、もしくはTailwind CSSのようにユーティリティファーストで設計するアプローチなど、多様な手法が存在します。 では、詳細度の悩みから完全に解放されたのかというと、そうではありません。過去の負債、技術的な成熟度、サードパーティ製CSSとの競合、CSS設計に対する解像度や方針の違いなど、その要因はさまざまだと思います。先に述べたように、詳細度をよしなにやってくれる技術が増えてはいますが、依然として知識は必要です。でなければ、どのような方法やツールを用いたとしても、どこかでCSSが破綻する可能性が

2024年2月14日紙版発売 2024年2月14日電子版発売 マウンティングポリス　著 四六判／208ページ 定価1,540円（本体1,400円＋税10%） ISBN 978-4-297-13951-3 Gihyo Direct Amazon 楽天ブックス ヨドバシ.com 電子版 Gihyo Digital Publishing Amazon Kindle ブックライブ 楽天kobo honto この本の概要 人間関係あるところにマウントあり，マウンティングを制する者こそが人生を制する。 3万以上の事例を収集・分析してきたマウンティング研究家が，80億総マウント社会を乗り切るためのナレッジを集大成。 一流の人こそこっそり活用しているマウンティングの最強パターンとは ステルスマウント×マウントさせる＝最強のビジネススキル イノベーションはテクノロジーからではなくMX（マウンティングエクスペ

はじめに useEffect, useStateに引き続きuseCallbackについても公式ドキュメントのまとめ記事を書く。よければ他のuseEffect, useStateの記事もご参照ください。 useEffect: 基礎から使用すべきでない例まで useState の値が更新されない理由をレンダリングの仕組みから理解する useCallback とは useCallbackはレンダリング間で関数をキャッシュする React のフックである。 useCallback の使い方 useCallback(fn, dependencies)は以下のように用いる。 import { useCallback } from 'react'; export default function ProductPage({ productId, referrer, theme }) { const ha

はじめに useEffect について、きっちり調べようと思い調べてみた。公式ドキュメントのまとめ記事になっている。 useEffect 基礎編 useEffect とは Effect を用いるとレンダリングの後にコードを走らせることができ、React 外のシステムの要素と同期することが可能になる。 なぜ必要か まず、React コンポーネントの二種類のロジックについて整理する。 レンダリング レンダリングをする際、コードはpropsとstateを受け取り、変換し、画面で表示したいJSXを返す。コードのレンダリングは結果のみを計算するべきでそれ以上のことをするべきではない。 イベントハンドラ イベントハンドラはコンポーネントの中にある関数で、Input Field の更新やユーザを他の画面へ誘導したり等、単純な計算以上の役割を担う。イベントハンドラはユーザの行動（ボタンクリック等）による、

TypeScript の Key Remapping 使ってる？ in と as でオブジェクトのキーを自由自在に。TypeScript 概要 TypeScript 4.1 から Key Remapping という型の記述方法があり業務で実際に使ってみたら便利だったのですが、日本語の情報が少ないように見えるのでまとめておきます。 Key Remapping は、 Mapped Types で as を使うことで、キーの型を任意の型に上書きする記法です。 オブジェクトの型を定義する時に in を使うことがあると思いますが、 Key Remapping はこの in と共に as を使用します。 （この　as は Type Assertion の as とは別ものです） 公式ドキュメント TypeScript: Documentation - Mapped Types#key-remappin