vue-webpack-boilerplateを使ったときの例です。 vuejs-templates/webpack 単一ファイルコンポーネント（.vueファイル）では、以下のようにして簡単にSCSSが使える。 コンポーネントごとにスタイルを設定することでスコープが狭まりCSS…
Renderless Componentとは、その名前の通り「表示するもの」を持たないコンポーネントのこと。Vue.jsの単一ファイルコンポーネントに当てはめると以下のようになる。 template → なし script → あり style → なし つまりHTML…
Vue.jsのScoped Slotについて。 スコープの基本 まず、Vue.js…
以前 『速習Vue.js』でVue.jsをおさらいした が、その時に同じシリーズのTypeScriptの本も見かけたのであわせて読んでみた。 速習TypeScript: altJS…
先週の金曜日から、スマートキャンプというスタートアップでエンジニアインターンを始めました。最近CMもやっていたりした Boxil というサービスが有名な会社です。 だいたい週4で朝から晩までやっていく予定です😇 来年の…
apollo-cache-redux を使って、Apollo Clientのキャッシュ機能そのままに Redux に統合する。 rportugal/apollo-cache-redux…
Vue.jsで を使ってフォームから値の取得をしつつ、 で要素の表示・非表示を切り替えてるとエラーがでるので解決方法をまとめておく。 再現 input要素を持つ子コンポーネントを で参照 子コンポーネントを で隠す 子コンポーネントのinput…
インターン先でVue.jsを使うので速習してみた。 速習Vue.js 速習シリーズ | 山田祥寛 日本で一番売れているらしいJavaScriptの本 『JavaScript本格入門』 と同じ著者ということで、安心感が大きい。 目次は以下の通り。 Part…
状況 : と という2つの action creators があるとき、これらをまとめて に割り当てたい。 で複数の action creators をバインドしたいときは、以下のようにスプレッド演算子を使って1つのオブジェクトにまとめる。 action…
React/Reduxを使って開発をしたときに以下のようなエラがー発生した。 Reducer “searchState” returned undefined during initialization. If the state passed to the reducer is…
Expoを使ったReact Native開発で、Reduxのデバッグを行う方法について。 React Native Debugger にReduxのデバッグ機能があるのでこれを使う。 jhen0409/react-native-debugger Mac…
Re-ducks というディレクトリ構成のベストプラクティスについてまとめる。Re-ducksパターンを使うことで、React + Redux を用いた開発がよりメンテナンスしやすいものになる。 Ducks パターン 名前からもわかるように、Re-ducks は Ducks…
オライリー『JavaScriptパターン』の第7章で紹介されているデザインパターンのうちの一つ、「オブザーバ」パターンについてみていく。 本で紹介されているデモは以下のURLに公開されている。 Obserber | JSPatterns.com…
ちょっと放置気味だったが図書館への返却期限が近いので読み切った。返却日駆動読書、アリだと思います。 以下、印象的な部分についてまとめた。 ・必須パターン 単独var…
FormとSpreadsheetを連携させようとしたとき、一番最初にハマったエラー。 エラー「〇〇 を呼び出す権限がありません」 以下の画像のように、FormAppとSpreadsheetApp…
バイト先の塾ではかなり素朴な手法で名簿が作成されているので、Google App Script…
結論 Essential PhoneでARCoreは動かない。したがってWebXR Device APIも試せない。ARCore対応端末一覧のリストにEssential Phoneが追加されるのを待ちましょう。 ARCore対応端末一覧: Supported Devices…
最近にわかにダーツ熱が再燃してきた。かつてダーツを真剣にやっていたのは…
普段聴いているものの中からおすすめポッドキャストをまとめてみた。 Rebuild.fm https://rebuild.fm/ テック系ポッドキャストといえばやっぱりこれ。内容がとても幅広く、Rebuildを聞いていればテック業界のトレンドをだいたい追うことができる。hak…
前回の記事 に引き続き、Framer X を試していく。今回は Component について深掘りする。 Design Component と Code Component Framer X には2種類のコンポーネントが存在している。 Design Component…
Framer X を一言で言い表せば、 “An IDE for Design” 。ワイヤフレーム作成・ビジュアルデザイン・インタラクションデザイン・高忠実度のプロトタイプ作成など、多種多様なデザインをこのツール単体で行える。 公式ドキュメントでは “Framer X is…
Chrome Devtoolsはweb開発をする際には必ず使うものだが、意外と知らない機能がたくさんある。機能の存在を知らなかったために時間を無駄にしてしまう、ということも十分にありえるので備忘録も兼ねてまとめてみた。 ちなみに Chrome Devtools…
日記です。 2泊3日で大阪に行ってきた。メンバーは中学の友達…
Pts.js というライブラリが人気らしいので触ってみる。 GitHub: Pts.js Pts.jsはビジュアライゼーションやクリエイティブコーディングのためのライブラリで、インタラクティブな点や図形を簡単に描くことができる。 このライブラリには「Space」、「Form…
Google Developers Codelabsにあるチュートリアルの１つを触ってみた。 WebAssembly Physics and DOM objects (2018) このチュートリアルでは砂時計を作成する。物理シミュレーションの部分をWebAssembly（wasm…
Reactでアプリケーションを作っていくときなど、純粋な（副作用のない）関数を最大限使うことが推奨される。 純粋関数（Pure Function…
モバイル版Google Mapにはタイムラインという機能があり、自分がいつどこに居たのかという情報が常に蓄積されている。今回はUberが公開しているData Visualizationのためのフレームワーク、 deck.gl を使ってGoogle Map…
Google I/O ‘18ですごいと思ったセッションを振り返る。（実際ほかの動画も全部すごい） このセッションではタイトルの通り、FirebaseとAMPを駆使して高速なWeb…
このあいだのAmazon prime dayでEssential Phoneを思わず買ってしまった。 だいたい1年前に発売されたフラグシップモデルが$250に……。もともとの3分の1の値段での投げ売りに、スマホ業界の無常さを感じる。 さらにEssential…
デザインスプリント とは、すばやく意思決定をするための5段階のフレームワークのこと。 「理解」「スケッチ」「決定」「プロトタイプ」「決定」という…
Flutter Meetup Tokyo #3が7月19日に開催された。 もともと補欠だったが、当日の昼過ぎに繰り上がりで参加できることになったので行ってきた。 会場は渋谷ヒカリエにあるDeNAのオフィス。窓からの眺めがとてもよかった。 今回のMeetupはYouTube…
ブログを始めました。（3ヶ月ぶり2回目） 今年の…