JavaScriptには、scrollTo()メソッドやscrollBy()メソッドなど、目的のところまでスクロールする関数があります。これらの関数と一緒に使われることが多いのがbehaviorプロパティに"smooth"を設定して、目的地まで滑らかにアニメーションさせる方法です。たとえば目次をクリックしたら該当の章までスムーズにスクロールさせるなど、使ったことがある方も多いと思います。 スムーズスクロールの課題として一番大きなものは、スクロールの完了後に行う処理が書きづらいことです。Chrome・Edge 150から使えるプログラマティック・スクロール・プロミスでは、今までscrollendイベントの監視やsetTimeout()メソッドなどで検知していたスクロール完了を、Promiseを使って制御できるようになります。 スクロール完了をPromiseであつかう Promiseは非同期の
const fs = require('fs') const path = require('path') /** * TwitterアーカイブのJSファイルをJSONに変換する関数 * @param {string} inputFile - 入力ファイル（.jsファイル）のパス * @param {string} outputFile - 出力JSONファイルのパス */ function convertTwitterArchiveToJson(inputFile, outputFile) { try { // ファイルを読み込む let fileContent = fs.readFileSync(inputFile, 'utf8') // window.YTD.tweet.part0 = [...] の形式から実際のJSONデータを抽出 // 正規表現を使用して [...] の部分を取
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに フロントエンドを学べる教材をまとめました。 今回紹介するフロントエンド技術は下記になります。 ロードマップ (全体像) JavaScript TypeScript React Next.js 対象者 これからフロントエンドを学びたい人 モダンフロント技術に挑戦したい人 ロードマップ (全体像) エンジニア向けの学習ロードマップがまとめられている。 現在の自分の立ち位置を把握し、次にやるべきことの方向性を知れる。 エンジニアが使うであろう、ほぼ全技術が網羅的にまとめられているので、全体像を掴む上では一度目を通す価値はある資料にな
2024-11-11 追記ここから ---- TS 5.8で、その１のインデックスアクセス型の方はサポートされそう。その２の方はその対応が入ってもサポートされない。 追記ここまで ---- 最初にまとめ 現在のTypeScript（2024-09-19時点のバージョン5.6.2）では Generics と Control Flow Analysis は、いい感じには連携しないということを学んだ。 どういうこと？その１ Genericsを使って型安全にやりたいなぁと思って、こんなコードを書いてみてもコンパイルエラーになる。 type Mapping = { a: boolean, b: string, } function getValue<K extends "a" | "b">(key: K): Mapping[K] { if (key === "a") { return true; }
「Porffor」は、JavaScript/TypeScriptをWebAssemblyバイナリやネイティブバイナリへとコンパイルする実験的なツールであり、これまでにない2つの特徴を備えています。 1つ目はJavaScript/TypeScriptをコンパイルしてWebAssemblyバイナリやネイティブバイナリを生成しようとしている点です。 これまでもJavaScript/TypeScriptをWebAssemblyに変換するツールは存在していましたが、JavaScriptのコードとWebAssembly版のJavaScriptエンジンを1つにパッケージングするという手段で実現していました。 実行時には、パッケージ内部のJavaScriptコードをWebAssembly版JavaScriptエンジンで実行していたのです。そのため生成されたバイナリの大きさは比較的大きく、また実行速度はあく
はじめに フロントエンド開発において、効率的かつ一貫性のあるモック生成は非常に重要です。本記事では TypeSpec、Orval、Storybook の 3 つのツールを使用して自動生成でモックを実現する方法を紹介します。 TypeSpec は、大規模な API を提供するために Microsoft が開発し、使用している新しい API 記述言語です。 Orval は、OpenAPI 仕様から TypeScript のクライアントコードを生成するツールです。これにより、最新の API 仕様に基づいたクライアントコードを常に保持し、API との通信がスムーズに行えるようになります。 Storybook は、コンポーネントを独立して開発・テストするためのインタラクティブなツールです。コンポーネントの見た目や動作を個別に確認できるため、UI の一貫性を保ちながら効率的に開発を進めることができます
javascripter です。ハローでは、初期メンバーとしてプロダクトのローンチ前からAutoReserve の開発に関わっています。 前回の記事に引き続き、筆者が社内で書いている技術ガイドラインについて紹介します。 はじめに ハローでは、高品質なコードを維持し、開発チームの技術レベル向上を図るため、チーム横断的に、有用な技術Tips、ベストプラクティス・コーディングガイドラインなど情報をNotion上に集約し、自由にエンジニアが閲覧・編集できるようになっています。 この取り組みの目的は以下の通りです： コード品質の向上と統一 開発チームメンバーの技術スキル向上 「どう」直すかでではなく「なぜ」そう修正すべきかまで理解してる人を増やす 効率的な開発プロセスの確立 前回の記事については、こちらを参照下さい。 Reactベストプラクティス: react-hooks/exhaustive-de
TypeScript は本質的に自分に型が付与されていると思っているだけの JavaScript です。 いくら型を付与しようが、それが実行時に影響を与えることはありません。 コードレビューをしているとここを誤解している人が本当に多いです。何度も解説しているのですが、なかなか浸透しないので、TypeScript におけるバリデーションという視点で記事を書くことにしました。 あと TS でバリデータ使って色々作ろうとしている友人と、プログラミング始めたてで zod と openapi を使っいる友人がいたので、彼らが想定読者です。 型と値の名前空間 TypeScript 上での名前空間(スコープ)は2つに分類できます。 値: 実行時にランタイム上のメモリに存在するもの 型: 静的解析時にのみ参照可能なもの。コンパイル時に完全に消滅する。 TypeScript は基本的に JavaScript
切り替えを辞めた Cloudflare から別サービスへの移行をしており Cloudflare Workers を利用しないことに決めた HTTP リクエスト経由での DuckDB 処理をしたいので Node.js だと厳しい sqlc-gen-typescript のメンテナンスが怪しい 今のまま Go を継続することにした。
JavaScriptの非同期処理Promise、AsyncとAwaitの仕組みをGIFアニメで解説した記事を紹介します。 ⭐️🎀 JavaScript Visualized: Promises & Async/Await by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに コールバック地獄 Promiseの構文 イベントループ: Microtasksと(Macro)tasks AsyncとAwait はじめに JavaScriptのコードが期待通りに実行されないことに悩まされたことはないですか？ おそらく、関数が不規則に実行されたり、予測できないタイミングで実行されたり、実行が遅れたりしたことがあるかもしれません。そして、ES6で導入された新機能Promiseが原因かもしれません！ 何年も
Instant start - Create index.html or index.md and you're running. No setup, no configuration, no waiting. Single-page apps - Write semantic HTML with dynamic expressions. Import business logic from pure JavaScript modules. Let your design system handle presentation. Content sites - Front pages, documentation, blogs, marketing pages. Write Nuemark content, add layout modules for structure, trust yo
MDNのWeb APIリストから、便利で、しかし普段のサービス開発ではあまり使われていない可能性のあるAPIを8個選びご紹介します。これらのAPIはあまり知られていないかもしれませんが、特定の状況や要件に対して非常に有効であることがあります。 Beacon API Beacon APIは、非同期でブロッキングしないリクエストをWebサーバーに送信するために使用されます。このリクエストはレスポンスを期待しないため、XMLHttpRequestやFetch APIを使ったリクエストとは異なりページがアンロード(ウェブページがユーザーによって閉じられるか、別のページに移動する際)される前にブラウザがビーコンリクエストを開始し、それを完了させることを保証します。 主な使用例としては、クライアント側のイベントやセッションデータをサーバーに送信するために使用されます。このAPIは、navigator.
こんにちは！ラクス入社１年目のkoki_matsuraです。 本日は、Next.jsとVercel、Supabaseを用いて簡単なアプリを高速で開発する手順についてお話しできればと思います。 アジェンダは以下の通りです。 Next.jsとは ReactとNext.jsの違い Next.jsの特徴 Vercelとは Supabaseとは ToDoアプリ作成 Supabaseにデータベースを用意 VercelでNext.jsプロジェクトを作成・デプロイ・GitHub連携 VercelとSupabaseの連携 GitHubからクローン Vercelから環境変数を取得 Supabaseのデータベースに接続 コード編集 終わりに 参考文献 Next.jsとは Next.jsはReactベースのアプリケーションフレームワークです。 公式サイトではNext.jsとはReactを用いたWebアプリ開発で生
201311 webデザイナとエンジニアのチームワークを加速させるテンプレートエンジンmixer2 devlove現場甲子園
どうも、まさとらん（@0310lan）です！ 今回は、URLだけで多種多様なチャートやグラフを生成できる無料のWebサービスをご紹介します！ 棒グラフ・折れ線グラフ・レーダーチャート・バブルチャート…など、さまざまな種類を生成できるだけでなく、細かいスタイリングやサイズ・レイアウトまでURLに追記するだけで調整可能なのが特徴です。 手っ取り早くデータの可視化をしたい人も含めて、ご興味ある方はぜひ参考にしてみてください！ 【 Image-Charts 】 ■「Image-Charts」の使い方 それでは、「Image-Charts」をどのように使えばいいのか詳しく見ていきましょう！ まず最初に「Image-Charts」を使うためのユーザー登録やAPIキーの設定などは一切不要です（フリープランの場合） 覚えておく必要があるのは次のURLのみです！ https://image-charts.c
この記事では、コーディング作業で迷ったときに確認したいコードスニペットを集めた便利サイトをまとめて紹介しています。 ウェブ開発において、フロントエンドやデベロッパーが悩んでしまう問題の解決方法を知ることができるだけでなく、世界中の優秀なプログラマーの作成したコードを確認、実際に動かしながら学ぶことができます。 ちなみに、2020年に人気だったコードスニペットランキングがこちら。 2020年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表 どう書くんだっけ？ を一発解決！コードスニペットを集めたオススメWebサイトまとめ CoddMyUI Javascript、HTML、CSS、jQueryプラグイン、ウェブ開発にできるデザインスニペット1200個以上が揃ったサイト。ボタンやホバーリンク、テキストアニメーションなど細かくカテゴリ分けされているので、必要なパーツごとのコー
👋Learning to code? Check out ourCoding Fundamentalscourse for beginners!
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
