Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
※本記事で言及しているReflexのdiscord内に日本語チャンネルをつくってもらいました。もし、興味をもった人がいたら参加してみてください。 １．PythonだけでWebアプリをつくるライブラリが増えている 最近（2024.05）、Python界隈ではPythonだけでWebアプリが作れるライブラリが増えています。詳しくは他の記事を参照してもらえればと思います。 以下の記事がとても参考になりました。ありがとうございます。 ２．ライブラリの分類 こうしたライブラリも大きくわけて２つの種類があるように思います。 ①データ解析の結果を表示するダッシュボードライブラリ ②汎用的なWebアプリをつくるローコードライブラリ ①ダッシュボード系ライブラリ たとえば、上記の記事にも出てきますし、ネットでもかなり情報の多い、StreamlitやDashは項番1のダッシュボードライブラリに該当すると思いま
Magic UI
UI library for Design Engineers20+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. 100% open-source, and customizable.
除籍謄本の効率的な取り寄せ方
請求書は必要事項が書かれていればフリーフォーマットでも受け付けてくれるので、こんな感じで送ると効率的。 これと本人確認書類のコピー、対象者まで辿れる戸籍謄本・除籍謄本のコピー、定額小為替、返信用封筒 (多めに切手を貼っておくか、レターパック) をまとめて対象の市区町村役所に送る。 小為替は750円単位で複数枚多めに同封しておく。手数料が異なる場合はそれに合わせるか、「端数分は返金不要」と記載しておくと良い。 自分の場合戸籍の除附票も請求したが、残っているケースは1件も無かったのでこの例では省略。 ○○市 (区町村) 長 殿 ○○○○年○○月○○日 以下の通り、戸籍関係書類を請求致します。 請求する書類以下の者について、対象者本人およびその直系尊属が含まれる全ての除籍謄本、改製原戸籍謄本 (複数ある場合にはその全て) の写し … 各1通 ※家系を辿るため、請求者が取得可能な範囲全ての書類（範
切り替える理由 自社の主力製品で利用している技術(WebRTC / WebTransport)がブラウザベースのため TypeScript を利用する Go を採用したのは sqlc が使いたかったという理由 sqlc-gen-typescript が出てきたのでもう Go を使う理由がなくなった 自社サービスチーム全員が Go にまったく興味が無い sqlc 自体は便利 そもそも自社に Go への興味がある人がいない 自社サービスの規模ではボトルネックになるのはデータベースであって言語ではない もしアプリでスケールが必要なときは Rust や Erlang/OTP に切り替えれば良い コネクションプールは PgBouncer を利用すればいい TypeScript からは 1 コネクション 1 接続で問題無い どうせフロントエンドでは TypeScript を書く 自社では React
元フルスタックエンジニア(死語)をやらせていただいていたものです。 JavaScript(TS)周りの進歩が凄く、あまりにもついていけていなかったので、気になったワードを片っ端から整理してみました。 それぞれに対する説明の正しくないものが含まれてしまっている可能性があります。 そんなところを見つけたときは優しく教えてくださると助かります。 各ツールの詳細というよりは、それぞれがどんな役割のものなのかを記載しています。 この記事が誰かの助けになれば幸いです。 調査・分類した言葉(技術)たち Hono Bun Deno Biome Vite Webpack Turbopack esbuild Babel SWC Prisma まず上記に上げたものが、どういった機能を持つものなのかもわかりませんでした。 それを整理すると以下になるようです。 JavaScript Runtime Deno Bun
巷の「ReactとNext.jsの比較」はここがおかしい、というか比較すること自体が微妙 - honey32
(WIP まとまったら Qiita とかに上げるかも) TLDR; 「React と Next.js を比較」という記事で、 Next.js と比較できるのは「フレームワークなしで React を使うという選択肢」であって、「React そのもの」ではない。 ✅️ React を使うのに 「フレームワークあり」 vs 「フレームワークなし」 ❌️「React」 vs 「Next.js」 それはそうと、「create-react-app の機能・特徴」のことを、「React の機能・特徴」であるかのように書いてしまっている記事が多い create-react-app 自体が擬似的なフレームワーク（といえそう） そもそも、create-react-app は今は更新されてないので create-vite-app を使うべき フレームワークあり or フレームワークなし 【フレームワークあり】
tl;dr はじめに 2024 年の 4 月 24 日に Node.js 22 がリリースされました。ESM を 条件付きで require する機能や、--run フラグによる npm スクリプトのパフォーマンス改善などが v22 で追加され、2009 年に Ryan Dahl が Node.js をリリースしてから 15 年が経つ今も、Node.js は進化を続けています[1]。 こうして Node.js 自身が強化されていくにつれ、以前はサードパーティーのパッケージを使用して実現することが一般的であった機能が Node.js のみで実現可能となり、当該パッケージが不要となるような場合があります。冒頭に引用した Ben Holmes の動画では、そのように不要となったパッケージとして dotenv node-fetch chalk mocha が挙げられていますが、この記事では「これら
TSKaigi 2024 ref: https://tskaigi.org/talks/tockn
TypeScript の型システムを活用して、本番のアプリケーションにおける実用的な問題を解決することを目指しています。Effect-TS は、以下のような特徴を備えています。 並行性（concurrency）：Fiber ベースの並行モデルにより、高いスケーラビリティと低レイテンシを実現 コンポーザビリティ（composability）：小さく再利用可能なパーツを組み合わせることで、メンテナンス性、可読性、柔軟性の高いソフトウェアを構築する リソースの安全な管理（resource-safety）：処理が失敗したとしても、安全にリソースを開放する 型安全性（type-safety）：TypeScript の型システムを活用した型推論と型安全性に焦点を当てている エラー処理（error handling）：構造化された信頼性の高い方法でエラーを処理する 非同期性（asynchronicity
昨日、OpenAIが生成AIの新しいモデルであるGPT-4oを発表しました。消費するトークン数の節約や、音声合成機能の改善、応答速度の向上など着実な品質改善を見せているようです。私も、特に音声合成（Text To Speech）の表現力について非常に興味を持っています。 私は以前、「OpenAIのGPT-4 Turbo with visionを日本語OCRとして使ってみる」で、GPT-4 Turboの画像認識機能の日本語OCRについて検証を行いました。その当時は、既存のコグニティブAI APIに比べて認識精度が十分でないという評価をしています。とはいえ、その後に出てきたClaude 3 Opusは驚くべき認識精度だったので、OpenAIも巻き返す可能性は十分にあると感じました。Azure OpenAI Serviceを使っている場合は、Vision enhancementという既存のコグニ
Next.js 型安全なルーティングを使う
Next.js 型安全なルーティングを使う 2024.04.28 Next.js では実験的な機能として、型安全なルーティングを利用できます。この機能を使うことでリンク先のパス名を静的に検査できるため、typo などのエラーを事前に防ぐことができます。 この記事における「型安全」とは、静的な型検査によりランタイムで起こり得るエラーを事前に検知することを指します。 Next.js では Next.js 13.2 より実験的な機能として、型安全なルーティングを利用できます。この機能を使うことでリンク先のパス名を静的に検査できるため、typo などのエラーを事前に防ぐことができます。 なお、型安全なルーティングを利用するためには App Router と TypeScript を使用している必要があります。 型安全なルーティングの利用方法 型安全なルーティングを有効にするためには、experim
import { ChangeEvent, FormEvent } from "react"; export default function Form() { const showError = (message: string) => (e: FormEvent<HTMLInputElement>) => { if (e.currentTarget.validity.valueMissing) { e.currentTarget.setCustomValidity(message); } else if ( e.currentTarget.validity.patternMismatch && e.currentTarget.name === "postcode" ) { e.currentTarget.setCustomValidity("郵便番号正しく入力してね"); } else
Next.jsのApp Routerを学ぶ際に、UIライブラリを探していたところ、shadcn/uiが参考になったので紹介します。 shadcn/uiは、フレームワークやライブラリではなく、コピペで利用できるReactコンポーネントのサンプル集という立ち位置になっています。Tailwind CSSでデザインされており、React Server Components(RSC)にも対応しています。 サンプルの実装方法が参考になる点も魅力の一つです。 簡単ですがつらつらと紹介していきたいと思います。 shadcn/uiとは デモを見てるとフレームワークやライブラリなのかなと思いきやそうではなく、コピペで利用できるサンプル集という立ち位置になっています。基本的にはTailwind CSSでデザインされてるようです。 サンプルとはいえ、実装方法で参考になった箇所が結構あったのでそこも気に入ってるポイ
はじめに 先日開催されたTSKaigi 2024にて配信チームとして、オンライン配信のスタッフをしていました。 当日の各トラックの配信運営や総合的な環境構築などは他のメンバーを中心に行っていただきましたが、自分は配信画面のデザインや配信に乗せる情報管理用のシステムをコツコツ作っていたのでその紹介をさせていただきます。 情報管理用のシステムといってもローカルマシン上で動く簡単なもので、NodeCGと呼ばれるNode.js向けの配信画面管理用のフレームワークを利用しました。 NodeCGとは NodeCGは先ほど紹介したようにNode.jsとブラウザ技術で動的な配信画面を作成したり、管理画面を提供してくれるフレームワークです。 配信レイアウトとダッシュボードはブラウザ上で動作し、ダッシュボードで編集した情報を配信レイアウト側にWebSocketでリアルタイムに反映したり、WebSocketサー
はじめに こんにちは。ドワンゴ教育事業でエンジニアをしているユーンです。 N予備校アプリケーションやその他複数のプロジェクトで pnpm を採用しました。pnpm とは何か、npm とどう違うのかというのを node_modules の構造を追いながら理解しつつ、教育事業での採用した結果についてお話します。 pnpm とは pnpm とは、npm や yarn とレイヤーを同じくするパッケージマネージャであり、サードパーティのものです。 pnpm.io pnpm は他のツールと比較して高速でありディスク効率が良いと謳っています。 その pnpm の最大の特徴は、 node_modules の構造にあります。 例えば npm では v3 からフラットな node_modules を使うようになっております。yarn もデフォルトでは同様にフラットな node_modules を提供しています
GitHub - cezaraugusto/extension.js: 🧩 Plug-and-play, zero-config, cross-browser extension development tool.
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
デザインパターンライブラリを作った JSRの話だけ読みたい人は読み飛ばしてもOKです。 JavaScriptのtry-catchはC++の影響を受けており、以下の特徴があります。 (A) throwは大域脱出的である。 (B) try-catchはブロック内の全ての例外副作用に対して一括で作用する。 (C) try-catchは文であり、値を返せない。 (D) TypeScriptにおいて、例外型は明示されない。 このうち (B), (C), (D) の問題を解決するため、RustのResultや類似のパラダイムをJSに輸入する試みがしばしば行われています。しかしこの解決手段にはいくつかの問題があり、 (E) rethrowの専用構文がないためボイラープレートが増える。 (F) 出力ストリームに対するwriteなど、戻り値を持たない副作用関数に対するエラーハンドリングが抜け落ちないようにL
GitHub - openai/openai-assistants-quickstart: OpenAI Assistants API quickstart with Next.js.
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
バックエンドなくてもフロントで完結するライブラリ作りました。サンプルでTodoアプリにしました See the Pen KiZooNa.js TODOs by John Doe (@04) on CodePen. ソースコード 使用方法 使い方はLaravelのクエリビルダーとまったく一緒です。Laravelのpluck()やcount()やinsertGetId()など全部使えます！ <html> <body> <script src="https://github30.github.io/KiZooNa.js/KiZooNa.js"></script> <script type=module> const db = new DB({ url: 'http://localhost/sql-injection.php', dsn: 'mysql:host=127.0.0.1;dbname=
「ビーチ・ボーイズ」創設メンバー、後見制度の対象に 米裁判所
演奏を披露するブライアン・ウィルソンさん＝２０２２年６月/Paul Hennessy/SOPA Images/Shutterstock （ＣＮＮ） 米国西海岸発の独特なメロディーなどで一世を風靡（ふうび）したロックバンド「ビーチ・ボーイズ」の共同創設メンバーのブライアン・ウィルソンさんが、米ロサンゼルスの地方裁判所の判断を受け、成年後見制度の対象となったことが１２日までにわかった。 裁判所文書によると、地裁判事は同制度の適用が必要との明白かつ納得し得る証拠があると説明。「認知症により日常生活上の処理が自力でできない状態にある」とし、治療面で承諾を与える判断力にも欠けているとした。 その上で後見人に対し健康管理上の決定事項に関しては、ウィルソンの子どもと相談するよう命じた。 ウィルソンさん自身も後見制度の適用に同意しているという。 ウィルソンさんの家族によると、後見制度の適用は妻メリンダさん
JSR Meetup に参加してきた
JSR Meetup JSR が気になっていたことや、Deno の中の人が主催というのも良いなと思って、ささっと参加してきました。自分用に雑にまとめておきます。 https://jsr.io/ https://github.com/jsr-io/jsr ハッシュタグ 自分のメモ Deno Land Inc. が開発、運用しているパッケージレジストリ プライベートは今のところ予定されていない TypeScript をそのまま登録できる ESM 対応 OSS で開発されている 自前の JSR を立てることもできる 積極的に改善されていきそう ドキュメントが生成される Web UI がモダン Deno が流行らないと苦しそう @std を Deno が持ってるのは他からはちょっとな ... って思われそう キレイな npm 雑感 印象としては使ってみても良さそうという感じです。ただ無理に npm
引用元: https://nodejs.org/en/about/branding 2024年4月24日にリリースされたNode.js v22の主な変更点を紹介します。 Node.js v22はLTS(長期サポート)のバージョンになります。10月の後半にLTSとしてサポートが始まります。 nodejs.org require()がESMをサポート V8 12.4 アップデートによる JavaScript の機能 Array.fromAsync() Set methods union() intersection() difference() symmetricDifference() isSubsetOf() isSupersetOf() isDisjointFrom() Iterator Helpers map() filter() reduce() --runオプションによるpacka
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
令和のHTML / CSS / JavaScriptの書き方50選
PythonだけでWebアプリが作れるライブラリが増えている（2024.05） - Qiita
自社サービスのバックエンドを Go から TypeScript へ切り替えるための整理
フロントエンドのスピードに置いていかれたので、よく聞く技術を調べて分類してみた
Node.js の進化に伴い不要となったかもしれないパッケージたち
Prisma ORMを2年運用して培ったノウハウを共有する
エラーや非同期処理をより安全に扱うための TypeScript ライブラリ Effect-TS
OpenAIのGPT-4oを日本語OCRとして使ってみる
ほぼJSなしで完璧なReactフォームをつくる
Next.jsのApp Routerを学ぶ際、shadcn/uiが参考になったという話 - Qiita
TSKaigiは配信画面もTypeScript製だったという話
pnpm の node_modules を探検して理解しよう - ドワンゴ教育サービス開発者ブログ
JSのデザインパターンライブラリを試作した話と、それをJSRにアップロードしたら無茶苦茶簡単で感動した話
バックエンドエンジニアやめませんか？【KiZooNa.js】 - Qiita
Node.js v22の主な変更点 - 別にしんどくないブログ