State of JavaScript 2023
It should be clear by now that, for better or for worse, JavaScript is not slowing down. Between server components, server actions, signals, compilers, and more, we're seeing new innovations pop up faster than most of us can handle. The trick to avoiding the dreaded JavaScript fatigue is remembering that you can pick your lane: sure, you can live life on the cutting edge with the early adopters; b
State of JavaScript 2023
It should be clear by now that, for better or for worse, JavaScript is not slowing down. Between server components, server actions, signals, compilers, and more, we're seeing new innovations pop up faster than most of us can handle. The trick to avoiding the dreaded JavaScript fatigue is remembering that you can pick your lane: sure, you can live life on the cutting edge with the early adopters; b
こんにちは。アクセシビリティ本部のアクセシビリティエンジニアの五十嵐です。SmartHRでは主にアクセシビリティテスターが見つけた課題を技術的な観点から改善したり、根本的な問題を解決するための仕組みづくりを担当しています。 さて、Meta が開発する UI ライブラリとして長い間人気を博している React ですが、2024年4月に最新版であるバージョン 19 のRC版が公開されており、注目を集めています。 バージョン 19 では "use client" や "use server" でも知られる Server Components を含む様々な機能が含まれる予定ですが、この記事では、そんな React バージョン 19 をアクセシビリティの観点からキャッチアップし、特に便利になりそうな点や、注意が必要になりそうな点などを見ていきます。 forwardRef が不要になった 仮想 DOM
週刊Railsウォッチ: Ruby on Jets 6.0がRailsをサポートほか（20240620後編）｜TechRacho by BPS株式会社
週刊Railsウォッチについて 各記事冒頭には🔗でパーマリンクを置いてあります: 社内やX.comでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを（鍋のように）社内有志でつっついたときの会話の再構成です👄 お気づきの点がありましたら@hachi8833までメンションをいただければ確認・対応いたします🙏 TechRachoではRubyやRailsなどの最新情報記事を平日に公開しています。TechRacho記事をいち早くお読みになりたい方はTwitterにて@techrachoのフォローをお願いします。また、タグやカテゴリごとにRSSフィードを購読することもできます（例:週刊Railsウォッチタグ） 🔗Rails: 先週の改修（Rails公式ニュースより） 公式更新情報: Ruby on Rails — Better error message, opt-i
はじめに こんにちは！ 今回は、自作のライブラリ「Limo」を紹介します！ このライブラリは、テキスト、JSON、JSONC、TOML、YAMLなどのファイル形式を手軽に読み書きできる小さなツールです。 ファイルの読み書きをusing構文を使って簡単に行えるのが特徴です。 以下はREADMEを翻訳したものをベースにしています。 「Limo」って何？ こんな特徴があります！ 簡単なファイル読み書き：わずかなコードでファイルの読み書きを実現 変更の自動書き込み：using 構文を用いてブロックスコープを抜けると、自動的にファイルに変更を書き込む 多様なファイル形式のサポート：JSON、JSONC、TOML、YAMLなど、さまざまなファイル形式に対応 データ検証：カスタムバリデータ関数を用いてデータの妥当性をチェック可能 using構文とは？ using構文は、TypeScript 5.2で導入
6月19日、The New Stackに「Top 10 JavaScript Libraries To Use in 2024」と題した記事が公開された。この記事では、2024年に利用すべきJavaScriptライブラリのトップ10について紹介されている。 以下に、その内容を簡潔に紹介する。 React 強力なコンポーネントベースのアーキテクチャにより、複雑なユーザーインターフェースの開発が容易。 仮想DOMの実装により、パフォーマンスが向上。 豊富なエコシステムとコミュニティのサポートがあり、継続的な改善が期待できる。 Redux 予測可能な状態コンテナで、アプリケーションの一貫性を確保。 一方向のデータフローにより、状態管理がシンプルになり、デバッグが容易。 大規模なアプリケーションでのスケーラビリティとメンテナンス性を向上。 D3.js データをDOMにバインドし、データ駆動の変換を
JavaScript記述なしでモダンUIを作成できる「htmx」、最新版「htmx 2.0」で何が変わったか
背景 こんにちは！Hanoi Dev Centerでバックエンドエンジニアをしているminhquangです。この記事では、私がAI事業本部のある新規プロダクト開発に参画した際に経験したパフォーマンスチューニングについて話したいと思います。 皆さんはサービスのローンチ(サービスを世の中に初めて出すリリース)をやったことがありますか。サービスローンチするときに、リクエストのスパイクや、ユーザー数の増加によるサーバー負荷増加など、様々な未知な課題が存在します。 私のチームでは数百万人の利用が見込まれるサービスにおいて、18000RPSを実現するべく負荷試験とパフォーマンスチューニングを実施しました。 本記事では、上記のサービス要件を満たすために私たちが取り組んだ負荷試験やパフォーマンスチューニングについて説明しつつ、これらの経験から得られた学びを共有したいと思います。 前提 技術スタック サーバ
【入門】Reactとは？特徴やインストール方法をわかりやすく解説 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
「Next.jsで理解するSSRとクライアントルーティングの違い」という名目で社内にて簡単に勉強会を行いました。本記事は、その内容を適宜編集して公開するものです。 TL;DR 以下の要約を読んで、「なんだその話か」って思った方は引き返していただいて大丈夫です。逆に「えっそうなの・・・？」と思った方は、ぜひ読んでください！ Next.jsアプリケーションにおいて、/hogeと/fugaというページがあり、それぞれgetServerSideProps()が定義されているとします 最初ブラウザで/hogeを開いたとき、Next.jsアプリケーションはブラウザから/hogeへのGETリクエストを受け取り、getServerSideProps()を実行します 次に/hogeから/fugaへrouter.pushで遷移すると、Next.jsアプリケーションはブラウザから/fugaへのGETリクエストを
プログラミング言語ごとのコミュニティの最大規模はJavaScriptの約2520万人、続いてPythonが1820万人、Javaが1770万人など。SlashDataの調査
プログラミング言語ごとのコミュニティの最大規模はJavaScriptの約2520万人、続いてPythonが1820万人、Javaが1770万人など。SlashDataの調査 ソフトウェアデベロッパーを中心とした調査会社のSlashDataは6月15日、2024年第1四半期時点のプログラミング言語ごとのコミュニティの大きさについてのレポートを発表しました。 これは同社が行った世界135カ国から1万人以上の回答者を集めたアンケート結果などを基に同社が推測しレポートとして発表する予定の内容の一部を公開したものです。 下記は同社が発表したプログラミング言語別のコミュニティを大きさ順に示した図の一部を切り取ったものです。 これによると、最大のコミュニティを持つプログラミング言語はJavaScriptで2520万人。もっともポピュラーな用途はWeb開発となっています。ただしこの人数にはTypeScri
JavaScriptの活躍の場を広げる「ランタイム」の今
執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「独習」シリーズ、「これからはじめるReact実践入門」、「改訂3版 JavaScript本格入門」他、
GA4でお問い合わせフォームがどこまで入力されているかを分析する方法 【寄稿】連 久実子さん ブログ：https://shuhu-marketing.com/ X：https://twitter.com/shuhu_marketing/ 広告代理店を経て、メーカーEC運用部門にてサイト構築運用・カスタマーオペレーション・ロジスティクスと広く経験した後、ブランディング及び販促戦略企画に携わり、現在は、フリーランスのWebアナリストをしています。「レンさん」と呼ばれるのを密かに気にしています（連と書いてムラジと読みます）。 こんにちは、Webアナリストをしている連久実子です。 はじめに伝えておきます・・・この方法だいぶ面倒くさいです。フォームがどこまで入力されているかをざっくり把握したいだけであれば、Microsoft Clarityを使った方がめちゃくちゃ楽です。 じゃあ何故今回ご紹介する分
こんにちは。トレタ技術顧問の奥野 (@okunokentaro) です。先日のブログ記事『奥野さんと社員のリファクタリング部屋 -リポジトリ層のディレクトリをどう作る？-』に対して多くの反響をいただき、ありがとうございます。いただいたご意見やご質問の一つひとつが非常に貴重であり、大変感謝しています。 いくつか個別に質問をいただくことがあったのですが、それらの質問を要約すると「リファクタリング後のコードもまだツッコミどころだらけでは？」や「リポジトリ層という名前がまずおかしいのでは？」という二つの点に集約されました。これらの質問はとても理解できます。今回の記事では、具体的な個別の質問への個別の回答は控えさせていただきますが、全体的な方針とテーマについてお伝えした上で、トレタが取り組んでいるリファクタリングは何を目指しているのかというお話をします。 前提と目的 今回のブログ記事『リファクタリン
NOTE: This is based on, but completely rewritten, from a Twitter post: https://x.com/TheGingerBill/status/1802645945642799423 TL;DR It makes Go feel too “functional” rather than being an unabashed imperative language. I recently saw a post on Twitter showing the upcoming Go iterator design for Go 1.23 (August 2024). From what I can gather, many people seem to dislike the design. I wanted to give m
いかにして動的型付けのRubyに静的な型検査を持ち込むか？ SteepとRBSが目指すもの - Findy Engineer Lab
Rubyをはじめとする「動的型付け」のプログラミング言語は、ソースコード中に型に関する記述が陽に出てこないことが特徴で、プログラムの実行前に（静的に）型検査をすることはありません。しかし、このようなプログラミング言語においても、大規模な開発における品質の向上や開発体験の改善、実行の高速化のために、静的な解析を活用しようという試みは多くなされてきました。この記事では、動的型付けの言語のための型検査の歴史を簡単に振り返って、現在私が開発しているRuby向けの型検査器Steepとその基盤となっている型記述言語RBSについて説明し、今後の展望を議論します。 著者：松本宗太郎さん（@soutaro） Rubyコミッター。大学院でRubyプログラムの型検査の研究に取り組み、修了後はスタートアップでWebアプリケーションの開発に従事。2017年から型検査ツールSteepの開発を始め、2019年からはRu
htmx 2.0.0 Release I’m very happy to announce the release of htmx 2.0. This release ends support for Internet Explorer and tightens up some defaults, but does not change most of the core functionality or the core API of the library. Note that we are not marking 2.0 as latest in NPM because we do not want to force-upgrade users who are relying on non-versioned CDN URLs for htmx. Instead, 1.x will r
【JS体操】第2問「画像の横長具合を比較しよう」〜正攻法＆ハック部門の解説〜 - KAYAC engineers' blog
こんにちは！ カヤック面白プロデュース事業部のおばらです。 普段は受託案件のデザイン・フロントエンド開発などを担当しています。 さて、『JS体操』第2問 いかがでしたか？ 今回初めての方々 第1問に引き続きの方々 複数のアプローチで何通りも回答してくださった方々 普段業務で JavaScript をバリバリ書いているであろう方々 JavaScript を学んでいる学生の方々 などたくさんの方々が挑戦してくださいました。 とても嬉しいです。ありがとうございます！ 『JS体操』とは？ 『JS体操』とはカヤックが主催する JavaScript のコードゴルフ大会です。 もともとは社内の勉強会として始めた施策です。 その詳細は以下のブログ記事を御覧ください！ techblog.kayac.com 第2問の詳細はこちら https://hubspot.kayac.com/js-taiso-002 も
UUIDv7 in 32 languages
UUIDv7 is a 128-bit unique identifier like it's older siblings, such as the widely used UUIDv4. But unlike v4, UUIDv7 is time-sortable with 1 ms precision. By combining the timestamp and the random parts, UUIDv7 becomes an excellent choice for record identifiers in databases, including distributed ones. Let's briefly explore the UUIDv7 structure and move on to the zero-dependency implementations i
Mistral AI、80以上のプログラミング言語に精通したコーディング向け生成AIモデル「Codestral」を発表
このニュースのポイント Mistral AIがコーディング向け生成AIモデル「Codestral」を発表 Python、Javaなど人気の言語を含む80以上のプログラミング言語に精通 CodestralはHuggingFaceからダウンロード可能で、APIエンドポイントを通じて利用可能。8週間のベータ期間中は無料で利用できる 米Microsoftが支援するプランス企業のMistral AIは、Python、Java、C、C++、JavaScript、Bashなど、人気の言語を含む80以上のプログラミング言語に精通したコーディング向け生成AIモデル「Codestral」を発表しました。 Codestralは、コード生成タスク専用に設計された220億パラメーターのオープンウェイト生成AIモデルで、コード生成から完成までのタスクに特化しており、非商用ライセンスのもとで利用可能です。 Codest
現在ある「Railsエンジニアコース」に加えて、7月1日から「フロントエンドエンジニアコース」をオープンする予定です。 Railsエンジニアコースでもフロントエンドには触れていますが、あくまでRailsエンジニアとして必要な程度に留まっています。フロントエンドエンジニアコースでは[TypeScript](https://www.typescriptlang.org/)や[React](https://ja.react.dev/)を中心として、フロントエンド専門で就職できる様にしっかり学べるコースです。 チーム開発も[Next.js](https://nextjs.org/)を使った実際に稼働しているサービスを開発するので仕事同様の経験を積むことができます。 「Railsエンジニアコース」では、バックエンド・フロントエンドに加えてインフラにも触れているなど、学習範囲が広く、卒業まで1年以上か
Aceでテキストエリアをエディタ化する
一瞬で理解するHydration
2024年版「基本的なウェブアプリケーションを構築する」のチュートリアル手順まとめてみた[Amplify Gen2対応] | DevelopersIO
初めてAWSのサーバレスサービスを学習するときに利用できる「基本的なェブアプリケーションを構築する」の内容を2024年現在でも実行できる手順にしてみました こんにちは、臼田です。 みなさん、AWSのチュートリアル活用してますか？(挨拶 今回はAWSの初心者向けハンズオンコンテンツである基本的なウェブアプリケーションを構築するを2024年の現在版の手順としてまとめてみました。 このコンテンツはAWSのサーバレスなサービスを利用して、簡単にウェブアプリケーションを作成する体験ができるチュートリアルとなっており、登場するAWSの各サービスを理解するのにちょうどよい内容でした。しかし、リリースされてしばらく経っているのもあり、特に今回のAmplify Gen2リリースもあってだいぶ画面や操作方法などが変わってしまいました。 実現できる事自体は変わらないので、現時点でこのチュートリアルを初心者でも完
![2024年版「基本的なウェブアプリケーションを構築する」のチュートリアル手順まとめてみた[Amplify Gen2対応] | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/89d69da1ff63f03a6134b1ba08325495afbaf56e/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2024%2F06%2F000_basic_web_app.png)
TypeScriptユーザーに贈るGleam入門
最近v1に到達したGleamという静的型付けな関数型言語があります。 GleamはErlangとJavaScriptをターゲットに実行できるため、今TypeScriptを使っている領域でも使うことができます。 この記事ではTypeScriptユーザー向けにGleamの文法を解説していきます。 記事を通してGleamの良さを感じていただければ幸いです。 Gleamの公式サイトでは以下の言語のユーザー向けのチートシートもあるため、この中に知っている言語があるのならそちらを読んでみるのがオススメです。 Elixir Elm Erlang PHP Python Rust また、個人的にGleamの情報をCosense(Scrapbox)にまとめているので、リファレンスがてら覗いてみてください。 organizationとして管理していきたいと考えているので、編集のリクエスト等も歓迎です。 編集した
新しい HTML <permission>> 要素のオリジン トライアル | Blog | Chrome for Developers
ウェブアプリでの位置情報アクセスなどの強力な機能を使用するための権限をリクエストする命令型の方法はいくつかあります。これらの方法にはいくつかの課題が伴うため、Chrome の権限チームは新しい宣言型方式である専用の HTML <permission> 要素をテストしています。この要素は Chrome 126 のオリジン トライアルであり、最終的には標準化したいと考えています。 権限をリクエストするための命令型メソッド ウェブアプリが強力な機能にアクセスする必要がある場合は、権限をリクエストする必要があります。たとえば、Google マップが Geolocation API を使用してユーザーの位置情報を必要とする場合、ブラウザはユーザーにプロンプトを表示し、多くの場合、その決定内容を保存するオプションが表示されます。これは、権限の仕様において明確に定義された概念です。 事前リクエストではな
10年ぶりにテレビ周りを刷新した話
Google Geminiでゲーム移植？ブラウザゲームの"Rust+WASM版"をAIに作らせる | Agar.io 2024 - Qiita
Google Geminiでゲーム移植？ブラウザゲームの"Rust+WASM版"をAIに作らせる | Agar.io 2024JavaScriptgameRustAIWebAssembly 皆さんは Google AI Studio を使っていますか？ このサービスは、テキストや画像だけでなく、動画やコードなどの様々なデータを理解し、Gemini に質問したり指示したりできる強力なツールです。 ただ、注目すべきは かなり長いプログラムのコードを食わせてそれを解析できる ということです。 以下は slither.io というブラウザゲームのjsファイルを丸ごと食わせて解説してもらった例 コードを全部読まなくても、Gemini に解析してもらってどういう処理があるとか、サーバーとどんな通信を行っているのかを聞くとかなり精度良く回答が帰ってきます。 つまり、コードの中身をほとんど読まなくてもだい
2 年前に作って放置していたライブラリを最近ちょっと整理したのでその話. エフェクト プログラム中に登場する関数のことを考えてみましょう. 関数は引数を与えるとなんらかの計算を行い, 戻り値を返してくれます. もし関数が純粋な (数学的な意味での) 関数であれば, 関数の入出力は引数と戻り値だけです. つまり, 引数以外の入力 (例えば時刻) によって出力が変わることもなければ, 戻り値以外の出力 (例えば光や音) が得られることもありません. 一方で実用的な価値のあるプログラムというのは時刻に応じて光や音を発生させるようなものであり, これらは純粋な関数だけを組み合わせていては作ることができません. ここで登場する純粋でない関数は, 計算の過程でなんらかのエフェクトを発生させて, 引数と戻り値以外の入出力 (副作用) を行います. エフェクトの明示と副作用の分離 関数が発生させるエフェク
【便利】自宅からのアクセスの場合、特定のcssセレクターを除外するタグを配信して、一部の人間から広告を削除する - かずきち。の日記
こんにちは。sumirenです。 イントロダクション 先日、Twitterで以下のポストが話題になっていました。 一部曖昧なところもありますが、推測と動作検証結果も交えて要約すると、以下のことを言っています。 VercelがホスティングしているWebサイトは、エッジでのサーバーサイド処理を行うことをやめた Next.jsに関して、VercelでPPR(Partial Prerendering)を利用した場合、サーバーサイド処理はNodeランタイムで行われる この記事では、このポストに絡めて、PPRとエッジに関する筆者なりの所感や解説を述べていきます。この記事の大部分はポエムですが、一部、技術的な事実についても述べるつもりです。そうした部分について誤りがあればご教示ください。 Vercelがエッジでのサーバーサイド処理を行うことをやめた件について エッジの効能 そもそもエッジに期待していたこ
Visual 6800 in JavaScript
FAQ Blog Links Source 6800 instruction card programming model Please wait, graphics initialising... Use 'z' or '>' to zoom in, 'x' or '<' to zoom out, click to probe signals and drag to pan. Show: (diffusion) (grounded diffusion) (powered diffusion) (polysilicon) (metal) (protection) Animate during simulation: Link to this location User Guide x: 0 y: 0 click here and type if your program handles i
参加者2000人超え！ TypeScript大規模カンファレンス「TSKaigi 2024」レポート 2024年5月11日、中野セントラルパークカンファレンスにてTSKaigi 2024が開催されました。TSKaigiは今年初めて開催されたTypeScriptに特化した技術カンファレンスです。前身もない、完全初開催にも関わらずチケットはタイムテーブル公開前に完売。オンライン参加者も含めると2000人を超えるなど、とても注目度が高いカンファレンスとなりました。 今回筆者は運営スタッフとして参加しました。この記事では、TSKaigiがどのようなイベントだったのかに触れたうえで、当日の模様をレポートします。 TSKaigiついて TSKaigiは、日本最大級のTypeScriptをテーマとした技術カンファレンスです。コロナ禍で様々なオフラインイベントが打撃を受ける中、TypeScriptを扱うエ
YouTubeの次の対策で広告ブロックが困難になる可能性がある
YouTubeが動画に直接広告を挿入する実験を行っていることがわかりました。これにより、動画の信号だけをはじいていた広告ブロックが機能しなくなる可能性があります。 YouTube is currently experimenting with server-side ad injection. This means that the ad is being added directly into the video stream. This breaks sponsorblock since now all timestamps are offset by the ad times.— SponsorBlock (@[email protected]) (@SponsorBlock) June 12, 2024 YouTube tests harder-to-block server-si
Server Islands | Astro
This is Part 3 of our series on “The Future of Astro” covering the three major features we have planned for Astro in 2024. This post introduces Server Islands: a new island architecture primitive that lets you deliver static, CDN-cached HTML page shells with injected dynamic content. In 2021, Astro pioneered a new frontend architecture called Islands. Islands are unique because they allow Astro to
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React 19 で変わるアクセシビリティ周りの技術 - SmartHR Tech Blog
Limo：using構文を用いたファイル読み書きライブラリ
【海外記事紹介】2024年に使うべきJavaScriptライブラリ10選
大規模サービスのローンチに向け、パフォーマンスチューニングした話 #go #aws
【図解】Next.jsで理解するSSRとクライアントルーティングの通信の仕組み
LLMの価値を享受できないのは「全従業員向け」だから 95パーセントがニッチ業務だからこそ必要なチューニング
GA4でお問い合わせフォームがどこまで入力されているかを分析する方法 | Pivot-Form（ピボットフォーム）
リファクタリングの道標：リファクタリングを通じて組織を改善していく - トレタ開発者ブログ
Server-Sent Events を複数パターンで実装して理解を試みる
Why People are Angry over Go 1.23 Iterators
</> htmx ~ htmx 2.0.0 has been released!
7月1日に「フロントエンドエンジニアコース」をオープンします
読まないと後悔する技術書30選 - Qiita
エフェクトとジェネレーターと - Object.create(null)
VercelがPPRをNodeランタイムにした件からWebフロントエンドとエッジの動向に迫る
SVG アイコンの表示に mask-image CSS プロパティを使用する
【Chome126】View Transitions APIで滑らかな画面遷移を実装する
参加者2000人超え！ TypeScript大規模カンファレンス「TSKaigi 2024」レポート | gihyo.jp