2020 年、 React 軸で学ぶべき技術 - mizchi's blog
なぜ仮想 DOM という概念が俺達の魂を震えさせるのか - Qiita から 5 年経ち、 仮想 DOM を備えた React やそれを採用した Vue や他のライブラリも市民権を得たように思います。 有用な技術が市民権を得る、というのはエコシステムが花開くことでもあります。新しいプロダクトを作る際の技術選定において、 TypeScript + React が常に正解というわけではないですが、このスタックはかなり強力だという手応えがあります。 このスタックは得意のウェブフロントエンドは勿論、それ以外もとりあえず 80 点ぐらいの品質でプロトタイピングできる、というようなエコシステムになってきたような肌感があります。 モダンフロントエンドだと TypeScript と Webpack は採用しているのを前提として、本記事では React を軸にその技術を活かすために、次の 6 個の技術を紹介
webdesign-dackel.com - このウェブサイトは販売用です！ - webdesign dackel リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
React入門として書籍『りあクト！』を読み本家チュートリアルに挑戦した感想 - あるSEのつぶやき・改
はじめに 書籍『りあクト！』という同人誌を @YSRKENさんにご紹介いただき、一度は挫折した React 再入門しようと思い、書籍を読了した感想と、React 本家サイトの英語チュートリアルに挑戦した感想を書いていきたいと思います。 booth.pm 『りあクト！』の感想 この書籍は、技術書にありがちな技術解説というスタンスではなく、会社で先輩と後輩の会話の中で技術的な内容が出てくるという一風変わった特徴があります。それゆえに難しい概念にもなじみやすく理解しやすい内容になっています。 また、なぜ世間で React が難しいと言われるのかその原因を突き止め、その解法として、React の原理原則の解説に力点が置かれています。 自分が以前 React を理解できなかったのは、シンプルだけれども React の原理原則を理解していなかったためなのかと納得しました。いくら文法やコマンドを覚えても
React Hooks での状態管理と副作用の表現 - mizchi's blog
React Hooks は Stateless Functional Component でも setState 的な状態操作や componentDidMount のような操作を可能にするための仕様提案です。 既に開発ブランチに入っていますが、 現時点で公式に採用されたものではないです。リリース時にはAPIが変わる可能性があります。 React のメイン開発者の一人である sebmarkbage の出してる RFC https://github.com/reactjs/rfcs/pull/68 試してみる react@16.7.0-alpha.0 に既に実装されており、公式のブログでも解説が出ています。 https://reactjs.org/docs/hooks-intro.html https://reactjs.org/docs/hooks-reference.html 自分は以下
TypeScript入門以前ガイド - mizchi's blog
某社で自分が React/Redux + TypeScript などの講習をやってみた結果、TypeScript 入門用資料が必要だと思って書いたやつです。 このドキュメントのターゲット TypeScript で書かれたプロジェクトに参加する人 TypeScript を導入するために、その事前知識が必要な人 このドキュメントの読み方 ES2015 for Beginners ES2015 for ES5 Programmers ES Modules 非同期表現: Promise と async/await TypeScript エコシステム編 自分が React/Redux などの講習でいろいろやってみた結果、 ES2015 と TypeScript を同時に教えると、初学者は何がどの概念に由来するかの区別が出来ずに混乱します。なので、ES5 -> ES2015, ES2015 -> Ty
TypeScriptを使ってReactのチュートリアルを進めると捗るかなと思った(実際捗る) - Qiita
この記事を書いたのは2016年のことでした。それから２年。 いつの間にか日本語チュートリアルが消えたし、結構未だにいいねを押してくださるので更新することにしました。(2018/2/2) reactの本家ドキュメントが日本語化されたため更新します。 (2019/4/11) はじめに タイトルみたいなことを考えていました。 実際補完が効くのはかなり有効でしたが、チュートリアル通りにいかない点が多々出ました。 結局色んな所を見るはめになりました でも総合してTypeScriptに向いているフレームワークだと思ったので詰まったところと解決方法を纏めてみることにしました TypeScript自体も学習コストが凄く低くて(ES2015 + 型)素敵だったのでいいと思いました。 追加で使うツール類 なし 今なら以下で試せます。 stackblitz オンライン版VisualStudioCode的な(コー
React（+TypeScript） 入門 | 環境構築〜プロジェクト作成 | TECH Projin
SPAのライブラリ/フレームワークとしてはデファクトスタンダードとなった感があるReact。 （最近だとVue.jsの話題もよく見ますね） まあ今更感はありますが、Reactの素振りをまとめていきます。 Angularを使っているときにTypeScriptいいなと感じたので、今回React+TypeScriptの構成で考えていきたいと思います。 Node.jsのインストールは済んでいるものとし、以下の環境で実行・検証しています。 OS： OSX 10.11.6(El Capitan) node： v6.10.0 npm： 5.4.1 フロントエンドはスクラッチで環境を作るとなるとツールチェインの学習コストが重いですが、 今回はCLIツール create-react-app（https://github.com/facebookincubator/create-react-app）の力を借り
React製のSPAのパフォーマンスチューニング実例
カギは社内事例にあり！？システム効率化を超えて運用ミスを激減させた件 2024.09.02 コーポレート 業務改善 業務設計 社内ICT
React + TypeScript + CSS Modules によるコンポーネント指向フロントエンド開発の流れと知見 - Qiita
この記事は第2のドワンゴ Advent Calendar 2017 22日目の記事です。 ドワンゴでニコニコ生放送のWebフロントエンジニアをやっています、 @misuken です。 はじめに ここ1年半くらいは、主に ViewComponent(VC) と ContainerComponent(CC) 周りのアーキテクチャ設計、コンポーネント設計、実装を担当しています。 生放送のHTML5プレーヤーなどを開発してきました。 第1回 ニコ動／ニコ生 HTML5化への奮闘～ドワンゴ流動画配信サービスのつくりかた～ 今回はニコニコ生放送のViewComponent周りがどのように作られているのかを紹介したいと思います。 内容としては大体こんな感じです。 VCを中心とした設計から実装の流れ CSS Modulesを使いつつコンポーネントとデザインを柔軟に組み合わせられる仕組み ニコニコ生放送のコ
React Component 視点でのアトミックデザインの解釈といくつかの疑問 - mizchi's blog
フロントエンドの中でも、JS書くプログラマと、CSSを書くマークアップと、デザインカンプを作るデザイナで、コンポーネントという概念がズレる。だいたいこれらが一人だったり兼任だったりで1~2レイヤーの開発ステップになるが、完全分業だったり人が多くなると混乱の元になる。 誰かが決定的に間違ってるというつもりはない。正直、どっちかというと本来のデザイナ側の用語定義に倒した方がいい気がしているが、プログラム上の都合もいろいろ混ざってきて、話が簡単ではない。 自分の理解が間違ってる可能性もある。この記事はレビューをもらうために書いている側面もあり、指摘されたら追記していく。 読んだもの。 Atomic DesignとCSS設計 - Atomic Designとは何か | CodeGrid Atomic Designの考え方と利点・欠点 – wkr. Atomic Design の大雑把な理解 基本的
2021年版スタイリッシュなReact用 管理画面の無料＆有料HTMLデザインテンプレート 9選 | sounansa.net
Reactでフロントエンドを開発するのに便利な管理画面テンプレートをまとめてみました。 過去に書いたReactのテンプレートの記事もよろしければ参考にしてください。 React以外の選択肢として、AngularやVue.jsもありならば、こちらの記事も参考にしてください。 無料テンプレート react admin マテリアルデザインのテンプレートです。グラフやモーダルなどコンポーネントはあまり実装されていません。ライセンスはMITです。 けっこう更新しているみたいなので、今後に期待です。 デモダウンロード Antd Admin 白を基調とした明るい画面デザインが素敵なテンプレートです。中国製のようです。ライセンスはMITです。 デモダウンロード React Blur Admin BlurAdminの名前の通り、ぼかしのかかったグラデーションの素敵なデザインのテンプレートです。ダッシュボード
とほほのReact入門 - とほほのWWW入門
React とは CDN インストールとアプリケーション作成と実行 ReactDOM.render() コンポーネントを定義する プロパティを渡す JSX の書き方 リストを表示する ステータスを変更する ルーティングでページを切り替える ユーザ管理画面サンプル リンク React とは SPA(Single-Page Application) を実現する JavaScript フレームワークの一つです。 Angular, Vue.js とよく比較されます。 Facebook 社によって開発され、Facebook の Web サイトでも利用されています。 2020年4月現在の最新バージョンは 16.13.1 です。 MITライセンスで公開されており、商用利用可能です。 JavaScript の中に直接 HTML/XML を記述する JSX という技術を利用しています。 JavaScript
GitHubリポジトリで8000スター獲得、人気OSS「Boostnote」オープンソース化の軌跡 - エンジニアHub｜Webエンジニアのキャリアを考える！
GitHubリポジトリで8000スター獲得、人気OSS「Boostnote」オープンソース化の軌跡 GitHubリポジトリで8000スターを獲得しているプログラマ向けノートアプリのBoostnote。グローバルな開発コミュニティを築き上げた経緯についてインタビューしました。 Boostnoteというアプリをご存知でしょうか？ こちらはElectronで作成されたデベロッパー向けのノートアプリ。実は海外ではとあることでとても有名なアプリなのです。 なんと企業が事業として開発しているアプリにもかかわらず、コードをすべてオープンソースとしてGitHub上に公開しているのです。海外を中心に注目度は高く、世界中のコントリビューターがBoostnoteに携わっています。現在、GitHubのスター数が8000を超える人気のOSSとなっています。 Boostnoteはどのようにグローバル展開とし、どのよう
Redux-Observable Epic vs Redux-Saga: 何が問題なのか | POSTD
まず、このバトルに関わるには、JavaScriptとReduxの知識が必要です。知識がない人には、このブログ記事は向いていません（話についていけませんから）。残りの人は、一緒に難題を解決していきましょう。 Reduxには、副作用を取り扱うための所定の方法がありません。そう、これは 祝福であると同時に呪いでもあります。 最善策はこれだ、という結論がまだ出ていないので、かなりの数の選択肢が流布しています。SlackやNetflixのような大きな会社がRxJSと Redux-Observable を選んだのに対して、Reactネイティブの開発者たちの間で人気が高いのは Redux Saga です。 うわべを取り繕った記事を書くつもりはなく、道理をわきまえるつもりもありません。私は、この対決を「戦い」に持ち込むつもりなのです。thunkで満足していて、好意的な意見を期待している人は、読まない方がい
【react】ログイン・ログアウトを実装する方法メモ - とりあえずphpとか
はじめに 今回やりたかったことはよくあるログイン・ログアウトの実装です。 で、react-routerを使っての実装方法が以下にありました。わかりやすかったです React Routerで認証を制御する方法 - Qiita ログインしているかどうかの判定はstoreにuser.sessionを用意してこれに値がセットされていればログインしているとみなす。 本来であればクッキーにtoken等をセットしてそれがあれば自動でログインするような形がいいのかな 今回はとりあえずなので、毎回ログインさせる形で ディレクトリ構成は以下のような形で実装してみました . ├── actions │ └── user.js ├── reducers │ └── user.js ├── components │ ├── app.js // 全画面共通のコンポーネント │ ├── auth.js
React+Redux アプリに Google Sign-In を組み込んでみた - IT探検記
React+Redux アプリに Google Sign-In の機能を組み込んでみました。 はじめに Google Sign-In とは、Googleが提供している認証系ツールの総称である Google Identity Platform のツールの1つで、スマホアプリやWebアプリの認証をGoogleアカウントでできるようにするものです。 参考： itexplorer.hateblo.jp React, Redux, Google Sign-In という組み合わせだと、さすがに情報が少なく、結構試行錯誤しましたが、最終的にはなんとか方法が見つかりました。 準備 まずは、Google API Console でクレデンシャルを登録する必要があります。 以下のページで説明されています： Creating a Google API Console project and client ID
Reactでpost後のレスポンスを使ったページ遷移をredux-sagaとreact-routerで行う方法 - Qiita
概要 post後のパラメータidを取得して、redux-sagaを呼び出すとき、(id) => {this.props.history.push(/items/${id})としてcallbackをaction.payloadで渡して、実行すればOK 使いどころ 新規アイテム作成ダイアログにおいて、アイテム名入力後に自動的にアイテム表示画面に遷移させる ユーザー登録画面において、ユーザー作成後に自動的にユーザー情報表示画面に遷移させる 実現したいページ遷移イメージ （今回のコードに色々くっつければ、こんな感じのページ遷移になるよというイメージ） 環境 react-router: 4.2.0 react-router-dom: 4.2.2 redux-saga: 0.16.0 react-routerでhisotry.pushができるようになっている。参考 （サーバー側はrailsのwebpa
『実践 Redux Saga』 – React, FLUX, Redux, Redux Saga – // 第21回社内勉強会 #sa_study
こんにちは。エンジニアの吉田です。 2017年1月27日（金）に開催された社内勉強会#21で、『実践 Redux Saga』というお話をしたのでブログにもまとめたいと思います。 スライドはこちら。（Slideshareにアップするとフォントが欠落してイマイチな見た目になってまう…） 要約 プロダクションの案件でRedux Sagaを導入したのでそのお話 Redux Sagaの話の前に、jQuery、React、FLUX、Redux をおさらい Redux Sagaを使うと非同期処理を取り扱えるが、その反面、データフローが複雑になる System&User Action と Reducer Action を分けることで複雑性を軽減した Action の命名規則、React, Redux, Redux Saga の責務を明確にするガイドラインをつくった みなさまがより快適なフロントエンドライフ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Build and implement a single sign-on solution
RxJS + Redux + React = Amazing
