Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
ウェブアプリを開発するとき、できるだけ操作は直感的に行えるようにしたいものですが、ドラッグ&ドロップという操作をブラウザ内で行えるように実装するのはなかなか面倒です。「gridstack.js」はそうした面倒な実装を代わりにやってくれるライブラリで、まさに一瞬と言えるほどの手軽さでドラッグ&ドロップ操作可能なカードを実装できるとのことなので、実際に使って試してみました。 gridstack.js | Build interactive dashboards in minutes. https://gridstackjs.com/ gridstack/gridstack.js: Build interactive dashboards in minutes. https://github.com/gridstack/gridstack.js gridstack.jpのサイトに行くとデモが用意
exe形式の実行ファイルをturbowarpを使って作ってみた。(初記事) どうもこんにちは、最近あだ名メーカー使ったら「国士無双のカリスマ店員」て出てきた人です。 今回は、最近ターボワープを使ってプロジェクトをexe化していた時に気付いたことを実験し、記事にしました。 さて、本編へ行きたいと思います。 ちなみに今回は、html&javascriptで作ったアプリケーションをexe化していきます。 方法 1,ターボワープを開きeditorを起動します。 2,最初からあるスプライトを消してから、パッケージ化を選択します 3,パッケージ化画面に来たら、アプリの名前を入力します 4,「大きな緑の旗を表示せずに自動でプロジェクトを始める」のチェックボックスにチェックを押します 5,「Electron Windowsのアプリケーション(32bitまたは64bit)」にチェックをいれて、パッケージ化を
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 ← カウタムフッ
目的 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』とは何ぞや?」とか、そういったことをいろいろ話していき、最後に軽くまとめをしていければなと思っています。 では、軽く自己紹介を。初めまして、佐々木祥晶
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く