JavaScriptの活躍の場を広げる「ランタイム」の今
執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「独習」シリーズ、「これからはじめるReact実践入門」、「改訂3版 JavaScript本格入門」他、
プログラミング初心者の40代おじさんが3年半かけてAtCoder水色になった話(色変記事) - Qiita
簡単な自己紹介 私は40代で、普段はIT業界ではない企業で働いています。私生活では中学生と小学生2人の3人の子を持つ父でもあります。大学は文系で、これまで情報科学の教育・訓練を受けた経験はありません。 子供が小学校の授業でプログラミングを習っているのを見て「今後はプログラミングが読み書きそろばん同様になるかも」と不安を感じ、ひょんな事からAtCoderの存在を知り、競技プログラミング（以下、競プロ）への参加を通してプログラミングの勉強を始めました。 2021年4月にAtCoderにユーザー登録。 2021年9月に茶色、2022年3月に緑色、そして今回2024年7月に水色になりました。 緑コーダーになり仕事に好影響が出始める 私が従事している仕事では、プログラミングはまったく必要ありません。 ところが緑コーダーになった頃から、仕事中に「あれ？これはPythonでやれば速く終わるのでは？」とい
宣伝💡 この記事の内容の超大容量版がこちらの本になります。興味がある方は是非チェックしてみてください。 Web業界に新卒で入ってから7年と数ヶ月が経ちました。私はデザインからフロントエンド全般が守備範囲です（Next.jsを使った軽めのWeb開発くらいまで）。 最近ようやく自分の中での「コーディングの手法やルール」が固まってきたので、言語化してこの記事で解説していこうと思います。 はじめに まず最初にこの記事の方針や前提をいくつか書いておきます。 用語や知識の詳しい解説はしていないので、分からない内容が出てきたら調べながら記事を読んでいただくとより理解しやすいと思います 実務を数年経験していないと理解できない部分があるかもしれないです（完全初学者向けではなく、初・中級者向け） あくまで自分の中での手法やルールであり、全ての実装者・会社・プロジェクトなどに当てはまるわけではありません（もち
この記事ははてなエンジニア Advent Calendar 2021 の 22 日目の記事です。 昨日の記事は id:shimobayashi さんの アジャイル推進活動にここ1年で吉兆がみえてきた要因について - 下林明正のブログ でした。 Chrome の DevTools の UI 部分は Web 技術でできています。Web 技術でできているので、DevTools を DevTools で inspect することもできます。 example.com を inspect している画面を inspect している様子 このことを知ったのは、10MB くらいある JavaScript ファイルにブレークポイントを貼りつつデバッグしていたら DevTools が固まるようになってしまい、ブレークポイントを解除しようにもその前に DevTools がフリーズしてしまうので詰んだ……、という出
年イチでちょっとしたブラウザゲームを作ってます（→ 去年）。今年はそこそこ遊べる可愛いアクションゲームを4KB以内で作ってみました。 🎉宣伝させてください！ 🐱今年も無事、猫の日ゲームができました！https://t.co/XnDD8AXx4k 今年は可愛さはそのまま、限界までコードを削って4KBにおさめました。PCの方はソース表示して見てみてね pic.twitter.com/j0QqH6iSSn — ゆき (@yuneco) February 20, 2022 作ったもの：ブラウザで動く4KBのゆるかわアクション URL： https://yuneco.github.io/mezashi-4kb/ ソース： https://github.com/yuneco/mezashi-4kb つまりどういう...コト？ index.htmlという名前のファイルを作って下のコードをコピペする
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 自分は2021年に新卒でweb系の開発会社にフロントエンジニアとして入社し2022年で2年目になります。 実務ではReact×TypeScriptを利用したフロント周りの開発をメインで行なっていなす。 今回は実務でNext.jsプロジェクトにテストを導入することになり「React-Testing-Library」と「Jest」について改めて学び直したのでその内容を紹介します。 はじめに「React-Testing-Library」と「Jest」の概要を説明しその上で具体的なテストコードを何パターンか書いていきます。 この記事の
はじめにタイトルは若干煽りですが、TS 5.0 でBundlerという設定値が追加されたため、Nodeを使う場面はほぼ無くなったと思います。 今回は Node.js と TypeScript のモジュール解決の仕組みについて、moduleResolutionというオプションの観点から解説します。 この記事を書くにあたって実際に動作確認は行っていますが、もしも間違っているところがあればご指摘いただけると幸いです。 なお、 Node.js LTS v18、TypeScript v5.0 時点での情報です。 今後のバージョンアップにて変更がある可能性があります。 TL;DR"moduleResolution": "Node"は使わないほうがいい おそらく求めているものはBundler tsc をビルドツールとして使用している場合はNode16 / NodeNextがベスト Nodeを使う場合でも
Open source, runs in VS Code, integrates with existing TypeScript code, browser and Node.js.
TypeScriptのコンパイラをGo言語でネイティブ化、10倍速にした「TypeScript Native Previews」が公開
TypeScriptのコンパイラをGo言語でネイティブ化、10倍速にした「TypeScript Native Previews」が公開 マイクロソフトは、TypeScriptのコンパイラを始め各種ツール群をGo言語に移植することでコンパイラの処理速度を10倍速にした新バージョンとなるTypeScriptのプレビュー版「TypeScript Native Previews」の公開を発表しました。 Today we're announcing previews of the native port of TypeScript! These nightly previews will be available on npm and the VS Code marketplace! npm install -D @typescript/native-preview npx tsgo --vers
Rubyで書かれた ソースコードを読む技術 in kaigi on rails/technic-of-reading-source-code-written-in-ruby-for-kaigi-on-rails-2020
Rubyで書かれた ソースコードを読む技術 in kaigi on rails/technic-of-reading-source-code-written-in-ruby-for-kaigi-on-rails-2020
WebComponents でログインコンポーネントをつくってサービス横断で使えるようにした話 - 一休.com Developers Blog
こんにちは。プロダクト開発部の渥美 id:atsumim です。 今回サービス横断で利用できるログインコンポーネントを WebComponents で実装したのでその紹介をします。 1. 背景 今年の2月に電話番号での会員登録及び認証機能をリリースしました。 これに伴って一休の会員基盤も刷新しました。 一休のサービスは主に、宿泊、レストラン、スパとあるのですが、 歴史的経緯により会員基盤が分散してしまっていたので、ひとつにまとめる狙いもありました。 会員基盤 Before/After その一環として、一休のサービスで横断して使えるログインコンポーネントを WebComponents で実装しました。 このコンポーネントにログインや会員登録の処理を集約し、新会員基盤へのインターフェースとするようにしました。 また、電話番号認証や2段階認証設定のモーダルも実装しました。下記が実際の画面です。
Next.jsを初心者向けツールとして捉えている自分が、実践 Next.js を読んでみて2024-03-28 この記事は 実践 Next.js の書評です。 見本誌を頂いた上での記事です。（PR記事？） tl;dr App Router のメリットを理解しつつも、学習コストに割り合わないと思っている人にオススメ！ドキュメントを読めるようになるし、学習コストが下がる。 はじめに 自分はどちらかというと今の Next.js に対しては否定的な感情の割合の方が高く、仕事で困らない程度の最低限の知識しか持っていない。 しかし、なんだかんだ勉強の必要性に駆られていて、そのキャッチアップとして同書の発売を楽しみにしていた。 そんな折に @takepepe さんから見本誌をいただいたことで、この週末に読んだので書評を書きたい。 俺は今のNext.jsが好きではない 書評を書く前にポエム書かせてくれ！
ReactのConcurrent Renderingで本格的に実用化されるSuspenseは、ライブラリを通して使うことになりがちでその裏側が見えにくいものです。この本では、手を動かしながら生のSuspenseの使い方を学びます。
始めに music21はMITが作ったpythonの音楽情報処理ライブラリです。 musicology(音響学・音楽理論)の研究への利用を目的に作られたそうで、 結構いろいろできるらしいので、勉強がてら触ってみました。 難しいアルゴリズム等の話はほとんどしないので、プログラマでない方も出力結果だけ見て「こんなことができるんだ」と思ってもらえるような記事になればいいな、と思っています。 ちなみに、21というのはMITでの音楽コースに割り当てられた講義番号に由来するそうです。留学したい。 基本的に公式のドキュメントを順に追ってくだけです。ここの内容を実行しながら感想を書く、という記事です。 環境 macOS(10.15.7) python3.8.5 jupyter-notebook Musescore version-3.4.2.25137 Musescoreというのはフリーの楽譜作成ソフトで
engineering.mentemo.com この記事は↑の記事の後編です。 前編からだいぶ日が空いてしまいましたが、今回はメンテモのWebアプリケーションがVercelからCloud Runに移行するまでの実際の作業を紹介します。 はじめまして。 @itometeam です。メンテモで業務委託として開発全般のお手伝いをしています。 メンテモのWebアプリケーションはフロントエンドにNext.jsを使っています。 元々は例に漏れずVercelを使っていましたが、スケールするにつれてどうしてもボトルネックになる部分が増えてきたため別の環境に移すことを検討し始めました。 もちろんVercelはNext.jsのデプロイ先として今後も一番の選択肢としてあり続けると思います。 Webサーバをクラウド上に構築する上で意識するべきことをほとんどおまかせでやってくれますし、プレビューURLの自動生成など
相続税申告は自分でできる？税理士が相続税申告の進め方を解説
【徹底解説】Flask VS FastAPI
はじめに 今回の記事では、PythonでWeb開発を進める際に使われるWebフレームワークである「FastAPI」と「Flask」について、両者それぞれの特徴と強みを具体的なソースコードを用いて解説する。 この記事の対象とする読者 これからPythonでWeb開発を進めることを検討している人 APIを開発したいものの、どのような技術を使うべきが迷っている人 FlaskとFastAPI両方とも、あるいはどちらか一方に興味を持っている人 社内あるいは個人開発の技術選定で、FastAPIあるいはFlaskの導入を検討している人 Flaskとは FlaskはPythonで開発された軽量のWSGI(Web Server Gateway Interface)製のWebフレームワークである。 Flaskの説明に入る前に、WSGIについて簡潔に説明させてほしい。WSGIを完結に説明すると、Pythonにお
はじめに 昨今の激アツChatGPTブームを見ると、これをアプリとして開発してみたいと思う方も多いのではないでしょうか。気になって調べてみるとLangChainやLlamaIndexというライブラリに行き着く方も多いはずです。 そしてすぐ壁に直面すると思います。 結局これらのライブラリが 何で どういう時に どう使えば良いのか わからない！ そうです。私です。 特にLangChainは初めてLLMアプリ開発される方には少し難解です。LangChainは非常に積極的な開発がされているライブラリで、課題や良い方法が発見されればそれをすぐ実装！というスピード感で動いています。 その分、ドキュメントこそ整備されているものの膨大な情報量に迷子になりやすい状況です。 そこで、今回はLangChainのメンタルモデルを簡単に説明してみることにしました。 全体感が抑えられていればコアな情報、追加で必要とな
徹底解剖 TLS 1.3 | 翔泳社
wolfSSLをもとに、SSL/TLSの正しい利用法と仕組みを理解する 暗号化された安全な通信は、ネットワークを使う全てのアプリケーションにとって、 考慮すべき重要な課題です。 セキュアな通信を実現するために用いられる技術SSL/TLSの最新版がTLS 1.3であり 各種SSLライブラリも対応してきています。 ただ、ライブラリだけが最新のものになっても、仕組みを知り、 正しく使わなければ、安全は担保されません。 そこで本書は、そんなTLS 1.3の基礎的なプロトコルの流れから、 暗号化・認証の仕組み、アプリケーション実装のベストプラクティスを 組み込みシステム向けの軽量＆高機能なライブラリwolfSSLを例に 解説していきます。 さらに、ライブラリコードの解説を含め、内部実装にまで踏み込んだ解説も行い、 SSLライブラリを徹底的に理解できる一冊です。 Part 1：TLSの技術 ・Chap
こんにちは、クレイの阪本です。 もともと外部委託パートナーとしてクレイ案件のお手伝いをしていましたが、気づけば中の人となっていました。 よろしくお願いいたします。 先日、DocBaseはフロン...
フロント（SPA）開発案件2つのプレイングマネージャーと開発リーダーやってますが、JavaScriptが死ぬほど嫌いです。 ブラウザ上で動作するスクリプトなので仕方ないし、async-awaitで大分便利になったけど、非同期処理がやっぱり好きじゃないです。 JavaとかPythonとかそれなりの期間触った言語は大概「みんな違ってみんないい」みたいな感じになるんですが、JavaScriptだけそうならないので本当に嫌いなんだと思います。 因みにCSSはもっと嫌いです。 機械学習モデルの構築をPythonで実装することは多いと思いますが、ちょっとしたデモアプリでも作るとなると、フロント側はどうしてもHTML、JavaScript、CSSで組まないといけないです。 Jupyter Notebookも選択肢に入るかもしれませんが、Webアプリと比べると表現の自由度は下がるし、コードセルが見えるのは
Prettier のサイズを減らすテクニック
実は先日リリースした Prettier 2.6 では前のバージョンである 2.5.1 と比べてバンドルサイズが 3MB ほど減っています。 Prettier 2.5.1 のサイズ(20.0MB) Prettier 2.6.0 のサイズ(16.9MB) リリースブログで言及したとおり Prettier 2.6 ではモジュールバンドラーを Rollup から esbuild に移行したので、その影響かと思われるかもしれませんが実はそれだけではありません。esbuild への移行によって減ったバンドルサイズはそれほど大きくはありませんでした。 バンドルサイズが 3 MB 減ったのは泥臭いチューニングをいくつか行った結果なのです。 この記事では Prettier 2.6 で実施したバンドルサイズを減らすテクニックを紹介します。 きっかけ ライブラリのサイズは大きいより小さい方が当然良いですが、その
モダンCSSの新機能のブラウザ対応がこれで簡単になる！ Modernizrに代わる新しいスクリプト -SupportsCSS
2023年もCSSの新しい機能が続々とリリースされ、進化が早いですね。魅力的な新機能を使用するときに気になるのが、ブラウザのサポートです。 ブラウザがその機能をサポートしているかチェックし、判別するクラスを付与してくれるといえば、Modernizrですが、その更新はストップしています。 そんなModernizrに代わる、モダンCSSに対応したスクリプト、SupportsCSSを紹介します。@containerも@layerも:has()もsubgridもcolor-mix()にも対応しています。 SupportsCSS SupportsCSS -GitHub SupportsCSSはModernizrにインスパイアされたスクリプトで、モダンCSSに使用されるセレクタ・機能・@ルールなどのサポートをライブ検出できます。 CSSの@supportsもサポートしている機能を検出できますが、Sup
WebAssembly の利用シナリオを調べる
参考 : Frequently asked questions 加えて wasm はパフォーマンスの他に移植生も考慮されて設計されています。これによって C++ などでクライアント向けに実装された SDK なども Web に移植できる可能性も生まれます。他にもゲームの SDK, 画像コーデック, 機械学習のモデル、言語ランタイムなども対象にできるでしょう。 とはいえ現実世界で使えているのか Google みたいなトップクラスの技術力の会社だけじゃない？と思われるかもしれません。次はプロダクションの例を調べてみます。 プロダクションでの導入例 Web アプリではまだそこまで実装例は多くないですが、着実にプロダクションでの使用例は年々増えているようです。Google は Meet だけでなく Earth でもプロダクション投入しているようで流石ですね… Google Earth Google
新たなサーバサイドJavaScriptランタイム「WinterJS 1.0」正式リリース、WebAssemblyへのコンパイルも可能。Wasmerが開発
新たなサーバサイドJavaScriptランタイム「WinterJS 1.0」正式リリース、WebAssemblyへのコンパイルも可能。Wasmerが開発 WebAssemblyランタイム「Wasmer」の開発元として知られているWasmer社は、新しいサーバサイドのJavaScriptランタイム「WinterJS」の正式版となる「WinterJS 1.0」のリリースを発表しました。 ❄️ Introducing WinterJS 1.0 - the fastest WinterCG Javascript runtime in the world powered by Rust and SpiderMonkey ...and #WebAssembly compatible! Now supporting: React Server Components Cloudflare mode 150
米セキュリティ企業のPhylumは7月3日（現地時間）、JavasScriptライブラリ「jQuery」の特定バージョンがトロイの木馬化され、GitHubなどで拡散していると警告した。 同社は5月26日、パッケージ管理システム「npm」でトロイの木馬化されたjQueryを確認。少なくとも1カ月にわたって、数十のパッケージで“汚染”されたバージョンが公開されているのを確かめた。さらに、GitHubやCDNサービス「jsDelivr」でも拡散していることが分かったとしている。 対象のパッケージには、悪意あるコードが追加されたjQueryのコピーが含まれていた。汚染されたバージョンはWebサイトのフォームデータを抽出し、外部に送信するという。 Phylumは「マルウェアを作動させるために必要な条件は限られているが、パッケージが広く配布されていることから、潜在的な影響は広く、多くの開発者に影響を与
はじめに がんばって書いた書籍が低評価で少々しょんぼりしているあんどうです。まぁ、つい力が入りすぎて袋小路に思い切り突っ込んだ結果抜けられなくなることってあるよね。あるある。そんなわけで今日はできるだけ力を入れずテンション低めにサクッと行きます。 で、GoのWASM。大道の真ん中をまっすぐに歩まれているみなさんはWASMするときはRustかいっそC/C++をemscriptenでってことになると思いますが、私はしょせん路傍の石の下で低評価が目に入らないように丸まっているダンゴムシ。せっかくだからオレはこのGoでWASMを選ぶぜって感じなんですが、ぶっちゃけあれ、めんどくさいすよね。 あ、ちなみに今回の話は「このめんどくささをまるっと解決！」みたいな気持ちのいい話ではなくて、ただただ「めんどくさいよね」っていうだけの話です。あーめんどくさい。 Rustの場合 まず比較のためにRustの例をあ
Reactコンポーネントの基本原則と人気のUI/UXデザインライブラリの解説 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
Reactは単なるUIライブラリではなく、コンポーネントベースのアプリケーション開発フレームワークです。UI/UXデザインの基本原則に加え、再利用性や状態管理、データフローなどの概念も重要です。 Reactのコンポーネントベースのアーキテクチャを活用すると、UIと裏側のロジックを分離して管理しやすくなり、効率的なアプリケーションの開発が可能です。 今日は、Reactにおけるコンポーネントの基本原則の解説と、初心者に役立つReactコンポーネントライブラリの紹介を提供します。 コンポーネントの設計原則 UI（ユーザーインターフェース） UX（ユーザーエクスペリエンス） UIのデザインに役立つReact コンポーネントライブラリ React Material UI React-Bootstrap Fluent UI Chakra UI Semantic UI React Ant Design
日本語正式サポートされた自然言語処理ライブラリspaCyのStreamlit可視化が超お手軽だった - OPTiM TECH BLOG
R&D チームの徳田（@dakuton）です。 最近、spaCyの日本語版モデルが正式サポートされたのでいろいろ触ってみたところ、解析結果ビジュアライズを全部まとめるStreamlitアプリも同じ月に提供されていることがわかったので、今回はそちらを紹介します。 なお、ビジュアライズ機能の一部(係り受け解析)は1年前の記事「その他」で紹介しています。 tech-blog.optim.co.jp 実行手順 spaCyのUniverseプロジェクトであるspacy-streamlitをインストールします。 pip install spacy-streamlit 起動用スクリプト(streamlit_app.py) import os import pkg_resources, imp import spacy_streamlit models = ["ja_core_news_lg", "ja_
Next.js12.xのLayouts機能
この記事はNext.js 12.xのLayouts機能です。 Next.js 13.xのLayoutsについては公式を参照してください https://beta.nextjs.org/docs/routing/pages-and-layouts Next.jsのLayoutについてTypeScriptの記事を探してもあまり見つからなかったので Layoutsとは🤔 ページ間で共通のコンポーネントを定義する機能 HeaderやFooterなどはほぼ全ページ同じレイアウトを使うけど、ページコンポーネントに直接書くとコンポーネントの状態（入力値など）が保持できないのでページコンポーネントの外に書くことでレイアウトの状態も保持できる🤝 検証に使ったリポジトリ Next.jsのLayoutsを使うと何が嬉しいのか 一部共通ではないページが有る場合もページ単位でLayoutを変えられるので対応可能
はじめに 今回はwebpackやBabelについて学習したことを理解を深めるために文章としてアウトプットしていこうと思う。 そもそもなぜwebpackやBabelに関して学習しようと思ったかは、これまでTypeScript、React等を用いて様々なアプリケーションを開発してきたが、webpackやbabelに関する知識が曖昧なまま開発ばかりを行なっていた。なんとなく"とりあえず変換してくれているもの"程度の知識しかなかったので、しっかり理解していこうと思う。 そんな中でwebpackやbabelの必要性を学習していくうちにJavaScriptの歴史を理解した方がわかりやすいと思ったため、JavaScriptの歴史についても触れていこうと思う。 JavaScriptの歴史 JavaScriptの誕生 JavaScriptの1995年にNetscapeの技術者であるブレンダン・アイクが開発し
今日からあなたはフロントエンドエンジニアです！ え、面接でバックエンド・インフラしかやってなかったって言ったのに！？フロント！？どうしよう 😭 [1] どうも、株式会社カナリーでお部屋探しマーケットプレイスの CANARY を開発している shusann です！ 本エントリーでは、 もしあなたが明日から急にフロントエンドエンジニアを任されることになっても困らないよう、私がこの半年間で何をどうやって学んできたかをシェアすることで道しるべとなれることを目指しています。 これから同じ境遇に立つ人やフロントエンド興味あるけど何から手を付ければいいかわからないようなエンジニアにとって、この記事が参考になれば嬉しいです 😍 とはいえ、本エントリーは半自伝的な記事で「ああ、こんなことやってたんだ」という読み物として話半分に読んでいただければ幸いです。 自己紹介 本題の前に、半年前の入社当時の自分の状
はじめに フロントエンドのテスト手法の 1 つに Visual Regression Testing（以下、VRT）があります。 これは、アプリケーションの画面を画像として保存し、画像の差分比較をすることで意図せぬ変更が生じていないかテストする方法です。 ここ数年で広く普及し、用語としても一般的になったように思います。 私も以前、とある OSS に reg-suit & Storycap を使った VRT を導入したことがあるのですが、その後もいくつか VRT のためのライブラリが登場したもののキャッチアップできていませんでした。 そこで今回は知識のアップデートを目的として、ここ最近登場した（と思われる）VRT のライブラリをいくつかご紹介します。 なお、今回紹介するツールはすべてこちらのリポジトリで試しています。 具体的な設定ファイルや動作結果を確認できるようになっていますので、ご興味が
前置き HTMLを納品する形式の仕事の際にEJSやpugではなくReact+TypeScriptを使ってHTMLを生成しつつ開発体験を高めてほしい。 ということで具体的にどのようなメリットがあるのかを伝えたくてまとめてみました。 開発環境 1から環境を作るのは大変なので今回はクラクさんのministaを拡張していきます。 ministaの紹介記事はこちら 必要な設定はTypeScript, ESLint, Prettier, Babel, エディター(今回はVSCode)になります。 webpack.config.js const path = require('path') const glob = require('glob') const HtmlWebpackPlugin = require('html-webpack-plugin') const webpackConfig =
他にもまだまだあると思いますが、自分が見たことがあるのは上記になります。 それぞれ見比べてみると、やはりエンコード・デコード両方に対応しているライブラリが人気があるようです。 この中で特に人気のある easyjson , gojay , json-iterator/go でベンチマークをとってみた結果、パフォーマンスの良い順に並べると次のようになりました。 gojay > json-iterator/go > easyjson > encoding/json 設計方針の違いがそのまま速度に現れているようにも見えますが、理論上最速にできるはずの easyjson が遅かったりと実装の良し悪しも影響しているようです。 一番遅いのは encoding/json です。そもそも encoding/json が遅いから新しい JSONライブラリを作ろうとしているはずなので、一番遅いのは仕方ないのです
はじめに 仕事でWebサイトを作った際に、 デザイン案で非常に参考にさせて頂いたサイト様をまとめました。 Parts. SaaSのサービスサイトやLPを中心としたデザインの参考サイトです。 部分ごとにパーツやセクションごとのデザインが載っているので、 探しやすくとても参考になりました。 動くWebデザインアイディア帳 「動かしたいパーツ」ごとの逆引きリストを扱っているサイトです。 機能的 or 印象的で有効なデザインが多数載っており参考になりました。 ※注意として 動くWebデザインアイデア帳のサイトは、書籍に明記している通り「3年間の期限付き」です。 （※書籍の売れ行き次第で変わります。） ちなみに実践編の方ですが、私も書籍を購入させて頂きました。 Web Design Trends(ウェブデザイントレンド) Webに関わる全ての人のためのメディアです。ウェブサイトの制作やデザインに役立
はじめに Reproで開発を担当しているEdward Fox (edwardkenfox) です。2021年頃から Repro Booster というプロダクトの立ち上げに携わっており、開発を通して得た知見を共有できればと思い立ち筆を取るに至りました。4年ぶりのテックブログ執筆で少しばかり緊張していますが（？）、張り切ってやっていこうと思います。 Repro Boosterとは 2022年11月に正式リリースした、ウェブサイトの表示速度向上を実現するサービスです。「タグを入れたその日から、Webサイトが速くなる」というタグラインのもと、タグ（JavaScript）の設置だけでウェブサイトの表示速度が簡単に実現できるということで、リリース以来多くのお客様・サイトでご利用いただいています。 Repro BoosterではServiceWorkerと呼ばれる技術を最大限活用して多くの機能が実現さ
We want the default build output of Next.js to work well when self hosting, and also well on Vercel. And guess what? They're the same output. Well, almost. Let me clarify. It took us a while at Vercel to figure out the correct format and boundary between open source framework and infrastructure platform. Our philosophy is called framework defined infrastructure. And critically, the specification t
GitHub Copilot Agent の力を借りて Next.js から React Router に移行しました - ANDPAD Tech Blog
ANDPAD フロントエンドエンジニアの小泉です。 普段は Vue での開発をメインにしているのですが、並行して React のプロジェクトも担当しています。 今回は、「ANDPAD 資料承認」というプロダクトのサービスページを Next.js から React Router に移行した際の、 GitHub Copilot の活用法について紹介します。 特に、「コーディングエージェントが凄いのはわかったけど、実際のプロダクト開発にどう取り入れて良いかわからない」という悩みを持っている方の参考になれば幸いです。 なお、この記事は、ある程度 Copilot や コーディングエージェントを使ったことのある方に向けた内容となっています。そもそもの Copilot の導入・設定方法、基本的な使い方・事例について知りたい方は、以下の記事を先に読んでいただくのがオススメです！ tech.andpad.c
JavaScriptでは任意の値を例外としてthrowすることができますが、実際にはErrorのインスタンスをthrowするのが慣例です。 エラーの原因をより正確に説明したいときはErrorを継承するのが望ましいですが、単に継承するのではなく以下のように書くのがオススメです。 class MyError extends Error { static { this.prototype.name = "MyError"; } }その背景について以下で説明します。テーマは以下の3つです。 nameプロパティcaptureStackTracecauseプロパティnameを正しくセットするNode.jsでエラーを表示させると、クラス名が正しく表示されます。 > throw new (class C extends Error {})() Uncaught C [Error]ここで出力されている "C
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【全30項目】コーディング時のルールや思想（HTML/CSS/Sass/JSなど）
DevTools の Web 技術でできている部分を覗き見る - polamjaggy
4KBのJavaScriptだけで動く可愛いアクションゲームを作ったのでソースと解説 - Qiita
【入門】フロントエンドのテスト手法まとめ - Qiita
TypeScript で"moduleResolution": "Node"は使わないほうがいい
Flyde | Visual Programming. For Developers.
Next.jsを初心者向けツールとして捉えている自分が、実践 Next.js を読んでみて
ReactのSuspense対応非同期処理を手書きするハンズオン
Pythonの音楽情報処理ライブラリmusic21の紹介 - Qiita
メンテモが Vercel を剥がすまで (移行作業編) - メンテモエンジニアリング
ざっくりつかむ！LangChainのメンタルモデル
DocBaseのフロントエンド改修をどのように進めたか
【Streamlit】JavaScriptが嫌いだからPythonだけでWebアプリをつくる - Qiita
トロイの木馬化したjQueryがGitHubやCDN経由で拡散 米セキュリティ企業が警告
GoのWASMがライブラリではなくアプリケーションであること - 株式会社カブク
歴史から見るTypeScriptにおけるwebpackとBabelの必要性 - Qiita
バックエンド出身エンジニアがReact/Next.jsに入門してみた話
2023年にVisual Regression Testingを始めるならどんな選択肢があるか
HTMLコーディングでもReact+TypeScriptの開発体験を得る
Goで高速JSONライブラリを作るためにしたこと | メルカリエンジニアリング
Webサイトを作る際に超参考になったデザインのサイトまとめ - Qiita
ServiceWorkerの落とし穴8選 - Repro Tech Blog
Why I'm Using Next.js
JavaScriptのカスタムエラーはこれでOK | Wantedly Engineer Blog
support.npe.fit
blog.livedoor.jp/yk841
realsound.jp
www.baycurrent-kenpo.com
togetter.com
www.imdb.com