サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
レイングッズ
blog.mitsuruog.info
react-native で Swift の Native module を呼び出す方法です。基本的には下の Blog のやり方を真似ています。 Swift in React Native - The Ultimate Guide Part 1: Modules 紹介する内容は次の通りです。 簡単な Counter を Native Module で実装した Native Module の呼び出し Native Module から Constants を受け取る Native Module からの Callback を扱う Native Module からの Promise を扱う Native Module からの Event を扱う 対象のバージョンは次の通りです。 react-native: 0.57.8 Swift: 4.2.1 Xcode: 10.1 プロジェクト全体のコードは
この記事はVisual Studio Code Advent Calendar 2019 - Qiita8 日目の記事です。 現在、仕事で使っている VS Code の LiveShare を使ったリモートペアプログラミングについて紹介します。 ちなみに利用している技術スタックは、「React+TypeScript」のフロントエンドチームの事例です。 目次 背景 なぜ PullRequest をレビューがジュニア育成に機能しなかったのか? 自分がやりたいペアプログラミングの形を探る Live Share とは 実際のリモートペアプログラミングのやり方 まとめ 背景 なぜ現在この方法を採用しているかというと、次のような理由がありました。 ジュニアのフロントエンドが参画したため、育成する必要がある PullRequest をレビューという従来の形を採用してみたが、育成効果があまりないことにすぐ
TypeScript を使っていると頻繁に見かけるジェネリクス(以下、Generics)。 別の言語などで同様の概念を経験したことがある人であれば理解するのに苦労しないと思うのですが、最初はやはり難しい概念だと思います。 先日同僚に Generics を使ったユーティリティの作成をおねがいしたのですが、これが良い Generics のユースケースだと思ったので、チュートリアルっぽくしてみました。 お題 次のように配列に対して値をマージするユーティリティ関数(merge)を作成してください。 merge(array, newValue); 渡されるarrayには次のような構造のUserとCompanyの 2 つのクラスがあり、それぞれidプロパティを持っています。 class User { id: number; firstName: string; } class Company { id
タイトル長くてすみません。 ひと昔前までは、react-create-appで作成したプロジェクトの webpack.config を上書きするには、ejectするしか方法がなかったのですが、現在は react-app-rewiredを使うことで上書きが可能です。 この方法を使った場合、react-create-app が提供するツールの動作保証対象外となります。つまり、これ以降発生した問題は自己責任で解決しなければなりません。ご注意ください。 紹介する内容は、こちらの Github で見ることができます。 https://github.com/mitsuruog/create-react-app-typescript-rewired-styleguidist react-app-rewired を導入する 基本的にはリポジトリにある README.md の通りに導入します。より具体的な例
TypeScript の小ネタです。 TypeScript では次のように string を Enum として定義することができるのですが、string を Enum に代入するときにエラーとなってしまうため、今まで少し使いにくいと思っていました。 今日はその認識を改めます。 enum Direction { North = "North", South = "South", East = "East", West = "West", } let direction: Direction; direction = Direction.North; direction = "North"; // Error Type '"North"' is not assignable to type 'Direction'. direction = "AnythingElse"; // Error Ty
先日、参加したhtml5j パフォーマンス部 第五回勉強会 ― 改正民法債権法と非機能要求としての Web パフォーマンスの勉強会にて**「Synthetic Monitoring」**なる聞きなれない単語が出てきたので、学習のためこのブロクのパフォーマンスを 1 週間測定してみた話です。 勉強会の内容をみて「Synthetic Monitoring とは?」っと興味を持った方には、読むと雰囲気が伝わるのではと思います。 Synthetic Monitoring については、当日の竹洞さんの資料や動画を確認してください。 (Slide) https://www.slideshare.net/takehora/web-150634918 (Video) https://www.youtube.com/watch?v=R44_wzrkVMw 注意) この記事の内容は、Spelldata 代表取
TypeScriptのIndex Signature"{[key:string]:string}"で特定の文字だけのIndexを扱う TypeScript の小ネタです。 TypeScript で String をキーにしてオブジェクトにアクセスする場合、次のような Type を定義します。 const user: { [key: string]: string } = { name: "mitsuruog" }; console.log(user["name"]); // => mitsuruog ただ、この String でアクセスする部分をもう少し型安心にしたいですね。 String のキーのセットで Type を作成して、Index Signature に適用できると型安心にできそうです。 試しに UnionType を使ってみます。 type Index = "name" | "
よく忘れるシリーズ。 AWS の特定の S3 バケットにだけアクセスできる IAM ユーザーを作る方法です。 想定される用途 自分の場合、最近のフロントエンドは SPA を作ることが多いので、フロントエンドのコードを Webpack で bundle にビルドして S3 へデプロイします。 この辺りは CI サービスを利用して自動化しているのですが、その時に AWS の IAM を作成し、そのアクセスキーを使って特定の S3 バケットにデプロイするようにします。 特定のバケットにだけアクセスできるようにしているのは、不慮の事故で他の S3 バケットに影響を及ぼさないためです。 IAM ユーザーの作り方 IAM ユーザーの作り方は至って単純で、AWS のコンソールにログインして IAM ユーザーを作成すればいいです。 ところが、特定の S3 にのみアクセスできるようにするためには、カスタムポ
この記事はReact.js その 2 Advent Calendar 2018 8 日目の記事です。 半年くらい前に、React + Redux + redux-observable + TypeScript の実践的サンプルという記事を書いたのですが、Redux の action と reducer の部分の型があまりうまく定義できてなかったので、個人的 � に課題だと感じていました。 今回はその部分をtypesafe-actionsを使って型安心に実装する方法の紹介です。 プロジェクト全体のコードはこちらを参照してください。 mitsuruog/react-redux-observable-typescript-sample: A sample application for React + redux-observable + TypeScript 以前のコード 以前のコードは Ac
プライベートで CSS を教える機会があるのですが、CSS に関しては特に苦手にしている人が多く、「どうやったらそうなれますか?」という質問をよくもらいます。 そこで普段あまり考えたことがなかったので、ちょっと考えてみました。 その中で感じたことは、自分には見えているものが、他の人には見えていないということでした。 いくつかキーとなる視点がありそうなので、シリーズ化してみます。 今回は「レイアウト」について。 はじめに 今回は次のような、コメントフィード風の UI を作るケースを想定して順に説明していきます。 ちなみに自分の場合、作成時間は 15 分くらいでした。 コードはこちらで全て見ることができます。 https://codepen.io/mitsuruog/pen/dmZBLM?editors=1100 CSS が苦手な人にやらせた場合、自分が期待した通りにはならないケースが多いと思
TypeScript の Enum を使った小ネタです。 TypeScript の Enum を使っていると、Enum の値やメンバー名以外に、何かもう一つ値を追加したいことありませんか? 自分の場合は、多言語化しているアプリケーションなどで、Enum の値に対するテキストを表示する際に、Enum にメッセージキーを割り当てたいことがよくあります。 今回は、Enum に関数を追加してメッセージキーを返却できるようにする方法の紹介です。 Enum の基本的な使い方 次のような Enum があったとします。 enum Type { Normal, // 0 Special, // 1 } 基本的な Enum の使い方は、Enum のメンバーを指定して値を取得するか、Enum の値を指定してメンバー名を取得するかです。 // Enumのメンバーを指定して値を取得する console.log(Ty
新規プロダクトで「React + Redux + redux-observable + TypeScript」を使ってみました。 割と良く仕上がったので、全体アーキテクトを単純にしたサンプルを作ってまとめてみました。同じような構成を考えている人は参考にしてみてください。 対象者は、React と TypeScript(もしくは Flux)経験者です。初歩的な部分は割と割愛して説明しています。 続きがあるので、読み終わったらこちらも見てみてください。�2019 年 1 月段階の最新です。 typesafe-actions を使って型安心な Redux Store を実装する | I am mitsuruog デモ 作ったものはこちらの Github でみれます。 mitsuruog/react-redux-observable-typescript-sample: A sample appl
AngularJS への改宗が完了した「mitsuruog」です。 AngularJS に限らず Single page application(以下、SPA)を構築した場合、認証(Authenticate)とその後の WebAPI での証明情報(Credential)の受け渡し方法について最近悩んでいます。 調べていたら Json Web Token(以下、JWT)を利用した方法がCookies vs Tokens. Getting auth right with Angular.JSで紹介されていて、試してみると結構使えそうでしたので紹介してみます。 目次 1.WebAPI での証明情報の受け渡しの重要性 2.Token を利用した証明情報の受け渡し 3.実現するためのコア技術、JWT(Json Web Token)とは 4.Token を利用した場合の課題など 秘密鍵の管理 リフレッ
最近、割と耳にするようになってきた、Webpack の bundle.js のサイズを減らす話。自分でもやってみたので、結果を紹介します。 本当はもう少し減らせるかもねー はじめに 現在の使っているライブラリはこんな感じです。 React Redux + redux-observable ちなみに 2 つのアプリケーションがあるので、bundle は 2 つに分けてます。 最初の状態はこちらです。サードパーティのライブラリ(node_modules)のサイズが大きいことがわかります。 File sizes after gzip: 629.89 KB build/static/js/organization.js 595.88 KB build/static/js/applicant.js 49.28 KB build/static/css/organization.css 49.26 KB
今日は Redux ユーザーが最もハマるポイントだと個人的に思っている、state の不正変更とその検出方法について紹介します。 ちなみに React での話ですが、他のフレームワークでも同じ事なんではと、勝手に想像しています。 Redux の state 変更検知の仕組み まず最初に Redux の state 変更検知の仕組みについておさらいします。概要だけ紹介するため、詳細は公式ドキュメントも合わせて参照してください。 Immutable Data - Redux https://redux.js.org/faq/immutable-data Redux の state の変更検知には「shallow equality checking」という仕組みを使っています。 shallow equality とは、あるネストしたオブジェクトがあった場合、全ての値をチェックしているのではなく、
React の Higher order component(以下、HOC)を TypeScript で作る方法の紹介です。 作り方を探したところ、こちらの記事がほぼ完璧だと思ったので、本人に許可をもらってゆるく翻訳しながら紹介することにしました。 (完全な翻訳を目指しているわけではないので、細かいニュアンスまで気になる方は英語の記事を直接読んでください。あと少しコードは自分好みに変えてます。) React Higher-Order Components in TypeScript made simple https://codeburst.io/react-higher-order-components-in-typescript-made-simple-6f9b55691af1 本人によると、この記事は HOC の作り方について同僚とディスカッションした内容をまとめたものだそうです。同
react-intlを使って React アプリを国際化してみたところ、結構良かったので紹介します。 tl;dr react-intl を使った React アプリの国際化方法 react-intl を component だけではなく、utility function として使う方法 react-intl とは react-intlは、React アプリの国際化を支援するための Component と幾つかの API を提供する、Yahoo 製のライブラリです。 メッセージだけではなく数値(通貨も含む)、日付など幅広く対応しています。 今回は、メッセージの部分に特化して紹介します。 基本的な使いかた 基本的な使い方は、次の 3 ステップです。 国際化する context を設定する 言語設定ファイルを設定する(もし必要であれば) react-intl が提供する Component(Fo
TypeScript を使っていると、結構必要になる型定義ファイル。 型定義が存在しなかったり、古かったりするライブラリを使って、苦労した経験があるひとは多いのではないでしょうか。 今回は、DefinitelyTyped にコントリビュートする機会が最近増えたので、個人的な手順をまとめておきます。 はじめに まず、今回は新しい型定義ファイルを作成するケースを想定しています。 コントリビュートの仕方については、まず公式ドキュメントをさらりと眺めておいてください。 ただ、結構わかりにくいと思うので、これから順を追って説明していきます。 https://github.com/DefinitelyTyped/DefinitelyTyped それから型定義が存在しない事を確認しましょう。 https://microsoft.github.io/TypeSearch/ 事前準備 型定義の Genera
たまに見るuncontrolled input関連の警告についての小ネタです。 知っていると原因がすぐわかるのですが、知らないと結構デバックに時間が掛かる面倒な警告です。 まず、React の Form 関連コンポーネントの考え方にはcontrolledとuncontrolledの 2 つがあります。 簡単に両者の違いを説明すると、値が React の state で管理されているかどうかです。 controlledの方は、値が React の state で管理されていて、setStateしないと変更できません。 それに対してuncontrolledは、値が React の state で管理されていないので、従来の方法で値を変更できるのですが、lifecycle イベントなどの React の様々な恩恵を受けにくくなります。 で、本題ですが。 React でフォームがある画面を開発して
自分はCODEPREPというオンラインプログラミング学習サービスをやっているのですが、今年の 2 月に React と TypeScript を使ってフロントエンドを再構築し、半年間サービスを走らせてみた結果について振り返ってみたいと思います。 はじめに CODEPREPは月間で 50 万 PV 以上ある Web サービスです。 そのため、それなりの事態は発生するだろうと思い、フロントエンドにはエラー監視を導入して、ユーザーのブラウザ上で何かエラーが発生したら、直ちに Slack に通知が来て対応できるような万全の準備をしていました。 しかし、自分が担当して来た Web サービスの中では、もっともユーザーに頻繁に使われているにも関わらず、稀に見る安定稼働のサービスとなっています。 今回は、選定したフロントエンドの技術スタックのどの辺りが良かったのか、少し振り返りたいと思います。 TypeS
4 月から Web サービス会社にフロントエンドエンジニアとして Join しました。 新卒で就職して以降、多くの時間(※)を SI として過ごしてきたので、今回は大きなチャレンジとなりそうです。 ちなみに、この文書は 5 年後の自分に当てたポエムです。 (※)途中、料理人と家具職人を 4 年ほどやっていました。 5 年後のなりたい自分になるために転職を決意した 御年 39 歳。 昨年の 5 月に転職したばかりなのですが、振り返ると「 人は何のために働くのか? 」ということで悩み続けた 1 年でした。 悩んだ末の結論は、年齢や立場で左右されることなく、純粋に「やりたいことをやり続ける」というものでした。 前回の反省から学んだことは、やりたいことをやり続けている方が幸せで、幸せを感じていないと周囲にいい影響を与える続けることはできないということでした。 私は、周囲を幸せにするため、あえて自分
github private repository も無料で CI テストできるのでwerckerを使うことが多いです。 プロジェクト立ち上げ時に設定した後、安定すると放置になる設定周り。ついつい忘れてしまうので、自分用メモ。 フロントエンドエンジニアでも CI テストできる最小構成です。 ベースは Node 用の基本構成 まず、自動テストは Node.js で行うようにしていると思うので、Node 用の基本設定をベースにするのがいいと思います。 wercker - docs - Nodejs box: nodesource/trusty # Build definition build: # The steps that will be executed on build steps: # A step that executes `npm install` command - npm-
小ネタです。 最近、真面目に aws を触っていて、今更ながらAmazon Web Services クラウドデザインパターン 設計ガイド 改訂版を読み始めました。 本書を読んでみると、AWS について初めて知る機能も多く、本当に AWS を利用してシステム構築するためのバイブルのような本だなと感じました。 (もっと早く読んでいれば・・・) 今回は、その中で S3 上のセキュアな環境下にある任意のオブジェクトに対して、「期限付き URL(pre-signed URL)」を発行してアクセスさせる方法を試してみました。 やってみる では、早速やってみます。 私は noder なので、node.js 版の aws sdk を利用して行います。 まず、S3 上に「Bucket」を作成して、任意のファイルをアップロードしておきます。 S3 上にアップロードしたファイル(オブジェクト)には、 アクセス
仕事が忙しくアドベントカレンダーシーズンに乗り遅れてしまいました。数年ぶりに平穏な 12 月を過ごしております。 と思ったらJavaScript その 2 Advent Calendar 2015 - Qiitaの 7 日目が開いていたので急遽参加 w ところで、Javascript のスタイルガイドでは割と有名な Airbnbの日本語訳をしているのですが、最近本家のスタイルガイドが ES6 対応していたので、日本語訳の方もアップデートしました。 Javascript-style-guide スタイルガイドを ES6 にアップデートする過程で、私なりに ES6 でより良いコードを書くために気づいた点、注意する点などピックアップして紹介したいと思います。 この記事は、ES6 でより良いコードを書きたい人向けの ES6 入門です。 ES6 での良いコードとは? ES6 については大きな変更があ
D3.js を使ってタイムチャートを作成してみました。 初めて実践投入したこともあり、いろいろ苦労した点などあるので、振り返ってまとめてみます。 D3.js まだまだ奥が深いので、私が紹介する以外にもっといい方法があると思います。あくまで自分用のメモだと思ってください。 利用している D3.js は v3 系です。 サンプル Codepen にサンプル作りました。 TimeChart 苦労したこと 一定期間の時間軸を作成したい 時間軸のラベルを一定間隔にしたい 時間軸のラベルフォーマットしたい 軸のメモリ線(?)を消したい 画面サイズに応じて軸ラベルを回転させたい カテゴライズされた軸を作りたい カテゴライズされた軸のラベルを別なものにしたい ラベルの文字が長い場合に改行したい 軸の domain 範囲を超えたデータがある場合に表示させない window がリサイズしたら Chart を再
AngularJSでinput[type=date]にデータバインドしようとしてError: [ngModel:datefmt]で怒られて困っている人向けの小ネタ タイトルの通りです。割と遭遇している人いるんじゃないかなと勝手に想像しているんですが、あまり情報ないので書いてみます。 ユースケース的には、WebAPI アクセスで日付を JSON シリアライズしたものを受け取って、input[type=date]の ng−model に直接データバインドするような想定です。 サンプルコード (適当に書いているので動かなかったらすみません。雰囲気だけでも。) WebAPI 側から JSON データ { "id": 1, "name": "ググレカス", "createdAt": "2015-02-05T00:00:00.000Z" } AngularJS の DataService 的コード(今
次のページ
このページを最初にブックマークしてみませんか?
『I am mitsuruog』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く