【永久保存版】0からReactを勉強するならこのロードマップに従え！ - Qiita
はじめに こんにちは！！@Sicut_studyです！ 最近フロントエンドを学ぶ機会が多く、色々試してみて今後 React が選ばれる場面が増えるのかなと思いました。 そこで初学者の方がJavaScriptの次に学ぶ言語の選択肢になりやすいのではないかと考え今回の記事を作成しました。 私自身、2022年9月に独学で React を学び始めました。 最初JavaScriptもままならない状態から始めたのですが、Reactを学ぶことでピースがうまくはまってJavaScriptをより理解できましたし、Reactができるようになることで個人開発で多くのサービスが作れるようになりました。 そんな私が去年の自分にアドバイスするなら、 0からReactを学ぶならこのロードマップで勉強しろ と言いいます。 Reactを学ぶことで 勉強することが楽しい ↓ モノを作ることが楽しい というマインドに変われたの
Next.jsが動くレンタルサーバー
Next.jsの動作には、Node.jsが必要 まず、基本的に、Next.jsが動くホストには、Node.jsが必要になります。 一般的なレンタルサーバーでは、Node.jsが入っていないため、Next.jsを動作することが出来ません。 (静的にExportして、HTTPサーバで動作させるのは別の話です。) そのため、一般的には、開発元のVercelの環境や、VPSで自分でNode.jsをインストールして動かすことが必要になります。でも、VPSってレンタルサーバに比べると自由度はもちろんありますが、お得感が薄いですよね。w レンタルサーバーでNode.jsをインストールするには、SSHで接続できることが必須となります。ですので、SSH出来ないレンタルサーバーは対象から外れます。 ということでNext.jsが動く(Node.jsがインストールできる）ものがあるか調査してみました。 （継続調査
お前らのReactは遅い - Qiita
煽りタイトルですみません。 最近、Reactのプロジェクトのページを動かしていて、 もっさりしてる（レンダリングの負荷が高いな）と思ったので どうやったら無駄なレンダリングを減らせるか思考錯誤したことをまとめました。 preactとか別ライブラリの話はしません。 よかったらこちらもどうぞ ReactJSで作る今時のSPA入門（基本編） 2019年07月06日追記： ブラウザのレンダリングの仕組みに関して良記事があったので先に一読しておくことをおすすめします。 良記事１：実際のところ「ブラウザを立ち上げてページが表示されるまで」には何が起きるのか 良記事２：ブラウザレンダリング入門〜知ることで見える世界〜 １ピクセルがブラウザに表示されるまで：Life of a Pixel 2018 この記事に関してはReactのDOMツリー（レイアウト）レンダリングに関する最適化戦略です。 2020年02
いまNext.jsで新規サービスを立ち上げるときの観点（Router・CSS・認証・監視など/2023年末）
免責事項 社内向けに展開するように雑にまとめました Next.jsの知見が深くない人がリードしてPoCを立ち上げなきゃいけなくなったが、社内的にはNext.jsを推奨しているみたいな場面を想定しています なので自信ないところも多いですが割と断言するように心がけて書いています PoCの立ち上げ想定なので、jest/Storybookなど内部品質面についてあまり深く書くことを避けています ほぼ自分の知識だけで書いており私見も多いですし、そもそも自分自身がトップクラスの知識や視座を有しているわけでもないので、まずは以下の話を理解はした上で、踏襲するかどうかは別途他記事やGitHub、公式ドキュメントなどを漁って判断することを推奨 App RouterかPages Routerか 2023年末現在まだApp Routerは技術記事が足りてきている印象ではないため、社内でノウハウを積極的に貯めていく
個人開発で参考になるNext.jsリポジトリ10選
OpenStatus - ステータスページ App Router Turborepo Drizzle Clerk tRPC Tailwind shadcn/ui LLM Report - OpenAI モニタリング App Router Prisma NextAuth shadcn/ui Stripe Dub - URL 短縮 App Router Turborepo Prisma NextAuth Tailwind Stripe slug - URL 短縮 Prisma NextAuth tRPC Tailwind Cal.com - 日程調整 Turborepo Prisma NextAuth tRPC Tailwind Taxonomy - ブログ App Router Prisma NextAuth Tailwind Rowy - ローコード GUI Firebase Dorf -
React入門 ～基礎編～
現在業務で使用している React について、より理解を深めていくために勉強したことを記事として書くことにしました。 ということで、まずは基礎編です。 ※2021/09/13追記 全体的に内容を見直しました。 記事を書くにあたって 2019年秋頃から Qiita の記事を書いてきましたが、環境構築系ばかりで、いまだ技術の中身についての記事を書いたことがなかったので、そろそろ書いてみたいなーと思っていました。（ブログで多少技術記事は書いていました） 技術記事となると、すでに同じテーマで記事を書かれている方がいてクオリティも高くてと、自分なんかが書いてもなと尻込みをしていたのですが、自分の理解を深めるという目的で思い切って書くことにしました。 記事を書く上で自然とまとめるようになるので、頭の中が整理できるので。 もし自分がその技術から離れてしまって、また戻ってきたときに記事を見返して助けになれ
React Nativeの記事一覧
articlesTrendingAlltimeLatest💨12ヶ月で12個のサービスを立ち上げる挑戦をはじめました！ウマたん(上野佑馬)2日前 35🏆React Nativeでgluestack-uiを使ってみるJboyHashimoto22時間前🌊react-native-mapをオフラインで使うyorukuma1日前⚖️FlutterとReactNativeを比較してみた...JboyHashimoto5日前 3📘React NativeのCustom Hookjustkidding55boy4日前 1🌎ReactNativeでREST APIからデータを取得するJboyHashimoto5日前 2🎃[react-native] “RNCSafeAreaProvider” was not found in the UIManagerbyuul5日前🤧[react-nat
クイックスタート – React
React ドキュメントへようこそ！ このページでは、日々の開発で使用する React のコンセプトのうち 80％ の部分を紹介します。 このページで学ぶこと コンポーネントの作成とネスト マークアップとスタイルの追加 データの表示 条件分岐とリストのレンダー イベントへの応答と画面の更新 コンポーネント間でのデータの共有 コンポーネントの作成とネスト React アプリはコンポーネントで構成されています。コンポーネントとは、独自のロジックと外見を持つ UI（ユーザインターフェース）の部品のことです。コンポーネントは、ボタンのような小さなものである場合も、ページ全体を表す大きなものである場合もあります。 React におけるコンポーネントとは、マークアップを返す JavaScript 関数です。
きれいな動きしてるだろ。ウソみたいだろ。ReactNativeExpoで動いているんだぜ。それで。 - Qiita
ネイティブと同じくらいヌルヌル動く 動画サンプル pic.twitter.com/PZBXGGvIuo — HorieH@ゆうしゃとさんすうリリース (@h0rieh) October 10, 2019 実物のアプリ ※興味があったらインストールして動きを体感してみてください iOS Android Expoとは？ React Native開発で「開発環境、デバッグ環境、ビルド、証明書の作成/管理、スマホアプリに必用な機能」などを簡単にしてくれるやつ。 1ソースでiOSとAndroidとWebの開発が可能。 ReactNative+Expoでスマホゲーム １年間で６本リリースして、合計１万インストール/10万円達成しました。 以下、ReactNative+Expoの知見ではなく、スマホアプリを開発してみて知っておきたかった知見になります。 Webではなくアプリにしてよかった点 Admobが
React 日本語ドキュメントが実はわりと ChatGPT で翻訳されている件
React 公式ドキュメント日本語版メンテナの smikitky です。タイトルの通りですが、新版 React ドキュメント日本語版の翻訳においては、私が翻訳を担当したところ原則すべてにおいて、ChatGPT の翻訳がベースになっています。例えばチュートリアルやブログ記事、最近何かと話題になりがちなこれやこれもそうです。（流石にトップページは手でやりました。） この目的のために、長文 Markdown ファイルを ChatGPT を使って翻訳するツールも作りました。個人的にはもうこれなしで長文 Markdown の翻訳をしたくなくなりました。 例として、このツールを使って単に生成してみた新版チュートリアルを以下に掲載します。 上記は 100% AI 翻訳ですが、すでにぱっと見た程度で酷い違和感は感じないレベルには達していると思います。React ドキュメントを自動翻訳させると React
Nextを採用する上で勉強なる記事をまとめたい
CSSに関して何を採用するか悩んでいる人向け 採用するCSS設計の検討記事 styled-components 公式 CSS Modules
ゼロから始める React Native + Expo 入門
React Native とは React を使って Android,iOS アプリを開発するためのツールです。 React Native は 開発者が JavaScript を書いて React Native を通すことで、ネイティブのコードで動作するという仕組みです。 Expo とは Expo とは開発者が React Native 単体で開発した場合に意識しないといけなかったネイティブ部分を隠蔽して、アプリケーション本体の開発をより web アプリケーションは開発体験に近づけたものになります。 開発時も実機に Expo クライアントと呼ばれるアプリをインストールして、簡単にローカル環境と繋いでスムーズに動作確認ができます。まるで web アプリケーションを開発しているかのような開発体験です。 所感 普段 web アプリケーションは React、 iOS アプリケーションは Swift
React Native(+Expo)でモバイルアプリの開発環境を構築しよう！ - W&M de Asobo
React Native(+Expo)でモバイルアプリの開発環境を構築しよう！ この記事にはプロモーションが含まれています。 投稿：2023・03・18 更新：2023・04・07 React Native（リアクトネィティブ）は、iOS(iPhone)・Androidのアプリを開発できるクロスプラットフォームです。 しかし、React NativeだけではAndroid Studio（Androidアプリ開発）や、Xcode（iOSアプリ開発）といったツールが必要となる上、開発を始めるための初期設定もかなり複雑です。 そのため、初心者の方はまず、React Nativeを使った開発をシンプルにするためのツールセットであるExpo（エキスポ）を利用することをおすすめします。 Expoには有料のプランもあるのですが、個人でちょっとしたアプリを開発する程度であれば無料の範囲内で全く問題なく、無
ReactNative、Expoとは？特徴や使い方を調べてみた - NCDC株式会社
ITコンサルタントの久光です。 Reactを使ったWebアプリ開発を習得した後、次はReactNativeでモバイルアプリも開発できるようになりたいな、と思っているエンジニアの方は多いのではないかと思います。 そこで今回は、ReactNativeやその開発ツールであるExpoについて、特徴や使い方を調査した結果を紹介します（NCDCの社内勉強会で共有した内容です）。 ReactNativeとは？ ReactNativeは、Facebookが開発したモバイルアプリケーション開発言語で、JavaScriptフレームワークであるReactがベースになっています。開発の方法がReactと大きく変わらないので、Reactを使ったことのある人にとっては学習コストの低いフレームワークと言われています。 ReactNative を開発したFacebookにより運営されている公式サイト 通常、iOSやAnd
Gatsby.jsで導入事例をバシバシ読めるSPAなLPを作った話 / gatsby-js-for-biz-lp
- Gatsby.js を採用した背景 - Gatsby.js とは - どうやって作ったか - できあがったもの - リリースしてどうだったか - 所感など
デザイナーがデザインツールを使わずに、React を使ってデザインした話 | MEDLEY Developer Portal
2020-06-19デザイナーがデザインツールを使わずに、React を使ってデザインした話メドレーのデザイナー酒井です。最近、JobMedleyからCLINICSに異動しました。 自分はデザインはもちろん、HTML/CSS/JS 実装してプルリク送ったりしているちょっとフロントエンド実装領域に軸足が寄ったタイプのデザイナーです。 ここでは以前所属していた JobMedley 事業部の話をさせていただきます。 当時、JobMedley の社内システムのリニューアルプロジェクトにデザイナーとして参加していました。通常、デザイナーがデザインをするときには Skecth や Figma のようなデザインツールを利用するのが一般的かと思います。 弊社でも基本的にはデザインツールでデザインを行うことが多いのですが、プロジェクトによっては、よりリアルなモックアップが必要なため、デザイナー自身がコーディ
JavaScript: フレームワーク React/Vue/Angularについて
フロントエンドの開発に用いられる人気のフレームワーク(ライブラリ)に、ReactとVue.jsおよびAngularがあります。これらフレームワークのフロントエンド開発における役割と、3つの違いについて簡単にご紹介します。 データバインディングとコンポーネント化 フレームワークReactとVue.jsおよびAngularは、いずれもHTMLの要素(DOM)をデータと関連づけて(データバインディング)、データの変化に応じた動的なページ構成を行います。 DOMの操作には、かつてはjQueryが用いられました(今だに、使われていることは少なくはないでしょう)。けれど、モダンブラウザが対応するECMAScript 2015(ECMAScript 6)以降でしたら、標準JavaScriptでもDOMの操作は難しくありません。 動的にページを構成するコンテンツの典型は、シングルページアプリケーション(S
Reactを使ったモダンなフロントエンド開発の環境構築 - Qiita
はじめに Reactを中心としたフロントエンド開発において、以下のような構成を見かけることが多いと思います。 UIライブラリとしてReact 型のある言語としてTypeScript スタイル定義としてstyled-components コンポーネントの開発環境としてStorybook LinterとしてESLint FormatterとしてPrettier この記事では、各種ライブラリについて紹介したのち、それらを使う場合の環境構築についてハンズオン形式で説明します。 ※ アプリケーションを開発する際に必要になる設定が抜けていたので、追記しました。 各種ライブラリの紹介 まず、各ライブラリがどのようなものなのかを簡単に紹介します。 ライブラリの使い方などは公式ドキュメントなどを参照するようにしてください。 ドキュメント ReactはUI(ボタンやフォームなど)コンポーネントを作成するための
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
