React スプレッド構文をなぜ使うのか モダンなJavaScriptを書いていくうえで欠かせない知識 - Qiita
スプレッド構文をなぜ使うのか 理解のためにはまず破壊的メソッドと非破壊的メソッドを知る必要がある。 破壊的メソッドを見ていく popやpushのような破壊的なメソッドを使うことは最近のJavaScriptではNGとなっている。 破壊的メソッドを避けるためにスプレッド構文が使われると覚えておく。 一般的な破壊的メソッド Array.prototype.push(): 配列の末尾に要素を追加します。 Array.prototype.pop(): 配列の末尾から要素を削除します。 Array.prototype.shift(): 配列の先頭から要素を削除して、残りの要素を前に詰めます。 Array.prototype.unshift(): 配列の先頭に要素を追加し、他の要素を後ろにずらします。 Array.prototype.sort(): 配列の要素をソートします。デフォルトでは破壊的なソート
2023-08-03のJS: Riot.js v9.0.0、Firefox 116、React Server Componentsへの移行
JSer.info #654 - Riot.js v9.0.0がリリースされました。 Release Evergreen · riot/riot このリリースでは、Riot.jsとcompilerなどのバージョンを合わせるため、v8はスキップしてv9.0.0としてリリースされています。 Node.js 14/16のサポート終了、BabelでのTranspileをしないように変更、boolean属性の挙動変更などが含まれています。 Firefox 116がリリースされました。 Firefox 116.0, See All New Features, Updates and Fixes Firefox 116 for developers - Mozilla | MDN HTTP/2のアップロードパフォーマンスの改善、CSP3 external hashesをサポート。 FetchのgetRe
ReactとJavaScript: Reactと他のJavaScriptフレームワークの比較 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? React JavaScriptの利点と他のJavaScriptフレームワークとの優位性を探ってみましょう。以下の記事では、Reactを他のフレームワークと比較し、それぞれの技術の利点やメリットを理解することができます。信頼性と効率性を持つウェブアプリケーションを構築するための最適な選択肢を見つけるために、ぜひ読み進めてください。 Reactと他のJavaScriptフレームワークの比較 Cre: twire React JavaScript - Facebookの強力なJavaScriptライブラリ Reactは、ウェブ開発の分野でト
React 18で使える新たなCSSユーティリティ「CSS Components」が公開 ー React 18以降主流になりつつあるサーバーコンポーネントに対応、CSS-in-JSのDX課題を解決
8月1日、React向けの組み合わせ可能なCSSコンポーネントの作成について発表がありました。 React 18のリリースにより、サーバーコンポーネントが一般的になり、Reactアプリを作成するためのデフォルトの方法になりました。 [LogRocketのブログ](https://blog.logrocket.com/writing-composable-css-components-react/)で、ReactとCSSを組み合わせるための新たな選択肢 「CSS Components」に関する解説記事が公開されています。 本稿では、日本のエンジニア向けに記事を要約して紹介します。詳しくは原文を参照してください。 CSS Componentsは、ReactコンポーネントにCSSクラスの組み合わせを行うための小型（2.3Kb）なモダンユーティリティです。このユーティリティは、開発者エクスペリエン
Error: Unable to resolve module ./Libraries/Components/DatePicker/DatePickerIOS from ~node_modules/react-native/index.js: - Qiita
Error: Unable to resolve module ./Libraries/Components/DatePicker/DatePickerIOS from ~node_modules/react-native/index.js: XcodeiOSreactnative Xcode 14.1にダウングレードして Unable to resolve module ./Libraries/Components/DatePicker/DatePickerIOS エラーを解決する エラーに直面することは開発者の日常生活の一部ですが、この記事では特に混乱を招く可能性のある一つ、Unable to resolve module ./Libraries/Components/DatePicker/DatePickerIOS エラーについて説明します。これはReact Nativeを使用してア
React公式ドキュメント(英語)を隅から隅までやる冒険 1-1 [JSを実行できない] - Qiita
1-1 [JSを実行できない] 記事範囲 ドキュメント 最初の1ページの1/10くらい 対象読者 Reactという単語は聞いたことがあるが全く触った事がない方 フロントエンド・バックエンドの言語をprogateレベルでちょっと触った事があり、少し手を広げたい人 公式ドキュメントを読んでみたい方 駆け出しエンジニアの雛の辿々しい歩みを眺めて和みたい方 経緯 先日 Twitter経由で認知を頂き、 OGOBの元でインターンシップの機会をいただけるかもしれないチャンスを頂いています。 弱小勉強用アカウントでこんな事が起き、 本当に種はまいておくものですね。 Reactを使い開発を行なっており、 基本的な技術を身につけるといいとのことで 公式ドキュメントを通読することにいたしました。 ただどんなプレッシャーもかけられておりませんので、 この勉強にお金はいただいておりません。 （、、 受けたい試験や
![React公式ドキュメント(英語)を隅から隅までやる冒険 1-1 [JSを実行できない] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/e233f40c2e15243b9432bf86abf43d3252648435/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9UmVhY3QlRTUlODUlQUMlRTUlQkMlOEYlRTMlODMlODklRTMlODIlQUQlRTMlODMlQTUlRTMlODMlQTElRTMlODMlQjMlRTMlODMlODglMjglRTglOEIlQjElRTglQUElOUUlMjklRTMlODIlOTIlRTklOUElODUlRTMlODElOEIlRTMlODIlODklRTklOUElODUlRTMlODElQkUlRTMlODElQTclRTMlODIlODQlRTMlODIlOEIlRTUlODYlOTIlRTklOTklQkElMjAxLTElMjAlNUJKUyVFMyU4MiU5MiVFNSVBRSU5RiVFOCVBMSU4QyVFMyU4MSVBNyVFMyU4MSU4RCVFMyU4MSVBQSVFMyU4MSU4NCU1RCZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9MTFhYWU4OTNhYjI1ODFhNjI4NTI5YWUyMGYwZWNjZDQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBtYXJ1bmlzaDMzJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0xNWIzMTUwYjY0YWI3YWQyYThhYWUxYjMwNThhMTAzZg%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D00739897120af3e0de15d4be82997c12)
Reactを学ぶためNext jsを導入する - Qiita
目的：Reactを学ぶため、Next jsをセットアップする 理由：プロジェクト「study-react」をGitHubにpushするため 準備：Node.js推奨版のダウンロード（同時にnpmもダウンロードされる） gitのダウンロード typescriptのダウンロード 流れ: ターミナルを開き「yarn create next-app --typescript」と入力 プロジェクト名を聞かれるので好きな名前を入力(study-reactと入力) その後「cdコマンド」で「C/user/名前/study-react」にディクトリを移動する 「yarn dev」をする VsCodeで「study-react」を開く 「yarn build」して「yarn start」する ターミナルで 「git init」 (初期化して「study-react」内のフォルダなどがgit管理下になる） 「
Reactを使ってTODOアプリを作成する JavaScriptのみ - Qiita
src |-apis ← モックサーバーと通信するファイルを格納するディレクトリ | |-todos.js ← サーバーとの通信用のファイル（CRUD） |-components ← コンポーネントを格納するディレクトリ | |-App.js ← コンポーネントをまとめるファイル | |-TodoAdd.js ← TODOを新規追加するコンポーネント | |-TodoAddCheckItem.js ← チェックリスト単体用のコンポーネント | |-TodoAddCheckList.js ← チェックリストをまとめるコンポーネント | |-TodoItem.js ← TODO単体用のコンポーネント | |-TodoList.js ← TODOをリスト化するコンポーネント | |-TodoTitle.js ← タイトル用のコンポーネント |-hooks ← カウタムフッ
React(Javascript & Typescript)でgoogleアカウント認証を行うカスタムhookを作成する - Qiita
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
初心者がjs基礎からReact(最新v18.0 対応)でTodoアプリを作成するまでのロードマップ（ChatGPTの活用法も掲載） - Qiita
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
Reactを開発するために知っておくべきES2015(ES6)超入門 - Qiita
前提 ES2015の全機能ではありません。 Reactを学ぶために知っておくべきWeb開発の知識とES2015の一部機能をできるだけわかりやすくまとめました。 (個人的見解も多くあるのでご留意ください) Web開発知識 利用するWeb開発ツールのまとめ パッケージマネージャー パッケージをインストールする際に開発者がそれぞれのPCに自由にインストールしてしまうとバージョンがバラバラになるのを防ぐ Aさん、Bさんが自由に開発環境を構築すると、Aさんは使えるつもりでも本番環境やBさんは使えない機能がでてくるのを防ぐ package.jsonなどを利用することで同じ環境を容易に再現することができる モジューラバンドラー 開発はファイルを分けて効率的に作業し、本番用にビルドするときに1つのファイルにまとめてくれる ファイルが減ることによって、読み込み回数が減ってパフォーマンスアップしてくれる 現在
Electron + TypeScript + React + Webpackのプロジェクト作成から基本操作まで - Qiita
前書き 会社でデスクトップアプリを作っているんですが、Webのほうが開発速度が速くてネットにも割と情報がたくさん落ちているので、どうにかWebでデスクトップアプリ作れないかなーということで探していたところ、Electronにたどり着きました。Tauriもいいなーと思ってんですが、Windows10向けのアプリが多いためできればWebView2に依存したくないなということで、今回はElectronやっていきます。UIは今もうほぼ一強のReact.js、バンドルはViteとかが流行りですが正直まだプロダクトに使うには厳しいかなということで安定のWebpackです。 この記事では、環境構築、IPC通信でコンソールに文字を表示、コマンドの実行、ファイルアクセス、通知、そしてexeの作成までやっていきたいと思います。 盛りだくさんなので長くなりますが、これを見ればとりあえず基本的なことはできるように
Vercel、JavaScriptフレームワーク「Next.js 13.1」公開
「Next.js 13.1」ではまず、「app」ディレクトリを改良した。「app」ディレクトリはNext.js 13でベータ版として追加した機能で、これを利用するとページ・レイアウトの自由度が上がり、テスト・ファイルやスタイル・シートなどをまとめて管理できる。ちなみに、今回の新バージョンでも「app」ディレクトリはベータ版のままだ。 今回は「app」ディレクトリで使用するTypeScriptプラグインを追加した。Visual Studio Codeなどの開発環境に追加して利用できる。プラグインを使用することで、ページ・レイアウトの選択肢などについてのヒントを開発環境に表示できるようになった。さらに、「app」ディレクトリ関連の動作をより安定させた。 そして、エンドユーザーに近い場所にある「エッジ」サーバーでNext.jsプログラムを処理させる「Edge Runtime」で、API Rout
2022-12-28のJS: Next.js 13.1、HTTP/3 Prioritizationの仕組み、Deno 1.29、Bun 0.4
JSer.info #624 - Next.js 13.1がリリースされました。 Blog - Next.js 13.1 | Next.js appディレクトリの改善、外部ライブラリだったnext-transpile-modulesを本体に統合されています。 martpie/next-transpile-modules: [ARCHIVED] Next.js plugin to transpile code from node_modules Release The End. · martpie/next-transpile-modules また、試験的にmodularizeImportsオプションの追加、Turbopackの改善などが含まれています。 Web Performance Calendar » HTTP/3 Prioritization Demystifiedという記事では、H
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新しいReactドキュメンテーション、SPA（Single-page application）の利用を中止 ー SPAに代わるアーキテクチャの採用を加速
Reactパフォーマンスを最大70%向上させる!? Million.js入門 - Qiita
Auth.jsを完全に理解する (Next.js App Router 実装編) #2 - Qiita
[Cloudflare Pages+Next.js] AWS SDK for JavaScript v3を使ってDynamoDBからデータ取得して表示してみる | DevelopersIO![[Cloudflare Pages+Next.js] AWS SDK for JavaScript v3を使ってDynamoDBからデータ取得して表示してみる | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/1c4e9e28c189ba0da5e90990edaca836faea81b5/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2020%2F06%2Fcloudflare-1200x630-1.jpg)
How to Improve React.Js Website Performance
React.js： JSXファイルのトランスパイル後のJavaScriptコードを確認する方法 - Qiita
