はてなブックマーク

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 名古屋の大学でコンピュータサイエンスを専攻しているdaishin(@kawara_13)というものです。 今年の4月ごろから名古屋のoptimindという会社でインターンとして働いています。 今回、空間情報可視化アプリケーションの作成をしましたので、その過程を簡単にまとめたいと思います。 Optimindについて https://www.optimind.tech/ 「世界のラストワンマイルを最適化する」をミッションに掲げ、ラストワンマイルの物流ルート最適化を目指す名古屋大学発のスタートアップ企業です。 プロジェクトについて

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

はじめに 待ちに待った(?) Suspense for Data FetchingがExperimentalとして先行公開されました。 https://reactjs.org/docs/concurrent-mode-suspense.html React.Suspense自体は以前からあり、Data Fetchingについてはどういうものになるか憶測していたのですが、その憶測を上回る状態になって驚きつつ期待もしています。 本投稿では思ったことを雑多に書いていきます。 Render-as-You-Fetch React Suspenseは仕組み自体は簡単（promiseをthrowできるだけ）なのですが、それによってコーディングパターンは大きく変わります。それがRender-as-You-Fetchというパターンで紹介されています。Suspenseを使う上で、必ずしもこのパターンに従う必要

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

はじめに 初めてQiitaに投稿させていただきます。沖縄で開発エンジニアをやってます。 半月ほど前から、独学でNuxt.jsとFirebaseを同時に触りはじめました。 これまではDjangoを利用した所謂クライアントサーバモデルのAPI開発がメインでしたので、Firebaseを触りはじめてすぐ 「サーバサイドレンダリングYABEEEE」 「CLIで一発デプロイなにこれ未来GOISUUUU」 と虜になってしまいました。 ただ、基本的なアーキテクチャ（NuxtによるSSRと、Firebase Functionsの仕組み）をいまいち理解していなかったため、ユーザログイン状態の管理をどうすれば良いかで10日ほど悶々としておりました。 Qiitaその他の諸師匠方の投稿を穴があくほど読みながら、行ったり来たりでようやくベストプラクティスらしきものに辿り着いたため、微力ながら少しでも同志諸氏に還元でき

はじめに React 16.8でhooksが導入されましたが、Suspense for data fetchingやreact-cacheが登場するまでは、データ取得のベストプラクティスは曖昧です。しかし、キャッシュさえ重要でなければuseEffectで比較的簡単にFetch APIのフックを実装することができます。 実装 import { useEffect, useReducer } from 'react'; const initialState = { loading: false, // データ取得中はtrueに設定される error: null, // データ取得でエラーになると設定される data: null, // データ取得結果が設定される }; const reducer = (state, action) => { switch (action.type) { cas

はじめに React 16.8から導入されたhooksにはuseEffectがあります。 詳細は公式サイトをまず参照しましょう。 useEffectを使うと、コンポーネントのレンダリングとは別に処理を書くことができます。useEffectでしばしば非同期処理を書くことがあります。例えば、サーバからのデータ取得の処理などがあります。 以下では、useEffectで非同期処理を書く場合の注意点を2つ紹介します。ケースによっては注意点はこの2つだけではない可能性が高いので、ご留意ください。 promiseを返さない useEffectに渡す関数の戻り値はcleanup関数です。 useEffect(() => { console.log('side effect!'); const cleanup = () => { console.log('cleanup!'); }; return clea

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

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

tm.main(function() { var app = tm.display.CanvasApp("#app"); // LoadingSceneを作成 // "hiyoko.png"をロードし、"piyo"という名前で登録する // ロード完了後、MainSceneへ遷移する var loadingScene = tm.ui.LoadingScene({ assets: { "piyo": "hiyoko.png" }, nextScene: MainScene }); app.replaceScene(loadingScene); app.run(); }); // メインシーン tm.define("MainScene", { superClass: "tm.app.Scene", init: function() { this.superInit(); // 事前ロードした画