React+Redux入門 - Qiita
※この記事を書いたのは2016年4月です。Qiitaでは記事をアップデートするとその日付のみが表示されていまうため、新しい記事のように見えるかもしれませんが、現代ではもっと進化していることにご注意ください。素直にReact Hooks を使いましょう。あと Redux は用法用量を守って気をつけて使ってください。なんならReduxは使わない方がいいでしょう。 最近のモダンなウェブフレームワークと言えば、React+Reduxですよね。でも、なんか難しそうとか、ReactってPHPみたいにViewにロジック混ざりそうとか感じて尻込みしていませんか？それはただの誤解かもしれません。React+Reduxはそんなに難易度の高いものではありません。ただ単に、新しい概念で構成されているから、カルチャーショックのようなものがある、というだけのことです。React+Reduxに入門してみましょう。 僕自
React初心者のまとめ（基本編：1/3） - Qiita
React初心者の私がふとReactを使ってみようと思い立ち、社内ツールを作る過程で覚えたことをまとめておきます。 今まではJavaScriptはそこそこ経験してきたものの、もっぱらjQueryに頼って開発してきた旧型タイプの開発者ですので、同じような立場の方には参考にして頂けるのではないかなと思います。 Reactのイメージ（学習前） そもそもReactが何なのかもよく分かっていなかった状態で始めたので、学習前に思っていた印象は… Facebookが作ったものなので良さそう jQueryを使わずにJavaScriptを使ったページを作れる(jQueryで追記するプログラム部分が複雑になることを回避できる？) 動きが速そう 覚えることは多そう ソースはスッキリ書ける？ というかなり適当な印象と知識でスタートしました。 Reactの基本ルール 学習したうえで分かった「本当に基本のルール」はこ
シングルページアプリケーション考察 - 技術ブログ | 株式会社クラウディア
みなさんこんにちは、masa です。今日はコードは出てきませんｗ たまには Web 業界の考察を書いてみたいと思いテーマを考えた結果、シングルページアプリケーション（以下、ＳＰＡ）について述べてみたいと思います。 突然ですが、私は今後すべての Web はシングルページ化していくと予想しており、またそうなるべきだと思っています。 今さらですが、従来の Web アプリケーションというと、サーバーサイドで生成したページをクライアント（ブラウザ）に投げつけ、あとはブラウザがそれを表示するだけでした。データに更新があればサーバー側でページを更新してブラウザはそのデータをもう一度読み込み直す。これがサーバー同期通信です。 これには一つ、画面のユーザビリティに大きな欠点がありました。何か操作するためにページ更新が起きるため画面がチラついて「待ち」が発生する。これではユーザーに強いストレスを与え、インスト
I am mitsuruog | SPAを構築するときに知っておいた方がいい7つの課題
ブラウザでの Javascript の高速化と Backbone や Angular のような JavascriptMVC フレームワークの登場により、以前より SPA（Single page application）が構築しやすくなりました。 さらに、Yeoman に代表される SPA を作成するするための scaffold（土台）が整備されてきましたので、結構さくっと SPA が作れるようになったのも事実です。 さくっと作った SPA がさくさく動かない・・・作ったけど使えない・・・なんてことにならないように、SPA を構築する前に知っておいた方がいい課題について調べてたり考えてみました。 目次 1. パフォーマンス 2. メモリリーク 3. セキュリティ 4. フレームワークロックイン 5. 画面設計から UI コンポーネント設計への思想転換 6. フロントエンジニア不足 7. 番外
ブログをシングルページアプリケーション（SPA）にするメリット・デメリット | 綺麗に死ぬITエンジニア
2017年1月下旬頃から、当ブログをシングルページアプリケーション（SPA）としてリニューアル・公開開始しました。 公開してからある程度時間が経ち、SPAにした成果が見え始めてきているので、ここで一つ、実際のところSPAにしてどのように変化したかを振り返ってみます。 シングルページアプリケーション（SPA）とはSPA（Single-page application）は、単一ページアプリケーションとも呼ばれ、最初にページを読み込んで以降は画面遷移を全てAjax（非同期通信）で再現し、JavaScriptで従来のページ移動をエミュレートしているWebサイト・Webアプリケーションのことです。 通常のWebページでは、リンクをクリックして画面遷移をすると、ページを丸ごと読み直します。しかし、SPAでは画面遷移ごとにページを読み込み直すことをせず、Ajaxでデータをサーバーから取得し、ブラウザ上で
React Router v4 の基本的な考え方と使い方 - 30歳からのプログラミング
React Routerの使い方を学んでいく。 先月にv4がリリースされたので、それに準拠した内容を学んでいく。 ここで述べていることは正確な仕様とは異なる可能性が十分にあるので、正確なことを知りたい場合は公式のドキュメントを読みましょう。 React Router: Declarative Routing for React.js 何のためにReact Routerを使うのか 具体的な使い方に入る前に、そもそも何のためにReact Routerを使うのかを少し書いてみる。 聞きかじったり自分で考えたりしたものなので、これもまた、間違っている可能性が大いにあります。 SPAとは、ページ遷移を行わず単一ページでコンテンツの切り替えを行うウェブアプリケーションのこと。 ページの読み込みは最初の1回だけで、後はそのページのなかで、JavaScriptによって描画やAPIへのアクセスを行う。 この
ReactJSで作る今時のSPA入門（基本編） - Qiita
GitHubサンプルをbabel7に対応しました。 GitHubサンプルコード：GitHub （※この記事のサンプルはすでに古いです。最新版のサンプルと説明はGitHubのreadmeに書いてあるのでそちらを見てください） ReactJS使ってナウいウェブアプリケーション作ろうぜってことでまとめてみようと思います。 以前はウェブアプリケーション作る時はBracketsやAtom使っていたのですが プラグインのアップデートとかバグった時がめんどくさかったり、エディタが重かったりしたので 最近はVisual Studio Code(VSCode)に乗り換えました。 （必要な便利な機能もプラグインいれなくても揃ってるし、デフォルトでJSXサポートしてるから楽） VSCode環境構築：VSCodeで爆速コーディング環境を構築する(主にReactJS向け設定) ちょこっとReactJSを試したいとき
react-routerのページ遷移をhandleで行う時にはwithRouterを使う - Qiita
概要 react-routerでページ遷移の基本はLinkだが、onClickなどのhandleでは使えない handleで呼び出すには、withRouter(XxxYyyy)とthis.props.history.push(/zzzz)を使う。 環境 "react-router-dom": "^4.2.2" "react": "^16.0.0" 方法 事前準備 普通通りrouteを設定する。 import {BrowserRouter, Switch, Route} from 'react-router-dom'; class App extends React.Component { render() { return ( <BrowserRouter> <div> <Switch> <Route exact path={'/'} component={Home}/> <Route p
Reactチュートリアル: Intro To React【日本語翻訳】
2016年10月にReactの公式ドキュメントが刷新されました。それに伴いチュートリアルの内容も新しいものとなりました。当ブログでは以前のチュートリアルも日本語に翻訳していましたので、今回も翻訳しました。自分のReactの知識をフル活用して、それなりにわかりやすく訳したつもりです。ぜひ参考にしてください。 当記事は以下のReactの公式チュートリアルを日本語に翻訳したものです。 Tutorial: Intro To Reactまずこのチュートリアルを進める上で、以下のCodePenのコードを使用します。フォークしてから始めてください。 Tic Tac Toe – CodePen以下、チュートリアルの日本語訳となります。 What We’re Building – 何を作るのかToday, we’re going to build an interactive tic-tac-toe gam
チュートリアル：React の導入 – React
この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 新しくなったチュートリアルでは最新の React の使い方がライブサンプル付きで学べます。 このチュートリアルは React の事前知識ゼロでも読み進められます。 チュートリアルを始める前に このチュートリアルでは小さなゲームを作成します。自分はゲームを作りたいのではないから、と飛ばしたくなるかもしれませんが、是非目を通してみてください。このチュートリアルで学ぶ技法はどのような React のアプリにおいても基本的なものであり、マスターすることで React への深い理解が得られます。 ヒント このチュートリアルは実際に手を動かして学びたい人向けに構成されています。コンセプトを順番に学んでいきたい人は一段階ずつ学べるガイドを参照してください。このチュート
正真正銘のReactだけの不純物なしでReact入門
Reactのチュートリアル、たくさんありますよね。どれも質が高く、どこから手をつければいいかわからなくなっちゃいます。 ですがやはり巷のチュートリアルには面倒な問題もあります。今回は面倒ごとを全部すっ飛ばしてReactでのウェブアプリ作りに入門してみましょう。 Reactを始めるには、まずあれとこれとそれとどれと…… Reactやるには、まずNode.js入れてbabel入れてreact入れてreact-router入れて、ついでにredux入れてreact-redux入れて、redux-saga入れて…… Reactめんどくせえ！！！ってのが正直なところだと思います。はい、私もそう思います。ただ、まあ、色々必要なのも事実なので……。 それでもやっぱり「ReactやるならReactだけやりたい。他はどうでもいい」という気持ちは簡単に捨てられるものではありません。そこで今回はそういう面倒全部
React – ユーザインターフェース構築のための JavaScript ライブラリ
React は、インタラクティブなユーザインターフェイスの作成にともなう苦痛を取り除きます。アプリケーションの各状態に対応するシンプルな View を設計するだけで、React はデータの変更を検知し、関連するコンポーネントだけを効率的に更新、描画します。 宣言的な View を用いてアプリケーションを構築することで、コードはより見通しが立ちやすく、デバッグのしやすいものになります。 自分自身の状態を管理するカプセル化されたコンポーネントをまず作成し、これらを組み合わせることで複雑なユーザインターフェイスを構築します。 コンポーネントのロジックは、Template ではなく JavaScript そのもので書くことができるので、様々なデータをアプリケーション内で簡単に取り回すことができ、かつ DOM に状態を持たせないようにすることができます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
株式会社オロ