はてなブックマーク

この記事はFirebase Advent Calendar 2020 11日目の記事です。 TL;DR FirebaseのFirestore,Functionsの動作検証にはEmulatorを活用するのが良い Emulatorを活用しても手動での検証は面倒くさいので、楽をするためにテスト自動化を取り入れた方が良い Firestoreのセキュリティルールテストは公式で紹介されているやり方一択。 FunctionsのテストもEmulatorを活用して可能だが、テストコードが複雑になり、実行時間も長くなりやすい。 設計コストの考慮が必要だが、ドメインロジックとFunctionsが関わるコードを分割し、よりテストをやりやすくする方法もある。 はじめに 最近Firebaseを活用した開発に参加する機会が出てきたのですが、お手軽にバックエンド環境が構築できてしまうので、本当に便利ですね。サーバ運用に関

svelteの公式サイトで学んでみる Introduction 基本 https://svelte.dev/tutorial/basics 公式svelteでは実際にコードを書きながら学べる設計となっています。 環境構築なしですぐに書いて試せるのはありがたいですね。 ちなみに... APIドキュメントはこちら 公式のexample集はこちら 60秒で始めるquick startはこちら ReactとVueに似ていると言われるSvelteですが、 Svelteは実行時に走るのではなく、ビルド時にJSを吐き出す仕組みとなっています。 なのでフレームワークによってパフォーマンスを落とす心配がありません。 SvelteではReactなどと同じようにcomponentをコードの単位として扱います。 コンポーネントはHTMLやCSS,JSをカプセル化した再利用可能な自己完結したコードブロックになります

ちなみにですが、ここにもショートカットがあります。（マウスを乗せるとマークが出てくる） +マークは好きなコマンドの登録, 通行止めのようなマークはセッションの中止、 ボードのマークは招待URLのコピーです。 ##　サーバーの共有方法 Shared Servers > Share servcer　をクリックすると、テキスト入力のUIが上からにゅっと出てきます。 共有したいポートを打ち込んでエンターを押すと、Provide a display name for the shared server と出てくるので、サーバーにつけたい名前を打ち込みます。 ターミナルの共有方法 Shared Terminals　の横にあるアイコンをクリックします。 readOnly（読み込みのみ）かread/write(読み書き可か）を選べるので、 好きな方を選ぶと共有できます。 ターミナルの共有を削除するには、S

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? webpackを ^4.44.0 -> ^5.0.4にマイグレーションしましたので、 その際の作業の覚書です。 migrationの仕方 https://webpack.js.org/migrate/5/ 基本的に上記の公式を読みつつ、エラーが出たらその都度エラー文を元に対応していく形で進めました。 元々のwebpackの設定にもよって対応も変わってくるかと思いますが、 主要な変更箇所と実際に私が変更した箇所を紹介しておきます。 loaderとuseの厳格化 【参考】　https://blog.hiroppy.me/entry/webp

useEffectって初回に走るんですよ、 これが面倒で面倒で.... かつてのcomponentWillmountやらcomponentDidUpdateやらを使ったclassコンポーネントを functionコンポーネントに置き換えようとすると悲劇が起こりやすいです。。（今朝の話） デモンストレーション import React, { useEffect, useState } from "react"; export default function App() { const [count, setCount] = useState(0); useEffect(() => { console.log("初回だけ走るよ〜"); }, []); useEffect(() => { console.log("カウントが押されたとき走るよ〜"); }, [count]); return (

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? TypeScript全然わかんない... という状態から、プロジェクトに導入できるまでになんとかなったので、 学習の参考になったものなどをまとめて学習ロードマップを作成いたしました。 私自身もまだまだのレベルですが、これからTypeScriptを勉強したい!という方の道しるべになれば幸いです Level 0: TypeScriptってなんぞや？ まず学習する前に、その対象がなんなのか、を見極める作業です。 TypeScriptは altJS の１つです。 JSは元々大規模なコードを組むには不向きな設計になっているので、 altJSという

先日、React v17リリース候補がリリースされましたね! 前回のメジャーリリースからなんと2.5年もかかったようです。 ほとんどが公式の意訳になりますが、何が変わったのか重要そうなところをピックアップして自分メモとしてまとめておきます。 全てを網羅しているわけではないので、より詳しく知りたい方は下記の公式リリースノートを参照ください。 公式リリースノート 公式リリースノート日本語版 新しい機能はないよ React開発者は現在新しい機能追加に向けて取り組んでいますが、今回のv17には実は新機能は追加されていません。 v17は言わば、これからリリース予定の大規模アップデートのための踏み石になっています。 段階的アップデート 今までのアップデートには必ず破壊的変更が含まれていました。v15 -> v16の破壊的変更は皆さんの記憶にも新しいかと思います。そのような破壊的変更は、メンテされてない

Reactのfunctionコードでスクロールイベント等を実装すると、 イベント関数をuseCallbackでくくってメモ化しておかないとremoveEventListenerが働かないとか、 スクロールで使用するフラグはuseRefで再レンダリングされないようにする...など、 意外と気に掛ける点が多かったので、備忘録も込めてコードを載せておきます。 import React, { useState, useEffect, useRef, useCallback, } from 'react' const TestDom = () => { const [isDisplay, setIsDisplay] = useState(false) const isRunning = useRef(false) // スクロール多発防止用フラグ // リスナに登録する関数 const isScro

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?

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?

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?

WSLとは？ めっちゃ簡単に言えば、Windows10内に手軽にLinux環境を作れるようになる。 現在正式リリース中のWSLではDockerが動かなかったが、プレビュー版公開中のWSL2からはそれが解消され、話題になっている。 この記事で目指したかったこと Windows立ち上げてvscode開くだけでDockerコンテナ内の開発ソースディレクトリを開けるようにする * 結果的に、完全には引き篭もれなかったが、WSL2の良さは実感できた。また、今後のバージョンアップを待てば無事完全に引き篭もれる見込み。 * (2019/03/08追加)引き籠もれるようになりました。 * https://www.docker.com/blog/docker-desktop-for-windows-home-is-here/ WSL2 + VScode + Dockerによる開発環境構築 WSL2環境構築

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

Photonのマルコポーロチュートリアルが完了したので、取得した知識を用いて読み終わっていた「Unity5の教科書 2D&3Dスマートフォンゲーム入門講座」のサンプルゲームをオンライン対戦ゲームに改造してみた。 想定読者 Photonのマルコポーロチュートリアルを実施済みであること。 https://doc.photonengine.com/ja/pun/current/tutorials/tutorial-marco-polo ※どうやら現在落ちてる模様。。。 「Unity5の教科書 2D&3Dスマートフォンゲーム入門講座」のChapter6まで完了していること。 https://www.amazon.co.jp/exec/obidos/ASIN/4797386797/ ※なお、公式のチュートリアルはメンテされておらず、記載の通りでは動作しない箇所が多々あるため「チュートリアルやってみた

:ViewController.swift import UIKit class ViewController: UIViewController { @IBOutlet weak var scview: UIScrollView! //storyboardでスクロールビューを配置しているので接続 override func viewDidLoad() { super.viewDidLoad() let graphview = Graph() //グラフを表示するクラス scview.addSubview(graphview) //グラフをスクロールビューに配置 graphview.drawLineGraph() //グラフ描画開始 scview.contentSize = CGSize(width:graphview.checkWidth()+20, height:graphview.c

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?

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?

概要 brew bundle Brewfile の代替を探していたところ、 osxc というものがありましたので、導入してみました。 osxc Ansible を利用して Homebrew を操作しているツールです。 Ansible の要領で Mac のセットアップを記述できますので、 brew bundle Brewfile ではできなかった設定も施すことができます1。 導入 osxc/starter の README によると、 公式ページで紹介されているやり方は古くなっているようですので、 README に記載されている手順を参考に導入します（一部改変しています）。 XCode Command-Line tools 導入

環境 サーバー: Gehirn RS2 Ruby: 2.0.0p0 Rails: 4.0.0.beta1 nginx: 1.2.7 unicorn: 4.6.2 やりたいこと Gehirn の初期ドメインは user_name.gehirn.ne.jp となっている。 ここで user_name.gehirn.ne.jp/rails_app のURIアクセスがあったとき public_html/rails_app 以下に飛ぶように nginx を設定する方法を述べる。 事前準備 この記事を参考に以下の作業をしておきます。 http://qiita.com/items/c1edfa84b34dba2211ac 公開鍵の登録 データベースの作成 Ruby のインストール ($ rs2 install rubyで大丈夫です) nginx のインストール unicorn のインストール (Rail

概略 技術者のためのレンタルサーバー Gehirn RS2 に nginx + unicorn 環境を構築します。 nginx は fakeroot は使わずにソースからインストールします。 Rails で使うデータベースには mysql を使いました。 環境だけ整えるのも寂しいのでおまけとして twitter-bootstrap-rails をいれて遊んでみました。 事前準備 公開鍵の登録 まず最初に公開鍵の登録をします。 Gehirn のコントロールパネルからログインしてSSHの項目より鍵の登録を行います。 データベースの作成 Rails で使うデータベースもここで作成しておきます。 同じくコントロールパネルのデータベースから"データベースを追加する"をクリックしてデータベースを作っておきます。 Rails では開発用、テスト用、本番用とデータベースを分けて運用するようになっているので