Firebase AuthなどJavaScriptでAPIセッション用のトークンを得ることについて - Qiita
ちょっとでもセキュリティに自信がないなら、 Firebase Authentication を検討しよう （※ こちらの参照記事の内容自体に不備があるとか甘いとか指摘するものではないんですが、勝手に枕として使わせてもらいます） 上記記事は、Firebase Authenticationが提供するJavaScript APIを使ってJWTのトークンを取得し、自前のサーバにHTTPのヘッダで送りつけて検証をさせることで、認証の仕組みをセキュアかつかんたんに実現しよう、という内容です。 このようにJavaScriptのAPIでトークンを発行して自前バックエンドのAPI認証につかう方法はAuth0のSDKなどでも行われていますので、IDaaSをつかってSPAを開発する場合には一般的なのかもしれません。 話は変わりますが、SPAの開発に携わっている方は「localStorageにはセッション用のトー
Reduxが分からない人のためにReduxを概念から説明してみる - Qiita
TL;DR 要点だけ知りたい方は、最後の方だけ読めば大丈夫です。 背景:Reduxが全然わからないのでちゃんと勉強した 開発現場にReduxを導入しておきながら、チーム全員が「全然分からない。俺達は雰囲気でReduxをやっている」状態だったので、本腰入れてドキュメント読みました。基本を押さえたら一気に見通しが良くなったので、説明します。色々なサイトやドキュメントは明らかに冗長な説明多いので、極限までエッセンシャルを絞って説明することで、ゼロ知識からでもある程度、理解できるレベルの説明に落とし込むことに挑戦しました。うちの開発チームで知見として残すために作成したものですが、需要がありそうかなと思ったので、公開します。需要がなければすみませんでした。おかしな点があれば、まさかりお待ちしております。 今回は、公式ドキュメントのBasics辺りの話まで。 Reduxの主な登場人物 Reducer
世のフロントエンドエンジニアにApollo Clientを布教したい - Qiita
こんにちは。いかがコーディングお過ごしでしょうか。 私は今更ながら最近GraphQLで遊び出し、そしてApollo Clientに出会いました。 ワクワクしました。「これは想像以上に既存のフロントエンドの設計・実装を変えるものだぞ！」と感じました。 「Apollo ClientってGraphQLクライアントでしょ？GraphQLエンドポイントない俺には関係ないな。」と思ったそこのあなた、それだけじゃないんですApollo Clientは！！！！！ 本記事では「Apollo Clientとはなんぞや」という話と「なぜ私がApollo Clientを布教したいのか」という点について語ります。実は最初は実装含めたチュートリアルを書いていたのですが長くなり過ぎたため記事を二つに分けました。この記事はどちらかと言うと概念系の話が多めで、片方にApollo Client + Reactのチュートリアル
テストコードの期待値はDRYを捨ててベタ書きする ～テストコードの重要な役割とは？～ - Qiita
はじめに みなさん、DRY原則はご存知でしょうか？ DRY = Don't repeat yourselfの略で「繰り返しを避けること」という意味ですよね。 良いコードを書くための重要かつ基本的な原則なので、みなさんよくご存知だと思います。 ですが、DRY原則はテストコードを書く場合は必ずしも最善にはならない場合があります。 他の人が書いたテストコードを見ていると、テストコードにDRY原則を適用したために、かえって悪いコードになっているケースをときどき見かけます。 この記事ではなぜテストコードをDRYにすると良くないのか、ということを説明します。 追記：タイトルを変更しました @t_wada さんのコメントを受けて、タイトルを見直しました。 「テストコードはDRYを捨ててベタ書きする」 => 「テストコードの期待値はDRYを捨ててベタ書きする」 【注意】この記事は画一的なテストコードの書き
FactoryBotを使う時に覚えておきたい、たった5つのこと - Qiita
環境 Rails 7.0.5 FactoryBot 6.2.1 はじめに ここに書かれている内容は、基礎の基礎ですが、ユースケースの8割はカバーできるのではないかと思います。より詳しく知りたい方は、以下のページを参照して下さい（※ここの内容の大半は、以下のページに書かれている内容です）。 https://github.com/thoughtbot/factory_bot/blob/master/GETTING_STARTED.md factory_bot 5 より、静的属性は廃止されました。 属性は、常にブロックを付けて宣言する必要があります。 Static attributes (without a block) are no longer available in factory_bot 5. https://github.com/thoughtbot/factory_bot/blob
RubyとRailsにおけるTime, Date, DateTime, TimeWithZoneの違い - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 2021.2.11追記：DateTimeクラスは非推奨なクラスになりました DateTimeクラスは非推奨なクラスとなり、DateTimeクラスではなくTimeクラスを使うよう、公式にアナウンスされました。 参考1 But we consider use of DateTime should be discouraged. - matz (Yukihiro Matsumoto) https://bugs.ruby-lang.org/issues/15712#note-4 参考2 DateTime は deprecated とされているた
使えるRSpec入門・その1「RSpecの基本的な構文や便利な機能を理解する」 - Qiita
はじめに RSpecは難しい、よくわからない、といったコメントをときどき見かけます。 確かにちょっと独特な構文を持っていますし、機能も結構多いので「難しそう」と感じてしまう気持ちもわかります。 （構文については僕も最初見たときに「うげっ、なんか気持ちわるっ」と思った記憶がありますw） しかし、RSpecに限らずどんなフレームワークでも同じですが、慣れてしまえばスラスラ書けますし、実際僕自身は「RSpecって便利だな－」と思いながらテストコードを書いています。 そこでこの記事では、僕が考える「最低限ここだけを押さえていれば大丈夫！！」なRSpecの構文や、僕が普段よく使う便利な機能をまとめてみます。 具体的には以下のような構文や機能です。 describe / it / expect の役割 ネストした describe context の使い方 before の使い方 let / let!
RSpecのletを使うのはどんなときか？（翻訳） - Qiita
# インスタンス変数を使う場合 before do @user = User.new(name: 'Taro', email: 'taro@example.com') end it 'is valid' do expect(@user).to be_valid end # letを使う場合 let(:user) { User.new(name: 'Taro', email: 'taro@example.com') } it 'is valid' do expect(user).to be_valid end RSpecを使い慣れている人であれば、おそらくletを使うことが多いと思いますが、初心者の人には違いやメリットがよくわからないと思います。 また、使い慣れている人であっても具体的な違いをぱっと即答できる人は少ないんじゃないでしょうか？ ネットを調べていたところ、Stack Overfl
vim 初心者が使ってて便利だと思ったコマンドをまとめておく - Qiita
はじめに vi / vim を使い始めてまだ数ヶ月の初心者ですが、ここ数ヶ月、テキスト編集やスクリプト作成等にvim を使うようにしてました。 そんな初心者がvim すげーと思い始めてきたので、使ってて便利だと思うコマンド達をまとめておこうと思います。 カーソル操作 h, j, k, l で順に左、下、上、右へ移動。 それぞれ前に数字をつけることで、その文字数 / 行数移動できます。 0で行頭に移動、^でインデントを除いた行頭に移動、$で行末に移動。 Ctrl-uで半ページ上へ移動、Ctrl-dで半ページ下に移動。 up とdown で覚えやすいし使いやすいです。 この2つがあれば1行とか1ページとかスクロールするコマンドは使わないです（個人的に）。 gg でファイルの先頭に移動、G でファイルの最後に移動。 :<数字>で数字の行に移動。<数字>G でも数字の行に移動。 b でカーソル上の
DI (依存性注入) って何のためにするのかわからない人向けに頑張って説明してみる - Qiita
追記 2022/11/12 追記 この記事読んで、DI 便利だなって思ったらこちらも併せて読んでみてください。クリーンアーキテクチャーの開設の中で依存性逆転の説明が出てきます。難しいかもしれませんが、一度理解すればつぶしが効く考え方なので腰を据えて読んでみてください。 本文 ここでは、最近のそこそこの規模のアプリだと大体使われてる（と私は思ってる）Dependency Injection（DI）について、何故使ってるのか？というのを私の理解で書いていきたいと思います。 今回の対象言語は C# ですが、DI 使ってる言語であれば大体同じ事情なのかなと思います。 単体テストしたいよね アプリケーションを作るとうまく動いているかテストをすると思います。 たとえ、そのアプリがハローワールドだとしても動かして目視で確認してると思います。 もうちょっとアプリの規模が大きくなってくるとクラス単位やクラス
JavaScript の仕組み：メモリ管理+ 4つの共通のメモリリーク処理方法 - Qiita
この記事は sessionstack blog に投稿されている、How JavaScript works シリーズの一記事 "How JavaScript works: memory management + how to handle 4 common memory leaks" の和訳です。投稿されたのは Alexander Zlatkov, 原文はこちらです。翻訳については許諾いただいています。 メモリ管理もしくはC言語におけるメモリ解説他、用語なども怪しい箇所は多分にありますので、間違いがありましたら修正のご指摘・編集リクエスト等ください。 日本語の参考 URL 先に日本語の参考URLを記載しておきます。 JavaScriptで起こるメモリリークのパターン - EagleLand Browser Computing Structure // Speaker Deck Unders
Luceneで使われてるFSTを実装してみた（正規表現マッチ：VMアプローチへの招待） - Qiita
入力と出力のペアに対して，上のようなグラフを作るのが目標です．テーブルの出力のとこは数字が書いてありますが，文字列だと思ってとらえて下さい．map だと出力は1つに限られちゃいますが，ひとつの入力に対して出力が複数あってもいいです．たとえば入力 "feb" に対して，出力は "28" と "29" があります．（2月は28日と29日のときがありますね）． ノードの部分が状態で，そこから出ている矢印が状態遷移になります．矢印には a/b というラベルがついていますが，a の部分が入力とのマッチを意味し，b の部分がそのときの出力を意味します． 上の例で示すFSTで，"aug"を処理するには，"aug"を頭から読んで，入力"a"に対応するの(9)から(3)への矢印を選択します．そのとき，出力として"3"を記録しておきます．そのあと，"u"に対して(3)から(2)への矢印を選択し，"1"を先ほど
リファクタリングして学ぶTypeScriptでクリーンアーキテクチャ - Qiita
概要 最近，ASCII Dwangoさんから「クリーンアーキテクチャ」という本が出版されました． そこに書いてある内容は素晴らしいものでした．しかし，実際に組んでみた場合，どういう風に作るのが良いのか？どういう問題があるのか？そういった疑問が湧いてきました．そこで， 実際に非クリーンアーキテクチャのコードをリファクタリングしていくことで，クリーンアーキテクチャの要点を感じる． という試みです． クリーンアーキテクチャとは ここでは簡単にしか説明しませんが，実際に本を読んで勉強することをお勧めします． 「クリーンアーキテクチャ 達人に学ぶソフトウェアの構造と設計」のp200によると フレームワーク非依存：アーキテクチャは，機能満載のソフトウェアのライブラリに依存していない．これにより，システムをフレームワークの制約で縛るのではなく，フレームワークをツールとして使用できる． テスト可能：ビジネ
ブラウザ拡張の権限でどこまで悪いことをできるのか？とその対策【デモあり】 - Qiita
[2018/07/07 追記] 本記事ではChrome拡張について説明していますが、Firefox1やEdgeの拡張機能もほぼ同じ仕組みで動いています。 [2023/11/06 追記] #参考 ページを追加しました。 Chrome拡張。便利な機能を簡単に追加できるので使っている人も多いと思います。 ただ、インストール時の権限の注意書きが分かり難いので無条件に承認（追加）していることもあるのではないかと思われます。 そこで、本記事ではChrome拡張の権限の種類・確認方法の他、拡張がどこまで（悪いことを）できるのかとその対策を3段階の権限（危険性）レベルごとに紹介していきたいと思います。 便利だが危険性もあるChrome拡張 Chrome拡張をインストールすると、Webページを読むというブラウザ本来の機能だけでなく様々なことができるようになります。 例えば、Webメールの新着通知や記事などの
お疲れさまXMLHttpRequest、こんにちはfetch - Qiita
Service Workersでプッシュ通知を受信できるようになったわけですが([1]: GCM)([2]: Web Push)、Chromeではバージョン48まではGCMで通知だけができるようになっただけで、メッセージ本体は通知を受けてからService Workerでサーバから改めて受け取るような実装をする必要があったりします。 ここで、Service Workersでは、XMLHttpRequestが使えません。その代わり、XMLHttpRequest (以下、XHR)に代わるWHATWGの仕様としてFetch APIがあり、Service WorkersではこのFetch APIを使うことになっていますので、その使い方を簡単に紹介します。 Fetch API自体は、Service Workers専用のものではなく、メインスレッドでもXHRの代わりに使うことが可能です。現時点で実装し
WebAssemblyでゴリゴリ閲覧履歴とかを検索するChrome Extensionを作ってみつつ、WebAssemblyの現状報告もしてみる - Qiita
こんにちは、kamyknです。 今回はWebAssemblyの力を試してみたかったので、履歴、ブックマーク、タブ検索ができるChrome Extensionを作ってみました。今回は記事中コードはほぼ出てきませんが、開発の際に得たWebAssemblyの知見などをメインに書いていってみたいと思います。 なお、今回作成したChrome Extensionの特徴は下記のような感じです。 技術的な概要 検索ロジック部分はfzf風に作っていてWebAssemblyによるものです。 (まだ自分用の段階ですが、WebAssemblyをnpm package化したりしてます) 処理はWebWorkerで別スレッドに逃がしています 表示部分などの実装はJS、特にVue.jsによるものです 検索対象のデータはすべてChromeのAPIで提供されるデータを利用します これらについては記事内で順に説明していきたい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
RSpec で subject & expect する時の注意点 - Qiita
RSpecにおけるFactoryGirlの使い方まとめ - Qiita
たのしいOSSコードリーディング: Let's read "cookies"🍪 - Qiita
WebWorkerをenjoyableにするComlinkとは何者か - Qiita
