これから始める、Next.js | 第1回 Next.jsとは
これから始める、Next.js 第1回 Next.jsとは Next.jsの特徴を簡単なデモを使って確認してみます。Reactをベースとし、用途に合わせSSRやSSGを組み合わせた柔軟なサイト書き出し機能を試してみましょう。 はじめに Next.jsは、Reactをベースとしたフレームワークです。アメリカに籍を置くVercel社によって管理されているOSSプロジェクトでもあります。 この記事の執筆時点では10.0.5が最新バージョンとなっています。 Vercel社は、Webサイトのデプロイ・ホスティングサービスとしての「Vercel」も会社と同じ名前で運営しており、Next.jsとVercelを合わせて利用することで簡単にハイパフォーマンスなWebサイトが作れるということを掲げています。 Vercel社は2016年にZEITという名前でスタートして、ホスティングサービスのnowを運営してい
Comparing Svelte and React - Jack Franklin
March 9, 2021Comparing Svelte and ReactLast year I created Pomodone, a small time tracking application based on the Pomodoro technique of working in 25 minute intervals. It's a pretty basic app; it has a 25 minute timer (that runs in a Web Worker) and saves a history of your "poms" to a small Firebase database. I initially built it using React (well, Preact actually) but I then started to play aro
React Armory
Try React in your browser -- no editor or build system required! But after a few hours investigating, you’ve found so many buzzwords that it just feels overwhelming. You’ve been told to install node, then babel, then webpack, then redux, then a router. And all of that before somebody mentions service workers. It feels like you’ll need to cut through a jungle of dependencies just to write hello, wo
The Beginner's Guide to React
React got that name for a reason. It’s a component-based JavaScript library that renders smartly and can seriously simplify your work. This course is for React newbies and anyone looking to build a solid foundation. It’s designed to teach you everything you need to start building web applications in React right away. Each lesson in this 28-part course is a single index.html file. This keeps your f
2017末時点での React Component 設計のベストプラクティス - Qiita
どう考えているか、というのを聞かれたので、記事に起こしておきます。個人の意見です。 Prettier を使う 気づけばコードの整形を人間がやる時代は終わりました。 細かいコーディングスタイルでレビューの時間を取るぐらいだったら、一貫した自動整形ルールを適用すべきです。 人によっては細かいこだわりがあって prettier の規則が気に食わないかもしれず、僕も最初はそうでしたが、Atomで保存する度に自動整形を走らせる prettier の強烈な開発体験によって、最終的にそれらのこだわりを全て捨てることが出来ました。 生産性を求めるなら、現時点では最優先で導入すべきものです。 React.createClass を使わない v16 で削除されたのでいわずもがな。 同様に、 createClass でしか使えなかった mixin 周辺機能も丸ごと deprecated です。 「可能な限りは」
ssig33.com - なぜ SPA か
顧客は SPA であることを望んでいるのか？そうではないです。技術者は SPA を作りたいのか？そうではないです。 ではなぜ SPA 的なものが出来てしまうかといえば、いちいち UI の遷移のために大量のデータをロードしているのは時間と資源の無駄だからです。 もちろんあるべき姿としては、サーバーの CPU やストレージやメモリは爆速で、回線も爆速で、用いられるデータは必要最低限で、クライアントマシンも爆速で、クライアント側でフォームを一個書き換えるたびにページをフルロードしても全くストレス無く使える、というような世界観です。 しかし実際にはサーバーのスペックも回線もクライアントのスペックも不足気味ですから頑張って補っていく必要があります。 すると最初にロードしたデータをクライアントは保持し続けて、 HTML 全体を書き換えるのではなく必要なところだけを最小限の通信とともに書き換えてみたいな
Reactを使うとなぜjQueryが要らなくなるのか - Qiita
はじめに React（通称 React.js1）を全く知らない、あるいは幾つか記事を見たけどなんなのかピンと来ていない、という人のために書いています。 「jQuery くらいしか知らない」くらいの人に具体的に雰囲気を知ってもらうのが目的であり、すでにやる気がある人向けのチュートリアルではありません。やる気が出れば日本語版ドキュメントを読んで手を動かせばあっという間なので、そこまでの興味が出ることを目標にしています。 以降では ES2015 (ES6) の文法（アロー関数とか）を使っています。この部分が怪しい人は先にアロー関数と const 文だけでも知ってから先に進んでください。 以下の説明中、このアイコンで表すのは（2023 年現在から見た）『昔話』です。新しく自分のコードを書く際には本来知らなくていいことですが、古い記事を見たときに混同しないための参考情報として書いてあります。この記事
React.js + CSS - Qiita
React.jsの開発者であるvjeuxが「React:CSS in JS」というタイトルでTalkをしていて、その内容がなかなか興味深いものでReact.jsにも関係するものなので紹介しておきたいと思います。 また、このアプローチについては同じくReact.jsの開発者であるzpaoによる「React Through the Ages」というTalkでも言及されています。 CSSをスケールさせる時に問題になる点 Global Namespace Dependencies Dead Code Elimination Minification Sharing Constantsn Non-deterministic Resolution Isolation ここでいうスケールさせるというのは、Facebookくらいの規模のことだと思います。 Global Namespace そのままですが、
Modular CSS with React
(Translations: Japanese) At Buffer, we love React and are incrementally moving a lot of our front-end codebase to it. With Flux on top of it, we just think it’s a very sane way to build a complex product made of smaller, modular apps. As such, we see each new small app and feature as a new React brick to add to that edifice. I’ve been working on one of those new features lately, and have further f
JSといえばjQueryだったWebデザイナーが、Reactを1年間使って感じたメリット｜dwango creators' blog（ドワンゴクリエイターズブログ）
はじめまして、ほそだと申します。昨年秋まで個人事業主の立場でドワンゴでお仕事させていただいておりましたが、いろいろ経緯がありまして中の人になりました。ドワンゴ歴はそこそこ長い新入りです。よろしくお願いいたします。 さて、今回はデザイナー（HTML/CSS/JSは扱えるいわゆる「Webデザイナー」）として1年間ほどReactを使ってみたので、そのメリットを書いてみようかと思います。 Reactとの出会い ReactとはFacebook製のJSライブラリです。 https://facebook.github.io/react/ WebアプリケーションのView部分を実装します。2014年の暮れにエンジニアの方々が魂を震わせているのを見て存在を知りました。2015年はReact元年な感じでしたよね。 僕自身、以前から比較的JSを書くタイプのデザイナーではありましたが、正直なところ自分が関わってき
React に対する感情とかコンポーネント管理ライブラリの選定とか
コンポーネント管理できそうなライブラリの選定 ここでいうコンポーネントは HTML 要素をコンポーネントに見立てるような、近代 Web フロントエンドにおける狭義のコンポーネントです。大まかな条件は次の3点。 コンポーネント中心の開発ができること >= IE9 をサポートすること（切っても良さそうなんだけど...） 既製品・スクラッチは問わないが極端なリスクは踏めない（納期がシビア） あとは期待度や API のセンスなど、個人的な審美眼判定に依ります。 angular/angular : 2.0 が正式リリースしたらまた会いましょう jashkenas/backbone : 最近のコンポーネント管理には及ばない Custom Elements ( Polymer ) : polyfill が >= IE10サポート segmentio/deku : 振る舞いは十分だったけど、>= IE10
WAI-ARIA 対応のアクセシブルなタブ UI を React で実装する
タブ UI のアクセシビリティ対応 この記事は、下記の点に留意してご覧いただきたい。 タブ UI におけるアクセシビリティ対応（主に WAI-ARIA）の参考実装であること React コンポーネントとしての機能性は二の次のサンプルであること アクセシビリティ実装についてのツッコミは歓迎であること ひさびさにPCキーボード的なアクセシビリティ対応が必要そうな性質のサービスを開発することになったので、コンポーネント単位でのアクセシビリティ関連実装を進めている。 React 実装 今回はタブ UI を題材に、React コンポーネントを実装した。 行うべき操作を見通しよくするために、タブ UI を <Tabs> コンポーネント1つで実装した。厳密には <TabList> や <TabPanel> などの要素を分解してコンポーネント化したほうが良いだろうが、今回は簡易実装としている。 キーボード
ReactをjQueryの数行に要約する | POSTD
「Reactが素晴らしい理由は、UIをアプリケーションの状態の純粋関数にできるからだ」いうような話を聞いたことがあるでしょう。しかしそれだけではなく、不変性と仮装DOMを利用して動作するということも聞きますよね。その上、保存、読み込み、取り消し、それにタイムトラベル・デバッグと呼ばれるすごい機能まで自由に手に入れられる。でも知っていますか？ Reactの核となるアイデアを利用し、その恩恵に預かるのにこれらのことは必要ありません。jQueryの数行にしてお見せします。 <span id="colored-counter">0</span> <input id="color"></input> <button id="inc"></button> <script> $('#color').on('keyup', function () { $('#colored-counter').css('
Inside "dotby.jp 2015" - Qiita
弊社 dot by dot inc. のコーポレートサイトをリニューアルしたときのいろいろをメモ。見た目シンプルなわりにいろいろあったのでね どんな仕組みでつくる？ 日々増えるニュースを簡単に更新できるようなブログ形式、前バージョンの背景エフェクトもってくる（かつページ遷移においてリロードしない＝エフェクトを途切れさせない）という前提で検討した結果、WordPress を CMS に使いつつ WP REST API で JSON ひっぱってきて React でごにょごにょやるんがいーかなーと。 ちょうどどうやってつくろっかなーと考えてる時に、VirtualDom - なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita を読んで、どうやらこれ流行りそう今っぽいーということでフロントのフレームワークを React に決定。ちょうど IntelliJ IDEA 14 が JSX
リアルな DOM はなぜ遅いのか - steps to phantasien
これは VirtualDOM Advent Calendar 2014 に勝手に参加する記事です。 あたたかい春の昼下がりのこと、あるブラウザベンダの社内を不穏な噂が駆け巡った。 「React.js なるライブラリ、どうも仮想 DOM というやつのせいで速いらしいぞ」 もうリアルな DOM はお役御免、ブラウザも商売上がったりか・・・。雇用に不安を覚える人(私)がいる一方、 そのアイデアをとりこんでブラウザの DOM を速く出来ないかと考える人たちもいた。 仮想 DOM はなぜ速いのか。誰かのつてを辿って React.js チームにおいでいただき、速さの秘密をテックトークしてもらう。 イミュータブルなデータ構造による単純化、非同期適用による処理のバッチ化、差分アルゴリズムによる副作用の最小化… いくつかのアイデアはブラウザからはどうにもならないが、たとえば非同期化なんかは形は違えどブラウザ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - Pau1fitz/react-spotify: Spotify React / Redux 🎤🎺🎸🎷
React: CSS in JS
React for Designers
React概論