素の JavaScript でコンポーネントを作成してみて React の気持ちを考えてみる - Qiita
はじめに 素の JavaScript でフロント開発経験がない React 育ちのエンジニアです。 React でフロントエンド開発をしていて大きく困ることはないのですが hooks, JSX, 様々なライブラリを使用していていると JavaScript を理解していたらという場面がちょこちょこ発生します。 そのため最近は JavaScript の基礎的な勉強をしています。 JavaScript の理解を深めることによってスムーズにキャッチアップできたり、裏側でどのように動作しているかなど想像しやすくなるだろうという目論見のもとで。 そこで、素の JavaScript を使用して TODO リストのためのコンポーネントを作成してみました。 JavaScript の Class を理解していることを前提に述べていこうと思います。 TL;DR JavaScript 組み込みの shadowDO
【最新ver対応済】モダンJavaScriptの基礎から始める挫折しないためのReact入門 修了日記 - Qiita
はじめに 以下のudemy講座を本日修了したので、そのメモを投稿しようと思います。 受講した感想 1か月ほど前に触れて挫折していたのですが、もう一度いちからやり直すにしても一日ではボリューミーな内容でした。 この講座では、素のJavaScriptでもReactでもTODOアプリを開発することで、Reactがいかに使いやすかという恩恵を感じられるような体験が用意されています。 おそらく初めて取り組んだ方にとっては、どっちも難しい！と思うのが当たり前のことです。僕もそうでした笑 特に難しかったところ hooks ( useState, useEffectなど )を使った状態管理 コンポーネントに分割する 状態管理とひとくくりにいっても、さまざまな状態があるのでそこが混乱する要因だったのかなと思います。 true と false といったbooleanの状態、TODOの内容を管理する配列の状態な
Reactを学ぶために覚えたいJavascriptの基礎文法 - Qiita
目的 Reactを自己学習しています。その中でReactを学ぶにはjavascriptへの理解が必要であり、最低限の基礎的な文法をまとめました。自分の備忘録でもあり、これも学んだ方がいいというものがあれば、ぜひともコメントをお願いします。 テンプレート文字列 ${変数}のように記述する。javascriptでの変数や式はだいたい{}内に書く const name = "いとと"; const age = "28"; const message2 = `私の名前は${name}です。年齢は${age}です。`; console.log(message2);// 私の名前はいととです。年齢は28歳です。
【JavaScript・初学者】Reactでよく使われる頻出記法 / findについて - Qiita
はじめに Reactを学習していましたが、JavaScriptの記法についてフワッとしている部分がよくあったので、簡単ですが今回はfindについて少し調べました。 findの使い方 配列から条件に一致した最初の値を返すメソッドです。 その為、1つしか値を取得できないことを覚えておきましょう。 const numbers = [1,2,3,4,5] const foundNumber = numbers.find((number) => { return number > 3 }) console.log(foundNumber); //4 const inventory = [ { name: "apples", quantity: 2 }, { name: "bananas", quantity: 0 }, { name: "cherries", quantity: 5 }, ]; fu
【JavaScript・初学者】Reactでよく使われる頻出記法 / mapについて - Qiita
はじめに Reactを学習していましたが、JavaScriptの記法についてフワッとしている部分がよくあったので、簡単ですが今回はmapメソッドについて少し調べました。 mapメソッドの使い方 mapは配列の繰り返しをしてくれる関数です。 mapはオブジェクトには使用できないことを覚えておきましょう。 const data = [1,2,3,4] const result = data.map((num) => { return num + 1; } ) const data = {id:1, number: 2} const result = data.map((num) => { return num + 1; } ) // Uncaught TypeError: data.map is not a function
【JavaScript・初学者】Reactでよく使われる頻出記法 / 分割代入について - Qiita
はじめに Reactを学習していましたが、JavaScriptの記法についてフワッとしている部分がよくあったので、簡単ですが今回は分割代入について少し調べました。 通常の代入について 例えばあるオブジェクトがあったとして、それぞれのプロパティを変数に代入するには、このようにプロパティごとに変数を定義してあげる必要があります。 const student = { id: "1", name: "michael", age: 18 }; const id = student.id; const name = student.name; const age = student.age; console.log(id); console.log(name); console.log(age); const student = { id: "1", name: "michael", age: 18,
【JavaScript・初学者】Reactでよく使われる頻出記法 / 関数について - Qiita
はじめに Reactを学習していましたが、JavaScriptの記法についてフワッとしている部分がよくあったので、簡単ですが今回は関数について少し調べました。 関数の種類
React 基本知識 - Qiita
Reactとは ReactとはMeta社(Facebook社)が開発したJavaScriptのライブラリ．Webサイト上のUIの作成に特化したライブラリ．（フレームワークではないので注意） SPA(Single-Page Application)を実現することができる．SPAとは，ページの移動をせずに最初に読み込んだWebページ上のスクリプトがサーバとの通信や画面遷移を行う方式である． Reactの特徴 Reactの特徴として，Reactの公式サイト(https://ja.legacy.reactjs.org) では次の３つが挙げられている． ・宣言的なView ・コンポーネントベース ・一度学習すれば，どこでも使える 今回はこれらについて詳しくまとめる． Reactの特徴１：宣言的なView 宣言的なViewとは，あらかじめViewの中で変更される部分と変更されない部分を決めて設計すると
【React】って何だ？ - Qiita
はじめに はじめまして！ガク@Necono_Engineerと申します。 プログラミングスクールRUNTEQで、現在RubyとRuby on Railsを中心に学んでいます。この度フロントエンドの技術Reactについて学びましたので、その知識をシェアしたいと思います! ↑ ( アイコンカッコよくて好きです...) 概要 今回、ちょっと勇気を出して新しい分野、Reactに手を出してみることにしました。その大きなきっかけは、ポートフォリオ作成です。僕にとってReactは未知の領域です。RUNTEQでの学びは、RubyとRuby on Railsが中心になります。それでも、現在のウェブ開発のトレンドを見逃すわけにはいかないと思い、ポートフォリオをより引き立てるためには、Reactの知識が必要だと感じました。 この記事では、React初心者がゼロから少しずつ学んだことを共有していきたいと思います。
Reactを始めるためのJavaScriptとES6基礎知識 - Qiita
はじめに 仕事でReactを実装することになり、今更ですがJavaScriptとECMAScript 2015（通常ES6と呼ばれます）の基本的な知識についてまとめようと思います。 この記事では、Reactを始めるために必要なJavaScriptとES6の要点に焦点を当て、それらの概念を一部ですが詳しく説明し、実際のコード例を交えて理解を深めていきます。 let、const、var：変数宣言 まずは基本となる変数宣言を見ていきます。変数を宣言するための主要なキーワードは let、const、および var です。それぞれの特徴と適切な使用法について見ていきましょう。 let
SvelteはなぜReactよりも優れているのか
Svelte は比較的新しいフレームワークです。主に、仮想 DOM の課題が浮き彫りになってきた後で、それを解消しようというモチベーションで開発されています。なぜ Svelte が React や Vue などのように仮想 DOM を採用していにないのかについて、この記事でまとめてみようと思います。 読み書きしやすい：リアクティブなコンポーネントを実装するための"高級言語" 高速：仮想 DOM を利用しない 1. 読み書きしやすい：リアクティブなコンポーネントを実装するための"高級言語[1]" Svelte はリアクティブなコンポーネントを実装するためのコードを記述する上で一般的な UI フレームワークよりも人間が扱いやすい設計になっています。具体的に言うと、記述量が少なく、理解しやすい構文を実現しています。 例えば、React で以下のようなコンポーネントがあった場合を想定します。 im
Reactで再レンダリングを抑えるシンプルな方法
はじめに 「React で再レンダリングを抑えたい...」となった場合、多くの人が React.memo や useMemo、useCallback などのいわゆる 「メモ化」 を思い浮かべることでしょう。 しかし、そういった「メモ化」を用いなくても再レンダリングを抑える方法が実は存在しています。 今回はその代表的な例を２つ紹介していきたいと思います。 よくある例 まず例として、以下のような 「パフォーマンスに問題を抱えたコンポーネント」 を考えてみましょう。 import { useState } from "react"; export default function App() { let [color, setColor] = useState("red"); return ( <div> <input value={color} onChange={(e) => setColo
【React】Next.jsの基本のレンダリング(CSR/SSR/SSG/ISR) - Qiita
この記事は個人学習の備忘録です。 Udemyの講座【2023年最新】React(v18)完全入門ガイド｜Hooks、Next.js、Redux、TypeScript(CodeMafia) 上記を参考・引用しながらNext.jsの基本のレンダリングについて個人的に学んだことのアウトプット記事です。 基本のレンダリング Next.jsでは４種類のレンダリングが行われます。 1. CSR-クライアントサイドレンダリング 2. SSR-サーバーサイドレンダリング 3. SSG-静的サイト生成 4. ISR-インクリメンタル静的再生成 中でも、Next.jsで用いられる基本的なレンダリングは下記の２つです。 SSR-サーバーサイドレンダリング SSG-静的サイト生成 なぜこれらのレンダリングが必要になったかの背景と、その特徴について紹介します。 1.CSR-クライアントサイドレンダリング CSRでは
Reactチュートリアルをやってみて分かったVue.jsとの違い - Qiita
背景 筆者は実務で約1年半Vue.jsの開発をしています。Reactは記事でも見ることが多く、SPAといえばReactが一番に出てくるけれど、Reactを一才触ったことがなかったです（結局リアクティブだからそんな違いはないだろうと思うのもあってあまり触っていなかった）。とはいえ、よく聞くReactを一切触っていないのも怖く、その勉強がてらチュートリアルをやってみました。以下の比較は主に、Vue.js options API と React Hook を比較しています。 筆者はReactについてほとんど知らないです。（クラスコンポーネントと関数コンポーネントの違いを最近知ったくらい） Reactのチュートリアルが新しくなっていました。React hookを前提とした内容になっています。 チュートリアル：三目並べ – React 親コンポーネントのデータ書き換え Vue.jsで親コンポーネント
React コンポーネントの表示する HTML 要素を変える asChild prop を実装する - Qiita
asChild prop とは コンポーネントを使うときに表示される要素を変えたい！ 汎用的なコンポーネントを使用する際、以下のような場合にデザインや挙動は変えずに中でレンダリングされる HTML 要素だけ動的に変えたくなることがあります。 ボタンコンポーネントでリンク（<a> 要素、 Next.js や Gatsby などの Link コンポーネント）を表示したい タイトルを持ったセクションコンポーネントで <main> 要素を表示してセマンティックを変えたい フォームコンポーネントで <search> 要素を表示してセマンティックを変えたい 汎用的なヘッドレスコンポーネント（ロジックや挙動のみのコンポーネント）を実装したい 余談: そもそも見た目は変えずに HTML 要素だけ変えるのってアリ？ コンポーネントの見た目を変えずに表示される HTML 要素を変えると、ユーザの違和感や混乱を
WebRTC と React を組み合わせるなら Flux 設計が有効
この前ポジショントークしたらそれなりに反響があったので書いてみる。 これまでの人生を振り返ると毎年ラジオや電話や配信サービスを作っている気がするし、なんかそういう仕事が回ってくることが多い気がする。 最近自分なりに答えが出たかなと思ったことがあるので言語化してみようと思う。 OGP は Flux ぽい画像だ。 注意・免責事項 ここにあるソースコードは不完全です。これは私が元々手元で実験していたボイラープレートであるとはいえ、いろんな仕事で培ったノウハウ的なものも含まれているので、念には念を入れて意図的に要件が透けそうな箇所は削除しています。 その結果元々のボイラープレートと乖離してしまい、動作しないコードになっています。ただ概念を伝えるには十分なコードになっているはずなので、脳内補完してください。質問は Twitter のメンション、もしくは Issue でのみ受け付けます。 (完全版を書
ブラウザー上でReactやTypeScriptのコードをコンパイルして動かすツールを作った
通常、ReactやTypeScriptを使って開発する場合は、ローカル環境で開発して、ビルドして、ブラウザーで表示するという流れになります。 ただ、昨今のブラウザーの性能はかなり高くなっており、ES Modulesをうまく使うことで、ノーバンドルでReactやTypeScriptをリアルタイムにブラウザー上で反映させることができるのではないかと考えました。 この案をもとに、何番煎じかわかりませんが、ブラウザー上でリアルタイムにReactやTypeScriptをバンドルするライブラリを作成しました。 以下のようにコードを書くだけで、ブラウザーで実行可能なJavaScriptコードが生成されます。 import { browserBundle } from "browser-bundler"; const code = ` import React from "react"; import R
【React】setCount(count + 1)みたいな書き方が良くないよーってお話 - Qiita
import { useState } from 'react' import './App.css' function App() { const [count,setCount] = useState(0) const handleClick = () => { setCount(count + 1) setCount(count + 1) } return ( <> <h1>useState</h1> <button onClick={handleClick}>count is {count}</button> </> ) } export default App 実際に環境構築したい方は下の記事参考に作ってください 上記のコードぱっと見countボタンを押せば count が 2ずつ増えるように思えるかもしれません。 しかし実際の挙動は以下のようになります。 countが1ずつしか
最低限の知識で簡単なWebアプリを作る（生JavaScript vs React&TypeScript、やりたいこと別サンプル集） - Qiita
最低限の知識で簡単なWebアプリを作る（生JavaScript vs React&TypeScript、やりたいこと別サンプル集）JavaScriptTypeScriptWebアプリケーションフロントエンドReact はじめに ユーザーが何の準備も必要なく、PCでもスマホでも動かすことができるWebアプリの魅力に惹かれてJavaScriptを勉強しました。 Web初心者のわたしが最終的にはこんなアプリたちを作ることができました。 完全に独学なので「もっといい方法がある」とか「もっときれいに書ける」とかはあるかもしれませんが、これらを実装した経験を通して、必要だった最低限な知識をまとめようと思います。 サーバーとのやりとりは一切しない（したい方はすればよい）ので、定義によっては「Webアプリ」とは言わないかもしれませんが、ここでは便宜上そう呼ぶことにします。（あとがきも参照） 対象読者 We
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
あなたがまだ知らないReactのテクニック10選 - Qiita
