Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

JSer.info #641 - Vite 4.3がリリースされました。 Vite 4.3 is out! | Vite Vite 4.3では主にパフォーマンスの改善が含まれています。 起動速度を40%から80%程度改善、HMRの処理時間を20%から40%程度改善されています。 これらをどうやって改善したのかについては、次の記事で解説されています。 How we made Vite 4.3 faaaaster 🚀 | sun0day's blog - lost in code Deno 1.33がリリースされました。 Deno 1.33: Deno 2 is coming Deno 2に向けた変更が含まれています。 unstable APIとしてDeno KVを追加、deno.jsonの形式変更が含まれています。 新しい設定形式はよりネストが少なくなるようになっています。古い設定形式はD
1. TypeScriptの魅力と基本概念 この記事では、TypeScriptの基本概念や使い方について解説します。TypeScriptはJavaScriptのスーパーセットであり、型情報を追加することでより安全なコードを実現します。JavaScriptは動的型付け言語であるため、開発者が簡単にコードを書ける反面、実行時に型に関連したエラーが発生しやすいという問題があります。TypeScriptは、静的型付けを導入することでこの問題を解決し、より堅牢で保守性の高いコードを書くことができます。 TypeScriptが登場する前のJavaScript開発では、大規模なプロジェクトでコードの管理が難しく、予期しないバグが発生するリスクが高まっていました。TypeScriptは、型システムを導入することでコードの構造を明確にし、開発者が意図しない挙動を未然に防ぐことができます。また、型情報があるこ
src |-apis ← モックサーバーと通信するファイルを格納するディレクトリ | |-todos.js ← サーバーとの通信用のファイル(CRUD) |-components ← コンポーネントを格納するディレクトリ | |-App.js ← コンポーネントをまとめるファイル | |-TodoAdd.js ← TODOを新規追加するコンポーネント | |-TodoAddCheckItem.js ← チェックリスト単体用のコンポーネント | |-TodoAddCheckList.js ← チェックリストをまとめるコンポーネント | |-TodoItem.js ← TODO単体用のコンポーネント | |-TodoList.js ← TODOをリスト化するコンポーネント | |-TodoTitle.js ← タイトル用のコンポーネント |-hooks ← カウタムフッ
[Cloudflare Pages+Next.js] AWS SDK for JavaScript v3を使ってDynamoDBからデータ取得して表示してみる どうも!オペレーション部の西村祐二です。 最近、Cloudflare、Next.jsをさわっています。 Next.jsをCloudflare Pagesでホスティングして、DynamoDBからデータを取得するところまでいろいろハマりながら手順がわかったので、備忘録兼ねてまとめておきます。 DynamoDBからデータを取得する処理はNext.jsのAPI Routesを使ってAPIを実装し、Edgeランタイムの設定を行い、CloudflareのEdge側で動作させる方針です。 https://nextjs.org/docs/api-routes/introduction 前提条件 AWS側の初期設定やwranglerの初期設定は完了し
目的 AWS SDK for JavaScript v3 で、 共有認証情報ファイル(~/.aws/credentials)と共有設定ファイル(~/.aws/config)から認証情報を取得する @aws-sdk/credential-providersのfromIniを使用して、 MFA 設定あり profile のクレデンシャル取得 取得したクレデンシャルを使用してサービスクライアント実行 実装 import * as readline from "readline"; import { GetCallerIdentityCommand, STSClient } from "@aws-sdk/client-sts"; import { fromIni } from "@aws-sdk/credential-providers"; import { program } from "com
import { useEffect, useState } from 'react'; const useGoogleAuth = () => { const [isSignedIn, setIsSignedIn] = useState(null); const [authInstance, setAuthInstance] = useState(null); const [tokenId, setTokenId] = useState(null); useEffect(() => { const initAuth = async () => { const gapi = window.gapi; await gapi.load('auth2', async () => { const auth2 = await gapi.auth2.init({ client_id: 'YOUR_CL
Cloudflare WorkersがNode.js API互換の提供を発表。Bun、Denoなどに続く対応により、Node.js APIはサーバサイドJavaScriptの事実上の標準になるか Cloudflareは、エッジでJavaScriptを実行できるサービス「Cloudflare Workers」において、Node.jsのAPI互換機能を提供すると発表しました。 node.js APIs have officially landed in Cloudflare Workers — no polyfills required. We've added AsyncLocalstorage, EventEmitter, Buffer, assert and util, with more on the way soon.https://t.co/8CkPZkS3Yb — Cloudfl
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 注)「ChatGPTを使う上での注意すべきこと」を追加しました(2023/04/10) この記事の対象者 html,jsを勉強中、またこれから始める方 Reactに興味があるから、簡単なものから学習したい方 Reactを勉強したいけど、どうやって学習していけば良いか困っている方 プログラム学習にChatGPTを取り入れてみたいという方 ヌギーの自己紹介 どうも、ヌギーです! 自分はUdemyの講座やYoutube動画を中心に勉強していたんですが、まずは、Reactを始めたいという方が無料の範囲で進められるような参考サイト、Yo
JSer.info #638 - Rome v12がリリースされました。 Announcing Rome v12 JSONのサポート、TypeScript 5.0のサポート、フラグ付きでImportのソートに対応にしています。 また、エラー表示の改善や--config-pathフラグの追加なども行われています。 ECMAScript 2023のリリース候補版(Candidate)が公開されました。 Release ES2023 Candidate April 2023 · tc39/ecma262 6月に行われるEcma GA(総会)で承認を得ると正式にES2023としてリリースされます。 リリースされたかは次のニュースページに掲載されます。 News - Ecma International また、ECMAScriptはLiving Standardなので、現在のmainブランチはES2
TypeScriptの型情報を使って、サポート対象のブラウザが実装してないメソッドの利用をエラーにするESLintルール eslint-plugin-typescript-compatはTypeScriptプロジェクト向けのESLintルールです。 このESLintではサポートしているブラウザが、実装していないメソッドを検知してLintエラーにしてくれます。 JavaScriptではメソッドの静的解析は難しい(メソッド名が同じでも独自実装の可能性があるため)ですが、TypeScriptの型情報を使って静的解析をしています。 サポートしている機能 [ ] JavaScriptのビルトインオブジェクト [x] プロトタイプメソッド Array.prototype.find [x] 静的メソッド Array.from [ ] オブジェクト Promise [ ] DOM API 基本的にメソッド
概要 本記事では、JavaScript モジュールバンドラの一種である、 Rspack について、公式ドキュメントからわかることを要約し、自分なりの所感を付け加えて紹介します。 https://www.rspack.dev/misc/branding.html ※ 本記事は、Webpack に関する最低限の知識を前提としています。 ※ 本記事は、2023/03/12 時点の情報であり、古い内容が残っている場合があります TL;DR; Rspack は Webpack との互換性とパフォーマンスを両立したモジュールバンドラ Webpack より5~10倍高速 Webpack と設定ファイルや loader, plugin に充分な互換性を持つ Webpack の一般的な設定パターンがビルトインで用意されており、シンプルに使える 現在はアーリーステージで、Vue.js のサポートもこれからとい
前提 ES2015の全機能ではありません。 Reactを学ぶために知っておくべきWeb開発の知識とES2015の一部機能をできるだけわかりやすくまとめました。 (個人的見解も多くあるのでご留意ください) Web開発知識 利用するWeb開発ツールのまとめ パッケージマネージャー パッケージをインストールする際に開発者がそれぞれのPCに自由にインストールしてしまうとバージョンがバラバラになるのを防ぐ Aさん、Bさんが自由に開発環境を構築すると、Aさんは使えるつもりでも本番環境やBさんは使えない機能がでてくるのを防ぐ package.jsonなどを利用することで同じ環境を容易に再現することができる モジューラバンドラー 開発はファイルを分けて効率的に作業し、本番用にビルドするときに1つのファイルにまとめてくれる ファイルが減ることによって、読み込み回数が減ってパフォーマンスアップしてくれる 現在
エンジニア同士の情報共有を目的としたコミュニティ「ふわふわエンジニアタイム」が主催する「Markup Meetup」。3回目の今回は、フロントエンドエンジニア、マークアップエンジニア、コーダー、デザイナーの垣根なく、HTML / CSS / JavaScript に関わるナレッジを共有する場として開催されました。ここで登壇したのは、株式会社ゆめみの佐々木祥晶氏。導入事例を交えながら「Three.js」の魅力、メリット・デメリットを語りました。 株式会社ゆめみ所属・新人フロントエンドエンジニア 佐々木祥晶氏:それでは発表いたします。題目は、「Three.js の魅力を語る」です。 目次ですね。最初に軽く自己紹介をして、本編で「『Three.js』とは何ぞや?」とか、そういったことをいろいろ話していき、最後に軽くまとめをしていければなと思っています。 では、軽く自己紹介を。初めまして、佐々木祥
ChatGPT Plus に 1ヶ月だけ課金したので(?)Node.js・JavaScript のプログラムを少し書いてもらったJavaScriptNode.jsOpenAIChatGPTChatGPTPlus はじめに ChatGPT Plus に課金して、Node.js・JavaScript のプログラム関連で使ってみた話です。課金して応答速度が変わったりするかな、とか、そのあたりが気になったのもありつつ。 課金後は、以下のツイートにあるように PLUS という表示が画面上に。 以前書いた記事 ちなみに、ChatGPT に関する話は、Qiita で以下のような内容のものを書いたことがあります(1つ目の記事は、リリースされた翌日に書いてたり)。 AI にブラウザ用の JavaScript のプログラムをいくつか作ってもらった話 ⇒ OpenAI の ChatGPT で生成されたプログラム
2月21日にリリースされたNode.jsの最新バージョン「Node.js 19.7.0」で、Node.jsとJavaScriptアプリケーションを単一の実行ファイルにパッケージングする新機能「Single Executable Applications」が実験的機能として搭載されました。 一般にNode.jsのアプリケーションをデプロイするには、Node.jsのインストールや環境設定をするところから始めなければなりません。 今回新しく実験的に搭載されたSingle Executable Applications機能を使うと、そのまま実行可能な単一の実行ファイルを作ることができるため、それを配置するだけで簡単にデプロイができるようになる見通しです。 Single Executable Applicationsでは、postjectと呼ばれる新しいコマンドが用意されます。これを用いてNode.
はじめに 今回は、TypeScriptによるJWTトークンの複合処理と、復号したトークンでユーザーを取得する方法について、久方ぶりに手こずったので、備忘録として残します。 Userモデル まず、前提としてユーザーのデータは以下のようになっています。 import mongoose from "mongoose"; // userModel作成 const userSchema = new mongoose.Schema({ username: { type: String, required: true, unique: true, }, password: { type: String, required: true, }, }); module.exports = mongoose.model("User", userSchema); ライブラリはmongooseを使用しています。 ま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く