【React18対応】モダンJavaScriptの基礎から始める挫折しないためのReact入門
これからReactを勉強する全ての人におくるReact入門コース決定版！ Reactの勉強に苦戦する多くの人と話してきました。 そこで感じたのは苦戦する多くの人は学習の順序を間違えているということです。 JavaScriptへの理解なくしてReactの習得はなし得ません。 そこでJavaScript→Reactの理解の架け橋となる本コースを作成しました。 ■2023年11月 フルリニューアルしました！ ありがたいことにコース公開から3年で24000人もの方に受講いただきました。 3年でReactのバージョン等大きく変わりましたし、皆さんからのレビュー内容を反映したい気持ちもあり、全て再収録・再編集し直しました！ ↓リニューアル内容例 React v18への対応 昨今の状況を加味した解説等の追加 一部新規レクチャー 誤っていた箇所の修正 レビューいただいた内容の反映（音質改善や完成版コードの
JavaScript で then を使うのは避けよう（await / async の初級者まとめ）
JavaScript において、特に苦手とする人が多い印象のある Promise ですが、await と async の文法が導入されたことで、Promise の仕様を深く理解しなくても非同期処理を自然に書けるようになってきたのではないかと思います。 極論ですが、JavaScript の非同期処理は async await new Promise のみで、（ほぼ）全て表現可能です。特別な理由がない限り then を使わないようにしましょう、ということを周知するのがこの記事の目的です。 なお本記事では Promise の rejected の状態についてほとんど解説しておりません。基本を理解したら、別記事でぜひ学んでみてください。 Promise とは？ Promise は、少し乱暴に説明すると「実行が終わっていないかもしれない何らかの関数」を包んだオブジェクトです。 普通の関数とは違って、
Node.js の進化に伴い不要となったかもしれないパッケージたち
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 が挙げられていますが、この記事では「これら
"レガシー"と言われないためのJavaScript再入門
追記: 10/11 ハテブでバズっているようで、色々指摘があったので追記 getElement*は動作が早いのでIDやクラス名が自明の場合はgetElement*を使う方がいいと言う意見もあり、また、ページの表示で大量に呼び出されるわけではないからボトルネックにはならないと言う意見もある。 getElement*で返されるオブジェクトは動的な変化に対応しており、querySelector*は動的な変化に対応していないため、場合によってはgetElement*を使うといい。このサイトで遊んでみよう。 https://ja.javascript.info/searching-elements-dom#ref-263 for await ... ofは非推奨なので Promise.allを現代的な書き方にした 顧客先のブラウザが古い場合も考慮して、あえてレガシーな書き方もする場合があるらしい。現
ふりがな自動入力の検証
始めに UXの向上のため名前を入力した際にふりがなを自動で入力したいことがあると思います。調べた感じ以下の2つのライブラリが有名っぽい気がしたのでそれぞれについて検証してみました。 https://www.npmjs.com/package/vanilla-autokana https://www.npmjs.com/package/historykana サンプルはcodesandboxで書きましたので、動作を確認したい方は触ってみてください。 各ライブラリの使い方 vanilla-autokana こちらはjqueryのプラグインにあるautokanaをインスパイアして作られたもののようです。DOM要素を指定するだけで後は自動で変換されるので楽ですね。 import * as AutoKana from 'vanilla-autokana'; AutoKana.bind('#name'
Null 合体演算子 (??) - JavaScript | MDN
JavaScriptチュートリアルBeginner's tutorialsYour first website: Adding interactivityDynamic scripting with JavaScriptJavaScript frameworks and librariesJavaScript ガイド入門編文法とデータ型制御フローとエラー処理ループとイテレーター関数式と演算子Numbers and stringsRepresenting dates & times正規表現インデックス付きコレクションキー付きコレクションオブジェクトを利用するクラスの使用プロミスの使用JavaScript 型付き配列イテレーターとジェネレーターInternationalizationメタプログラミングJavaScript モジュール中級編Advanced JavaScript objectsA
式と演算子 - JavaScript | MDN
JavaScript での基本的なキーワードと一般的な式です。これらの式は最も高い優先順位を持ちます（演算子よりも高い）。 this this キーワードは関数の実行コンテキストを示す特別なプロパティです。 リテラル 基本的な null、論理値、数値、文字列のリテラルです。 [] 配列初期化子またはリテラル構文です。 {} オブジェクト初期化子またはリテラル構文です。 function function キーワードは関数式を定義します。 class class キーワードはクラス式を定義します。 function* function* キーワードはジェネレーター関数式を定義します。 async function async function は非同期関数式を定義します。 async function* async function* キーワードは非同期ジェネレーター関数式を定義します。 /
Destructuring - JavaScript | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since August 2016. Learn moreSee full compatibilityReport feedback The destructuring syntax is a JavaScript syntax that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. It can be used in locations that receive data (such as the
JavaScript Primer - 迷わないための入門書 #jsprimer
JavaScript Primer 迷わないための入門書 Tweet Watch Star Twitterのハッシュタグ: #jsprimer これからJavaScriptを学びたい人が、ECMAScript 2015以降をベースにして一からJavaScriptを学べる書籍です。 プログラミングをやったことがあるが、今のJavaScriptがよくわからないという人が、 今のJavaScriptアプリケーションを読み書きできるように書かれています。 初めてのプログラミング言語としてJavaScriptを学ぶ人は、まずは「はじめに」から読んでみてください。 書籍版 このウェブサイトの内容はアスキードワンゴから書籍として出版されています。 書籍版の内容はウェブサイト版と同一ですが、本として読めるように最適化されています。 書籍版は次のサイトから購入できます。 Amazon 達人出版会（電子書籍版
Plotly
plotly.js abstracts the types of statistical and scientific charts that you would find in packages like matplotlib, ggplot2, or MATLAB. d3.json('https://plotly.com/~DanielCarrera/13.json', function(figure){ var trace = { x: figure.data[0].x, y: figure.data[0].y, z: figure.data[0].z, type: 'contour', autocolorscale: false, colorscale: [[0,"rgb( 0, 0, 0)"],[0.3,"rgb(230, 0, 0)"],[0.6,"rgb(255,210, 0
JavaScriptでsetTimeoutを使う方法【初心者向け】現役エンジニアが解説
プログラミング初心者向けに、JavaScriptで【setTimeout】を使う方法を解説した記事です。setTimeoutは、繰り返さずに一度だけ、一定時間後に特定の処理を行うことができます。clearTimeoutも合わせて紹介。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 JavaScriptをプログラミング初心者向けに紹介した記事です。 今回は、JavaScriptでsetTimeoutを使う方法について解説します。 本記事では
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - cookpete/react-player: A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion
GitHub - sampotts/plyr: A simple HTML5, YouTube and Vimeo player
Should one use for-of or forEach when iterating through an array?
cross-fetch
GitHub - google/zx: A tool for writing better scripts
Mock Service Worker で jest.mock を使わず非同期リクエストのテストを書く
Josh W. Comeau 🎃 on Twitter: "🎉 Announcing “Operator Lookup”, a search engine for JS operators 🥳 Why? Because they're *ungoogleable*: search en… https://t.co/PoDxOcB5xB"
GitHub - Wruczek/Bootstrap-Cookie-Alert: A simple, good looking cookie alert built for Bootstrap 3/4. No dependencies required.
Cookie Consent Notice Plugin For Bootstrap 5/4 - cookieAlert.js