Reactを学ぶ上で知っておくべきJavaScriptの基本概念 - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
フロント学習の最高の教材集 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 今回はフロント学習で重宝できる教材をまとめました。 軽く自己紹介として、自分は新卒でフロントエンジニアとして入社し2022年で2年目になります。 実際に実務を通す中で「この教材のおかげで実装がスムーズにできた」「この教材をやってたおかげで理解ができた」といったような場面が2年の間で多々ありました。 今回紹介する教材は自分自身が実際に使ってよかったものかつ、そのほとんどが無料で学べるor低価格の教材になっています。 「フロントエンドを網羅的に学べかつ実務の基礎作り」という目的で教材を紹介します。 この記事の主な対象者 フロントエ
Pythonバックエンドエンジニアが1ヶ月でフロントエンドを学んだ話
この記事について Pythonバックエンドエンジニアが1ヶ月でフロントエンドを学んだ話を共有する。 どういう勉強をしたかのラーニングパスを某所で話したら興味があるというコメントがあったので、自分の振り返りも兼ねて共有することにした。 TL;DR 学習期間は1ヶ月、30時間程度 TypeScript → Next.js → MDNでHTML+CSS → TailwindCSS の順に勉強した JavaScript、React.jsはほぼすっ飛ばした(というより上記ラーニングパスの中で派生して習得した) できるようになったこと: 簡単な処理であればテストつきでTypeScriptのコードが書けるようになり、UIの基本的な設計ができるようになった DISCLAIMER 筆者の経験を記したものであり、ベストプラクティスではありません。 筆者の開発スキルセット（勉強前時点） バックエンドが得意領域
React を深く知るための入り口
Reactに対する見方をアップデートする 国内外の優れた開発者の方による React の各論の記事は枚挙にいとまがありません。しかし、React の入門を一通り終えた方に向けの浅く広い総論はあまり見かけません。 React の公式ドキュメントのトップページに掲載されている短い3つの文章があります。この React の本質を表現した文章を掘り下げることが、初学者のステップアップにつながるのではないかと考え、各章に対して注釈を加えました。 React について少し深く知ることで、さらに React を好きになったという方を一人でも多く増やしたい。その思いから本記事を執筆しました。 本記事は React の考え方を知ることで、React に対する見方をアップデートすることを目的としています。 Reactとは何か。それはUIを構築するためのJSライブラリである React公式ドキュメントの一文 R
【React+Next.js】Netflixのクローンを作るチュートリアル
このチュートリアルではNetflixクローンを作る過程で、Next.js 15とReact 19を使ったモダンなWebアプリケーション開発について学んでいきます。 最新のReactとNext.jsの機能を実践的に学びながら、実際に動くWebアプリケーションを作成していきましょう。 【学べる事】 - Next.js 15のApp Routerを使った開発 - React 19の新機能（Server Components、Async Components、Suspense） - Intercepting Routesを使ったモーダル表示機能の実装 - ストリーミングSSRによるUX向上 - Server Actionsを使ったデータ処理 - TypeScriptを使った型安全な開発 - Tailwind CSS v4を使ったスタイリング - TMDB APIとの連携方法 - Vercelを使っ
JavaScript ベスト・オブ・ザ・イヤー 2020 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 2021 / 2020 / 2019 JavaScriptライブラリのトレンドを紹介しているbestofjs.orgが、2020年に最もホットであったJavaScriptライブラリのランキングを発表しました。 選考基準は現在のスター数ではなく、『2020年の一年間で増えたスターの数』です。 過去流行っていたけど落ち目となった技術は出てこないので、最近注目されている技術がわかります。 ちなみに2016年の総合ランキング1位はVue.js、2017年の総合ランキング1位はVue.js、2018年の総合ランキング1位はVue.js、2019年
チュートリアル：React の導入 – React
この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 新しくなったチュートリアルでは最新の React の使い方がライブサンプル付きで学べます。 このチュートリアルは React の事前知識ゼロでも読み進められます。 チュートリアルを始める前に このチュートリアルでは小さなゲームを作成します。自分はゲームを作りたいのではないから、と飛ばしたくなるかもしれませんが、是非目を通してみてください。このチュートリアルで学ぶ技法はどのような React のアプリにおいても基本的なものであり、マスターすることで React への深い理解が得られます。 ヒント このチュートリアルは実際に手を動かして学びたい人向けに構成されています。コンセプトを順番に学んでいきたい人は一段階ずつ学べるガイドを参照してください。このチュート
フロントエンド（React Testing Library）で TDD（テスト駆動開発）をする
私はフロントエンドエンジニアとして働いてはいるのですが、巡り合わせが悪いのでしょうか？まともなテストを書いたことがないんですよね。まあ、それもでテストくらい書けないとなぁ。なんて思ってはちょいちょい調べたりする日々を過ごしていました。 そんなある日、たまたま TDD（テスト駆動開発） についての動画を視聴してみました。 TDD 自体は知ってはいて、なんとなく知っているくらいの知識ではありましたが、分かりやすい説明とその思想が好きで、のめり込むように見てしまいました。 その後も何度か視聴して、フロントエンドでも TDD したいなと考え始めました。 普段テストすら書いていないのにいきなり TDD とも思わないこともなかったですが、実際に普段自分がさわっているようなコードに落とし込んで書いていくと、テストする本当の意味というものが、より正確に理解できてきたような気がします。 そんなテスト初心者の
10年引きこもりニートしてた就職氷河期直撃アラフィフでも社会復帰してReactで成り上がれるよ｜erukiti
社会問題にもなっている就職氷河期直撃世代のえるきちです。クッソどうでもいい専門学校を出てから10年引きこもりニートしてました。 どん底（と言っても本当にどん底ではないかもしれない）からでも、普通に人生なんとかなるみたいな話です。あと、怪しげなサロンやスクールに通うくらいならN予備校に通う方がいいと思いますという話です。 ワナビー界隈だと年収公開したりするようなキラキラパリピが人気集めるんですって？わざわざ金の話をこれ見よがしに語る人、まっとうなエンジニアではないので気をつけた方がいいですよ。 年収は特に書きませんが、スタートアップに勤めて、同人誌書いたりしつつ、面白おかしく生きるのに問題無い金額は稼いでおります。 前提: 他の世代の人への補足アラフィフ4x歳だったら、経験も豊富で金も一杯もらってんだろ当然だろみたいに考える人もいるかもしれませんが、それは必ずしもそうとはいえません。 たとえ
WASMとRustはVue.js/React.jsを打倒するのか？ - JSへの侵略の歴史
はじめに 「Typescriptの次はRustかもしれない」という記事がバズってるのを見かけました。 なかなか面白くて、PAとしてのWASMとRustを比較している記事です。ちょうど最近「レガシーおじさん、SPAを始めてみた。そして限界を知る」でも書いた通り最近SPAに手を出してみたのですが、いろいろやろうとするとSSRのためのBackend for Frontend (BFF)等が必要になるとわかり「これJSでやる必要なくない？」とも感じていたのでちょうど良かったです。 こういうのを見るとRIAやGWTのように似たアプローチで廃れた技術や、登場が早すぎたMeteor、今も頑張ってるMSのBlazorなど色々頭をよぎります。といわけで歴史を俯瞰する意味でHTML + JavaScriptとそれ以外の技術のせめぎ合いの歴史やMSのBlazorやRustのyewなどWebassemblyを使う
2020年版: なぜ仮想 DOM / 宣言的 UI という概念が、あのときの俺達の魂を震えさせたのか
本記事は、 「なぜ仮想 DOM という概念が俺達の魂を震えさせるのか」 https://qiita.com/mizchi/items/4d25bc26def1719d52e6 の 2020 年版のリライトです。 2014 年当時、日本においては React は未だ知る人ぞ知るライブラリ、という位置づけでした。それが、この記事によって一気にメジャーになったように思います。 オリジナルは2014 年末の情報によって書かれたもので、さすがに 6 年経った今では情報が古くなっており、当時の暗黙のコンテキスト、古いリソースの参照、初学者の混乱を招く表現が残ったままになってしまっています。 定期的に更新しようとも思いましたが、そうすると 2014 年末の歴史的な背景を失ってしまうため、あえてそのまま残し、新しい記事を投稿することにしました。増補改訂版というより、ほぼ書き直しです。 この記事は本来なら
TypeScript + React: Component patterns
This list is a collection of component patterns for React when working with TypeScript. See them as an extension to the TypeScript + React Guide that deals with overall concepts and types. This list has been heavily inspired by chantastic’s original React patterns list. Contrary to chantastic’s guide I use mainly modern-day React, so function components and – if necessary – hooks. I also focus exc
React、Angular、Vue対応、高性能なテーブルを実装できるシンプルで軽量のJavaScriptライブラリ -Grid.js
高性能なテーブルを実装できる、シンプルで軽量のJavaScriptライブラリを紹介します。HTMLテーブル、ページネーション、検索機能、ソート機能、XMLやJSONからインポートなどに対応しています。 React、Angular、Preact、Vueなどの主要なフレームワークのプラグインとして動作するだけでなく、フレームワークなしのバニラJavaScriptでも使用できます。 Grid.js Grid.js -GitHub Grid.jsの特徴 Grid.jsのデモ Grid.jsの使い方 Grid.jsの特徴 Grid.jsは高性能なテーブルを実装できる12Kbの超軽量のJavaScriptです。 シンプルで軽量な実装。 人気が高いすべてのJavaScriptフレームワーク（React、Angular、Vueなど）で使用できます。 フレームワークなし（バニラJavaScript）でも使用
【書評】2020年にReact Nativeを始めるときの決定版的技術書が出ます！ - フロントエンドの地獄
「React Native ~JavaScriptによるiOS/Androidアプリ開発の実践」の書評になります。 PDF版はこちらで先行発売開始していて、 gihyo.jp 紙の本は2020/5/20から販売の予定です。 React Native ~JavaScriptによるiOS/Androidアプリ開発の実践 作者:髙木 健介,ユタマこたろう,仁田脇 理史発売日: 2020/05/30メディア: 単行本（ソフトカバー） 買おうと思っていた本の献本を頂き、いち早く読ませていだだいたのでせっかくなのでブログにします！ どんな本？ React Nativeの基本・具体的なアプリ開発はもちろん、React Nativeで の開発に必要な TypeScript・React も1冊で解説。登場時からReactNativeを追い続けた著者陣が、 現場実践をふまえて伝授します。 という紹介文にふさわ
いまからはじめるReact - Qiita
この資料は 11/16(土)開催の勉強会 いまからはじめるReact の資料になります。 React未経験者/初学者向けに チュートリアルを通してReact(およびHooks)について学ぶためのものです。 そのため、サンプルコードには例外処理などが不十分な箇所があります。ご注意ください。 Reactとは？ Reactとは Facebookが中心となってオープンソースで開発されている ユーザーインターフェースを構築するためのJavaScriptライブラリです。 (2019/10/30現在、v16.10.2 が公開されています) React – ユーザインターフェース構築のための JavaScript ライブラリ https://ja.reactjs.org/ コンポーネント(部品)を作成し、これらを組み合わせることでSingle Page Applicationのような複雑なユーザーインター
Build your own React
We are going to rewrite React from scratch. Step by step. Following the architecture from the real React code but without all the optimizations and non-essential features. If you’ve read any of my previous “build your own React” posts, the difference is that this post is based on React 16.8, so we can now use hooks and drop all the code related to classes. You can find the history with the old blo
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.js & Nuxt.js から React & Next.js へ移行した理由 | fwywd（フュード）powered by キカガク
Node-Based UIs in React - React Flow