はじめに 知っておくと仕事が捗るブラウザ上で動く超便利なツールを17個集めました。 Squoosh Googleが開発した画像変換・圧縮用のWebサービス。 プレビュー画面で変換前後の画質をリアルタイムで確認しながら圧縮設定を調整することができる。 Documatic Documaticは、プロジェクトドキュメントの開発プロセスを削減するためのツール。API リファレンスからユーザー ガイドまで、コード ベースを簡単に文書化できる柔軟なテンプレートとユーザーフレンドリーな編集ツールを提供する。 transform jsonからyamlの形式に変換したい等、あらゆるデータ形式から別の形式に変換するサービス。 jsonからyml、htmxからjsxへの変形、jsonやGraphQLのIDLからTypeScriptのinterfaceまでも、ブラウザ上で生成することができる。 Roadmap.s
ライブラリ選定のときに使えるツールあれこれ
自分が使ってるやつを紹介します。 GitHub Star History 指定したGitHubリポジトリのスターの増加数をグラフで見れるサイトです。 たとえば、👇の3つのReactのUIライブラリを例に見てみます。 mui chakra-ui shadcn-ui ▲https://star-history.com/#shadcn-ui/ui&chakra-ui/chakra-ui&mui/material-ui&Date こんな感じで、一目でライブラリの人気度合いをざっくり比較できます。 使い方 テキストボックスに、比較したいライブラリのGitHubリポジトリURLを入力するだけです。 また、「Align timeline」にチェックを入れると、グラフのスタートを揃えれます。 たとえば、Prisma ORMとDrizzle ORMを比較するとPrismaの方が圧倒的に見えますが、スタート
はじめに バックエンドエンジニアは、プログラミングの中で特にイメージがわきにくい分野である。簡単に言えば、バックエンドエンジニアはユーザから見えない部分にあるシステムである。(例えば、ユーザ認証やデータベース設計・操作・運用などが例として挙げられる) 例えば、ECサイトを運用する際に、ユーザから見えるUIだけを作っても作動しない。バックエンドになるシステムの構築も必要なのだ。 今回はバックエンド開発を理解する上で必要な10の知識を徹底解説する。その中で、個人の見解に過ぎないが初心者にオススメのバックエンドのフレームワークを3選紹介する。あくまで一個人の見解に過ぎないが、今回の記事を通してバックエンドの学習方法またはその魅力を十分に理解していただければ非常に幸いである。 本題に入る前に、本記事における「バックエンド」はあくまで認証やデータベースなどシステムやソフトウェアの裏側で動作しているも
はじめに フロントエンドは、簡単に言えばWebアプリケーションやWebサイトにおけるユーザが目に見える部分のことを指す。ひとくちにフロントエンドと言っても、学ばなければならないことや知識が数多くあるので初心者にとっては何から勉強すればいいのかわからない人も少なくないだろう。 今回の記事では、個人の一見解としてフロントエンド開発をマスターするのに必要な基礎知識を徹底解説する。今回の記事を通して、フロントエンドの学習方法やその魅力を十分に理解していただければ非常に幸いである。 バックエンドに関しては以下の記事を参照してほしい。 フロントエンド開発に必要な知識 １．基本的な知識 フロントエンド開発をマスターする上では、以下の言語の基本文法や知識をマスターしておこう。これはWeb制作やWebデザインにも共通していることである。 HTML：Webページを作成するための言語。主にページ内の情報を構造化
Announcing Oxlint 1.0
TL;DR: The first stable version Oxlint has been released! With a 50~100x performance improvement over ESLint, support for over 500 ESLint rules, and usage in major companies like Shopify, Airbnb, and Mercedes-Benz, you should give it a try. Get started now. Oxlint is a Rust-powered linter for JavaScript and TypeScript is designed to be fast and simple to adopt. Since its first announcement back in
フロントエンドエンジニアのための技術マップ【2025】
Webフロントエンドの全体的な構造をざっくりまとめてみました。 フロントエンド開発で欠かせない技術要素から、Node.jsの立ち位置、今さら聞けないモジュールバンドラーやトランスパイラなど... 順を追って必要な知識を整理していきます。 ここでは各要素について深掘りはせず、あくまで全体像を把握できるような内容を目指しています。 🌱 1. Web開発の基礎 インターネットの基礎知識 HTTP / HTTPS / DNS / IP：通信プロトコルと名前解決の基礎 ブラウザの仕組み：レンダリングやJavaScript実行の流れ クライアントとサーバーの関係：役割と通信の基本 フロントエンドに限った話ではないですが、改めて。 とくにDOMのレンダリングの仕組みやJavaScriptの実行タイミング（非同期処理など）の理解は必須です。 Webページは、ブラウザがHTMLやCSS、JavaScrip
JSer.info #600 - BunというZig言語とJavaScriptCore(WebKitのJavaScriptエンジン)を使って書かれたJavaScript Runtimeが公開されました。 oven-sh/bun: Incredibly fast JavaScript runtime, bundler, transpiler and package manager – all in one. Bunは"all-in-one JavaScript runtime"とあるように、TypeScript/JSXのTranspiler/Bundler/Task Runerを同梱し、npm互換のパッケージマネージャーやNode-API(N-API)互換の実装、FetchなどのWeb APIの実装をもっています。 Denoと似ている立ち位置のRuntimeですが、Node.js互換のAPI
背景 さまざまなCSS フレームワークが登場し、最近は Tailwind CSSが注目され話題になっていたのは認識していました。そんな中、一部でChakra UIなるものの名前も見るようになり、さらにTailwind CSSと比較される書き方をされることが多いように感じ気になっていました。 また、React Developer Roadmap2021の Stylingにあり、使ってみたいと思っていたのもあります。 参考： https://roadmap.sh/react 私はReact を使用する場面が業務でも個人開発でも多いのですが、個人的にReact UserはChakra UI推しが多いように感じたのも使ってみようと思った理由の一つです。 https://www.reddit.com/r/nextjs/comments/jznkit/tailwindcss_vs_chakra_ui_
JSer.info #676 - Biome v1.5がリリースされました。 Biome v1.5 | Biome GitなどのVCSでの変更されたファイルだけを扱う--changedフラグの追加、biome ciでGitHubのProblem Matcherに合わせた出力をすることでPRコメントの対応が行われています。また、biome explainの追加、Lintルールの追加なども行われています。 リリースにあわせて、Biomeの2024年のロードマップも公開されています。 Roadmap 2024 | Biome Biome の 2024年のロードマップの公開と v1.5.0 のリリース 現在CSSの対応を進めていて、今後はHTMLやMarkdownなどの対応も行われる予定です。 また、プラグインの仕組みも検討していくようです。 Node.js v20.11.0がリリースされました。
カケハシのフロントエンドエンジニアとしてのスキルアップ - KAKEHASHI Tech Blog
こんにちは、株式会社カケハシでおくすり連絡帳 Pocket Musubiの開発を担当している渡辺です。 カケハシのエンジニアはフロントエンドもバックエンドのAPIサーバーも開発を担当しています。どちらかといえばフロントエンドの方が知識・経験ともに自信があるという背景から、今回はカケハシのフロントエンドエンジニアについて書きます。 カケハシでのフロントエンドエンジニア カケハシであまりフロントエンドエンジニアという表現は用いず、アプリケーションエンジニアという表現を用いています。 アプリケーションとして価値を生み出すことが主眼であって、それがフロントエンドの領域であろうがバックエンドの領域であろうが問わず、価値を出せるかが大事なのです。 フロントエンドエンジニアとしての価値向上 とはいえ、フロントエンドエンジニアとしてスキルを積み上げてきた人は、なかなかやってきたこと以外にまで手を広げるのは
Theme 第 167 回のテーマは 2024 年の Yearly Ecosystem です。 Show Note 2024 年のチェックポイント Vite の覇権を Turbopack, RSPack が奪えるか? Storybook は覇権をとって、Chromatic もすごくなりそう Next App Router が本当に広がるか RSC 対応の Bundler が増えて Next 以外の解が見れそう アプリケーションの Rust 化くるか? React Forget Figma Config 2024 の Adobe の影響 State Management どうなってく? (Context, Jotai, SWR, Signal) ESLint to flat config or Biome AI driven FE Development CSS の新しい方法論 今年のキーワ
JSer.info #701 - TypeScript 5.6 Beta がリリースされました。 Announcing TypeScript 5.6 Beta - TypeScript ESLintのno-constant-binary-expressionと似たチェックを行い、常にtrue/nullishとなる間違った書き方をコンパイルエラーにする変更が含まれています。 Interesting bugs caught by no-constant-binary-expression - ESLint - Pluggable JavaScript Linter Iterator Helperのサポート、ES2022のArbitrary module namespace identifier namesをサポート、--noUncheckedSideEffectImportsフラグの追加も行わ
qiitaの自記事の転載です。 2021/02/21 10選 => 12選に更新 こんにちは、WEBエンジニアのhedrallです。 もう一歩踏み込んでプログラミングに関して勉強をしようと思った時、 世の中には学習のためのレポジトリが存在していて、しかも世界的にはものすごい数のStarを獲得しているものも少なくないことを知りました。 今回はピックアップしてご紹介いたします。 [⭐️ 96.6k]: javascript-algorithms プログラミングで使用されるデータ構造や、一般的なアルゴリズムがまとめられており、全てjsで実装が例示されています。 [⭐️ 149k]: developer-roadmap webやinfraなど各分野のエンジニアになるために知っておくべき技術がロードマップとしてまとめられているので、学習方針などに迷った時や、取りこぼしがないか確認したい時などに活用が
近年のJavaScriptにまつわる知識、フロントエンド界隈の変化には著しいものがあります。JavaScriptを学び、エンジニアとして仕事をされる方のキャリアパスとして「フロントエンドエンジニア」というものがあるのですが、この「フロントエンドエンジニア」がカバーする仕事の範疇も非常に大きなものとなっています。 WEB DEVELOPER ROADMAP 2022 「フロントエンド デベロッパーのためのロードマップ」 https://roadmap.sh/frontend こちらは、開発者向けプラットフォーム「GitHub」で公開されているフロントエンドエンジニアとしての学習ロードマップをまとめたものです。要するに、フロントエンドエンジニアとして必要な知識やスキルセットにはどんなものがあるのかを順立てて紹介している図なのですが、これを見ても、フロントエンドエンジニアとして求められる可能性の
I've modified GNU Make to support strict dependency checking. This is all thanks to the Landlock LSM system calls which were introduced in Linux Kernel 5.13 twelve months ago. What it means is that Make can now solve the cache invalidation problem similar to Bazel except with 5x better performance. Background I blogged last month about our work porting OpenBSD pledge() and unveil() to Linux as par
GitHub - antfu/vscode-file-nesting-config: Config of File Nesting for VS Code
// updated 2026-01-30 23:35 // https://github.com/antfu/vscode-file-nesting-config "explorer.fileNesting.enabled": true, "explorer.fileNesting.expand": false, "explorer.fileNesting.patterns": { ".agent": ".agent, .claude, .cline, .codebuddy, .codex, .commandcode, .continue, .crush, .cursor, .factory, .gemini, .goose, .junie, .kilocode, .kiro, .kode, .mcpjam, .mux, .neovate, .opencode, .openhands,
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
知っておくと仕事が捗る便利ツール17選 - Qiita
バックエンド開発の基本を理解するために必要な10の知識 2022年版
フロントエンド開発をマスターする上で必要な知識 8選 2022年版
2022-07-14のJS: Bun(all-in-one JavaScript runtime)、Vite 3.0.0、600回目の更新
TailwindCSS と比べつつ Chakra UI に入門する - Qiita
2024-01-11のJS: Biome v1.5、Node.js v20.11.0、Rspack 0.5
ep167 Yearly Ecosystem 2024 | mozaic.fm
2024-07-29のJS: TypeScript 5.6 Beta、Node.jsの実験的なTypeScriptサポート、State of React 2023
Webエンジニアが勉強できるGit Repository 10選
デジタルハリウッド講師が選ぶ、オススメJavaScript関連本8選【2022年版】
Using Landlock to Sandbox GNU Make