Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

先日、オプトからFeed Terminal というツールがリリースされましたので、主にフロントエンドについての大まかな全体像と技術的な拘りをご紹介しようと思います。 あいさつ Feed Terminal とは フロントエンド設計 管理画面の要件 アーキテクチャ選定 チームへの共有 実装・設計の中身の紹介 全体像(package.json) TypeScriptとの付き合い方 reduxの使い方 開発時の動作確認の仕方 テストやlintとの付き合い方 まとめ あいさつ こんにちは。uryyyyyyyです。 社内では遊撃手的ポジションにおりまして、今回のReact & TypeScript案件であるFeed Terminalでは、フロントエンドの基盤設計やUIデザインなどを担当していました。 Feed Terminal とは Feed Terminalとはデータフィードマネジメントツールと呼ば
自分はCODEPREPというオンラインプログラミング学習サービスをやっているのですが、今年の 2 月に React と TypeScript を使ってフロントエンドを再構築し、半年間サービスを走らせてみた結果について振り返ってみたいと思います。 はじめに CODEPREPは月間で 50 万 PV 以上ある Web サービスです。 そのため、それなりの事態は発生するだろうと思い、フロントエンドにはエラー監視を導入して、ユーザーのブラウザ上で何かエラーが発生したら、直ちに Slack に通知が来て対応できるような万全の準備をしていました。 しかし、自分が担当して来た Web サービスの中では、もっともユーザーに頻繁に使われているにも関わらず、稀に見る安定稼働のサービスとなっています。 今回は、選定したフロントエンドの技術スタックのどの辺りが良かったのか、少し振り返りたいと思います。 TypeS
RailsエンジニアがReactを始めてSSRとReduxを導入するまで Roppongi.rb #3 "Rails x Frontend-Tech" 自己紹介 github.com/gfx BitJourneyでKibelaを開発 Speee, Inc. で技術顧問をしてる Reactは現職で初めて触った(2016年8月~) 今日の話 Kibelaのフロントエンドの話です。 読みはキベラ Markdownで書けて、フロー情報(Blog)とストック情報(Wiki)を区別して整理できる情報共有ツール これまでの話 新規Railsアプリに小さく導入するReact // Speaker Deck (dex1t, 2016/09/05) 小さく導入して学びながら開発を進める ⭕ Interactive UI componentをReactで&jQueryも併用 ❌ viewをすべてReactで実装
以前に作成していた「Node.jsによるSNSアカウント認証と二段階認証」(以下WST)をReactでリプレースしました。どうして?元々は独自のフレームワークで実装していましたが、あるプロジェクトでReactを使う機会があり、とても気に入ったからです。React化そのものは数日で完了。しかしそこで終わりではありませんでした。ついでだからSPAにしよう、いまどき必要ないかもだけど初期表示で一瞬画面が表示されないのも気になるからサーバーサイドレンダリング(SSR)もやっておくか、という具合にとうとう3カ月以上の時間を費やすことになってしまいました。 「ソースコード」 web service template 4.4.1 「デモ」 https://www.printf.jp:8443/ 「機能一覧」 メールアドレスとパスワードでのログイン SNSアカウント(Twitter、Facebook、Go
この記事を書いたのは2016年のことでした。それから2年。 いつの間にか日本語チュートリアルが消えたし、結構未だにいいねを押してくださるので更新することにしました。(2018/2/2) reactの本家ドキュメントが日本語化されたため更新します。 (2019/4/11) はじめに タイトルみたいなことを考えていました。 実際補完が効くのはかなり有効でしたが、チュートリアル通りにいかない点が多々出ました。 結局色んな所を見るはめになりました でも総合してTypeScriptに向いているフレームワークだと思ったので詰まったところと解決方法を纏めてみることにしました TypeScript自体も学習コストが凄く低くて(ES2015 + 型)素敵だったのでいいと思いました。 追加で使うツール類 なし 今なら以下で試せます。 stackblitz オンライン版VisualStudioCode的な(コー
問題提起 React始めたいですよね! でも今時、型のない言語とか使いたくないですよね! TypeScriptコンパイラもjsxに対応したし、Angular2でもTypeScriptが標準っぽいし、 とりあえずこれから始めるならTypeScriptでしょう。 ということで、個人的に良いのではと考えている技術スタックをまとめてみました。 内容が膨大なのでシリーズにしています。 環境・技術スタック 基本的には以下のように最新に追従していきます。 NodeJS 7.X~ React 15.5 Redux TypeScript 2.3 wepack 2.5 express(開発用の仮サーバーとして) karma (他、各種ライブラリを都度見ていきます) 記事 導入編 Reactで普通のSPAを作るために最低限必要だと筆者が考える構成を順を追って説明していきます。 React + TypeScrip
概要 「Opt Technologies Advent Calendar 2016」の一日目です。 最近とあるシステムを社内向けリリースしたので、どのように進めたかと実装について書いていきます。 (実際のコードは見せられませんが、参考用の過去記事へのリンクを用意しているので同じように設計で組むことはできるかと思います。) 作ったものの要件的な BtoBな管理画面系アプリ デザイナ不在 進め方は自由だがスケジュールしっかり守りたい フロント実装者は、自分以外は外部のフロントエンジニアと、社内のGUI未経験エンジニア 開発部内のKPIにテストカバレッジがあり、フロントでもカバレッジ取りたい 進め方 package.jsonの抜粋 全体像を掴めるかと思い、最初にpackage.jsonを貼っておきます。 後でそれぞれのライブラリやタスクについて触れていくので、なんとなく見て頂ければと思います。
TypeScriptとReactの勉強がしたかったので、 React Tutorial を TypeScript で書いてみました。 ajaxのところを試したかったのでサーバからのデータの取得のところまで ajaxを扱うライブラリはjQueryではなくsuperagentを使用 Markdown化は省略 タスクランナーはgulp githubにソースを置きました。 https://github.com/hushin/react-tutorial-typescript 作業コマンドメモ npm init gibo Node >> .gitignore npm install react --save dtsm init dtsm install react react-dom superagent --save tsc --init # edit tsconfig.json # add ts
React を使って TODO サンプルを TypeScript で書き直したので、 今度はさらに Redux も使ってみる。 まずは Redux の型定義ファイルをインストール。 tsd query redux --action install --resolve tsd query react-redux --action install --resolve 特にひっかかることなく、スンナリと実装できた。 /// <reference path="typings/tsd.d.ts" /> import * as React from "react" import * as ReactDOM from "react-dom" import { createStore, combineReducers, Dispatch } from "redux" import { Provider,
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く