noah.plus

Renderless Componentでさらにコンポーネントの再利用性を高める(Vue.js)

2018-11-12

Renderless Componentとは、その名前の通り「表示するもの」を持たないコンポーネントのこと。Vue.jsの単一ファイルコンポーネントに当てはめると以下のようになる。 template → なし script → あり style → なし つまりHTML…

Scoped Slot でコンポーネントの再利用性を高める(Vue.js)

2018-11-04

Vue.jsのScoped Slotについて。 スコープの基本 まず、Vue.js…

速習シリーズ『速習TypeScript』でTypeScriptを速習

2018-11-04

以前 『速習Vue.js』でVue.jsをおさらいした が、その時に同じシリーズのTypeScriptの本も見かけたのであわせて読んでみた。 速習TypeScript: altJS…

エンジニアインターンを始めて1週間が経ちました

2018-10-21

先週の金曜日から、スマートキャンプというスタートアップでエンジニアインターンを始めました。最近CMもやっていたりした Boxil というサービスが有名な会社です。 だいたい週4で朝から晩までやっていく予定です😇 来年の…

apollo-cache-redux を使って Apollo Client を Redux に統合する

2018-10-21

apollo-cache-redux を使って、Apollo Clientのキャッシュ機能そのままに Redux に統合する。 rportugal/apollo-cache-redux…

ref と v-if でエラー Cannot read property … of undefined(Vue.js)

2018-10-21

Vue.jsで を使ってフォームから値の取得をしつつ、 で要素の表示・非表示を切り替えてるとエラーがでるので解決方法をまとめておく。 再現 input要素を持つ子コンポーネントを で参照 子コンポーネントを で隠す 子コンポーネントのinput…

速習シリーズ『速習Vue.js』でVue.jsを速習

2018-10-21

インターン先でVue.jsを使うので速習してみた。 速習Vue.js 速習シリーズ | 山田祥寛 日本で一番売れているらしいJavaScriptの本 『JavaScript本格入門』 と同じ著者ということで、安心感が大きい。 目次は以下の通り。 Part…

複数の Action Creators を bindActionCreators() でまとめてバインドする(React/Redux)

2018-10-07

状況 : と という2つの action creators があるとき、これらをまとめて に割り当てたい。 で複数の action creators をバインドしたいときは、以下のようにスプレッド演算子を使って1つのオブジェクトにまとめる。 action…

エラー「Reducer returned undefined during initialization」(React/Redux)

2018-10-07

React/Reduxを使って開発をしたときに以下のようなエラがー発生した。 Reducer “searchState” returned undefined during initialization. If the state passed to the reducer is…

Expoを使ったReact Native開発でReduxのデバッグをする

2018-09-30

Expoを使ったReact Native開発で、Reduxのデバッグを行う方法について。 React Native Debugger にReduxのデバッグ機能があるのでこれを使う。 jhen0409/react-native-debugger Mac…

Re-ducksパターン:React + Redux のディレクトリ構成ベストプラクティス

2018-09-30

Re-ducks というディレクトリ構成のベストプラクティスについてまとめる。Re-ducksパターンを使うことで、React + Redux を用いた開発がよりメンテナンスしやすいものになる。 Ducks パターン 名前からもわかるように、Re-ducks は Ducks…

JavaScriptパターン「オブザーバ」について詳しくみる

2018-09-23

オライリー『JavaScriptパターン』の第7章で紹介されているデザインパターンのうちの一つ、「オブザーバ」パターンについてみていく。 本で紹介されているデモは以下のURLに公開されている。 Obserber | JSPatterns.com…

オライリー『JavaScriptパターン 優れたアプリケーションのための作法』を読んだ

2018-09-22

ちょっと放置気味だったが図書館への返却期限が近いので読み切った。返却日駆動読書、アリだと思います。 以下、印象的な部分についてまとめた。 ・必須パターン 単独var…

「create を呼び出す権限がありません」Google Apps Script

2018-09-16

FormとSpreadsheetを連携させようとしたとき、一番最初にハマったエラー。 エラー「〇〇 を呼び出す権限がありません」 以下の画像のように、FormAppとSpreadsheetApp…

Google Apps Script 入門。コードを書き始める前に知りたかったことまとめ

2018-09-15

バイト先の塾ではかなり素朴な手法で名簿が作成されているので、Google App Script…

Essential PhoneでARCoreを使ってWebXR Device APIを試したかったが、試せなかった話

2018-09-09

結論 Essential PhoneでARCoreは動かない。したがってWebXR Device APIも試せない。ARCore対応端末一覧のリストにEssential Phoneが追加されるのを待ちましょう。 ARCore対応端末一覧: Supported Devices…

ダーツでスランプに陥ったときにチェックすべき5つの項目

2018-09-09

最近にわかにダーツ熱が再燃してきた。かつてダーツを真剣にやっていたのは…

テック系ポッドキャストおすすめ2018

2018-09-02

普段聴いているものの中からおすすめポッドキャストをまとめてみた。 Rebuild.fm https://rebuild.fm/ テック系ポッドキャストといえばやっぱりこれ。内容がとても幅広く、Rebuildを聞いていればテック業界のトレンドをだいたい追うことができる。hak…

デザインのための統合開発環境 Framer X を試す(Design Component、Code Component)

2018-09-02

前回の記事 に引き続き、Framer X を試していく。今回は Component について深掘りする。 Design Component と Code Component Framer X には2種類のコンポーネントが存在している。 Design Component…

デザインのための統合開発環境 Framer X を試す(Frame, Shape, Link, Scroll, Stack)

2018-09-01

Framer X を一言で言い表せば、 “An IDE for Design” 。ワイヤフレーム作成・ビジュアルデザイン・インタラクションデザイン・高忠実度のプロトタイプ作成など、多種多様なデザインをこのツール単体で行える。 公式ドキュメントでは “Framer X is…

Chrome Devtools の知っていると便利な機能まとめ

2018-08-31

Chrome Devtoolsはweb開発をする際には必ず使うものだが、意外と知らない機能がたくさんある。機能の存在を知らなかったために時間を無駄にしてしまう、ということも十分にありえるので備忘録も兼ねてまとめてみた。 ちなみに Chrome Devtools…

大阪旅行

2018-08-19

日記です。 2泊3日で大阪に行ってきた。メンバーは中学の友達…

クリエイティブコーディングのためのライブラリ、Pts.jsを触ってみた

2018-08-19

Pts.js というライブラリが人気らしいので触ってみる。 GitHub: Pts.js Pts.jsはビジュアライゼーションやクリエイティブコーディングのためのライブラリで、インタラクティブな点や図形を簡単に描くことができる。 このライブラリには「Space」、「Form…

WebAssemblyでDOMの物理シミュレーション(Google Codelabs)

2018-08-12

Google Developers Codelabsにあるチュートリアルの1つを触ってみた。 WebAssembly Physics and DOM objects (2018) このチュートリアルでは砂時計を作成する。物理シミュレーションの部分をWebAssembly(wasm…

JavaScriptでイミュータブルに配列を操作するメソッドまとめ

2018-08-10

Reactでアプリケーションを作っていくときなど、純粋な(副作用のない)関数を最大限使うことが推奨される。 純粋関数(Pure Function…

Reactとdeck.glでGoogle MapタイムラインのData Visualization

2018-08-05

モバイル版Google Mapにはタイムラインという機能があり、自分がいつどこに居たのかという情報が常に蓄積されている。今回はUberが公開しているData Visualizationのためのフレームワーク、 deck.gl を使ってGoogle Map…

FirebaseとAMPでCDNをフル活用したWebサイトを作る(Google I/O 2018)

2018-08-04

Google I/O ‘18ですごいと思ったセッションを振り返る。(実際ほかの動画も全部すごい) このセッションではタイトルの通り、FirebaseとAMPを駆使して高速なWeb…

Essential Phone PH-1 レビュー

2018-07-29

このあいだのAmazon prime dayでEssential Phoneを思わず買ってしまった。 だいたい1年前に発売されたフラグシップモデルが$250に……。もともとの3分の1の値段での投げ売りに、スマホ業界の無常さを感じる。 さらにEssential…

アルバイト先でデザインスプリントを導入してみた

2018-07-26

デザインスプリント とは、すばやく意思決定をするための5段階のフレームワークのこと。 「理解」「スケッチ」「決定」「プロトタイプ」「決定」という…

Flutter Meetup Tokyo ♯3に参加してきた

2018-07-20

Flutter Meetup Tokyo #3が7月19日に開催された。 もともと補欠だったが、当日の昼過ぎに繰り上がりで参加できることになったので行ってきた。 会場は渋谷ヒカリエにあるDeNAのオフィス。窓からの眺めがとてもよかった。 今回のMeetupはYouTube…

ブログはじめました

2018-07-17

ブログを始めました。(3ヶ月ぶり2回目) 今年の…

noah.plus