kadoppeのブックマーク - はてなブックマーク

変数への再代入を避けたいのは何故か - Qiita

##記事の想定読者コードレビューで困ったことのある方感覚的な経験を他人に納得させるための言葉が必要な方 ##一言で答えると再代入は参照透過性を壊すため ##参照透過性って何さ以下のような性質のこと関数は同じ引数に対して常に同じ値を返す値は最初に定義した値から常に変わらない ##参照透過性を確保したい理由関数やクラスの仕様を一意に定められるため、バグの混入を避けやすい。テストが容易になる。状態の変化を考慮する必要がないため、パターンの組み合わせ爆発が起きにくい。 ##まとめ : 再代入を許容すると何が起きるのか言い換えてみるとわかりやすい hoge = fuga だった値が、いつのまにか hoge = piyo に変更されている状況では値が変わった場合でも正しく動作するということを再度テストする手間と値が変わったことを検出する手間とそれを見落としてしまうリスクが生じ

kadoppe 2019/04/13

リンク

vue-router で絶対パス ( http 始まり ) を取得する - Qiita

this.$router.resolve({ name: 'ExmaplePage', params: { id: id } }).href

kadoppe 2019/04/11

リンク

Vueで後から読み込んだHTMLをコンポーネントにしたい - Qiita

こんにちは。また新卒エンジニアの@nekobatoです。 Vueと闇の話します。 Vueが闇ってことじゃなくて、Vueで闇を作る話です。テンプレートではなく、HTMLを読み込んでVueに繋ぎたい用意するHTMLにv-**みたいなdirectiveは用意できるが、<script type="x-template">では囲えない。なぜならそのHTML自体は他で使っていて、見た目に影響を出したくないから。 SPAにしろよという話でもあるのですが、今すぐ既にあるSPAに他所のHTMLを適用させたい、という場合に手っ取り早い方法を考えた所、こういうことになりました。前提条件 JSファイルは一つコンテンツはXHRでHTMLを受け取るさもSPAのように振る舞わせたい読み込んだHTMLはVueで操作するのでbindingが効いている必要があるできないこと Vueのcomponent内へ単純

kadoppe 2019/04/10

リンク

NoSQLじゃないRedisをもっと知ってほしい - Qiita

みんな大好きなRedisいいですよね。私もお世話になっています。 RedisといえばNoSQLのキーバリューストアとして使ったり、キャッシュ置き場として使うのが一般的かと思います。とはいってもそんなパフォーマンスを求められる使い方が必要になるには相当数のアクセスがあるサイトを開発しているエンジニアだけが必要なもの？いや、Redisはもっとできる子なんです。今回の記事では小規模な開発でも、キーバリューストアやキャッシュ用途以外の使い道があるよということをまとめてみました。 1. メッセージキューとして使う複数のプロセス間でメッセージキューを使って値の受け渡しをするようなことがあるかと思います。 RDBを用いた場合は値の挿入値の取得読み取った値の削除という処理になるかと思いますが、Redisの型の一つリスト型を用いることで簡単にメッセージキューとを実装することができます。まずメッ

kadoppe 2019/04/07

リンク

[Vue.js] 日本語変換の確定でkeyup.enterが発火してしまうのを防ぐ

背景 Vue.jsでenterキー押下ですぐ送信できるチャットを作っていたら日本語入力を確定するenterでも送信されてしまい「ムキー！」となったので直した話をメモしておきます (Vue.js特有の問題というわけではなくkeyupイベントをハンドリングする際に起きる問題です）対応概要 IME変換時でなければkeypressも発火する IME変換時はkeypressが発火しないという性質を利用し、 keypressイベントで送信可能フラグを立てておく keyup.enterイベントでフラグが立っていたら送信とします。フラグとかあまり使いたくないですが調べた感じこの対応が多かったです。もっとスマートなやり方があったらぜひご教示ください。コードはこんな感じ <template lang="html"> <section class="container"> <input v-mode

kadoppe 2019/04/05

リンク

結局「下からのスクロール位置」を取得するにはどうすればいいのか - Qiita

最近の Web サービスでよくある「下までスクロールしたら次のコンテンツを読み込む(オートページャライズ)」を実装するためには、当然ですが「下までスクロールしたかどうか」を検出する必要があります。これが簡単そうに見えて意外と面倒臭く、自分も毎回思い出すのに時間がかかってしまいます。御託はいいから結論を先に言えこれでよさそう function getScrollBottom() { var body = window.document.body; var html = window.document.documentElement; var scrollTop = body.scrollTop || html.scrollTop; return html.scrollHeight - html.clientHeight - scrollTop; } 以下、解説ですどんな値が取得できる

kadoppe 2019/03/09

リンク

JavaScriptでQRコードをスキャンするライブラリまとめ - Qiita

LazarSoft/jsqrcode ZXing というJavaのライブラリをJavaScriptに移植したものです。このライブラリ自体はCommonJS形式で書かれていないのですが，別の方がCommonJS形式への変換とnpmの登録をしてくれていて，edi9999/jsqrcode と vicapow/jsqrcode という2種類のプロジェクトがあります。このライブラリはテストコードが不十分ということで，edi9999/jsqrcode の作者は，後述する cozmo/jsQR の利用を推奨しています。このライブラリは画像ファイルのDataURLからQRコードを読み込むところまでを対象としているので，Webカメラから画像を取得する処理は navigator.getUserMedia などを使って自分で書く必要があります。参考事例を2つ挙げておきます。ブラウザからQRコードデコー

kadoppe 2019/03/03

リンク

[JavaScript]色々なディープコピー - Qiita

const obj = { d: new Date(), u: undefined } obj => Object {date: Sat Dec 17 2016 22:48:56 GMT+0900 (JST), u: undefined} const copyObj = JSON.parse(JSON.stringify(obj)) => Object {date: "2016-12-17T13:48:56.350Z"}

kadoppe 2019/03/02

リンク

トークンを利用した認証・認可 API を実装するとき Authorization: Bearer ヘッダを使っていいのか調べた - Qiita

トークンを利用した認証・認可 API を実装するとき Authorization: Bearer ヘッダを使っていいのか調べたAPIOAuthWeb TL;DR HTTP でトークンを利用した認証・認可をする手法として RFC 6750 がある OAuth に限らず、トークンを利用して認証・認可する機構の一部として Authorization: Bearer ヘッダを使うことができる使い方について詳しくはこの記事の下のほうに書いた要求トークンを利用した認証・認可機構を持つ API を作りたいクライアントがトークンを HTTP リクエストに含めて送信し、サーバはトークンを検証してリソースへのアクセスを許可したい Authorization: Bearer トークンヘッダでトークンを送る API あるよね、ああいうやつ疑問 Authorization: Bearer ヘッダは OA

kadoppe 2019/03/02

リンク

ID生成大全 - Qiita

セッションIDやアクセストークン、はたまた業務上で使う一意の識別子など、いろんなところで一意のIDを生成しなきゃいけないケースが存在します。そこで世間で使われているIDの生成方法について調べてみました。選択基準 ID生成における要求として、以下の観点が上げられるかと思います。生成の速度大量にデータを短期間で処理し、それらにIDを付与する場合、ID生成そのものがボトルネックとなることがあります。推測困難性 IDを機密情報と結びつける場合、IDを改ざんされても、機密データが見れないようにできている必要があります。順序性採番した順にデータをソートする必要がある場合は、IDがソートキーとして使えないといけません。それぞれについて各生成手段を評価します。 ID生成の手段データベースの採番テーブル採番用のテーブルを作り、そこで番号をUPDATEしながら取得していくやりかたです。古い

kadoppe 2019/03/02

“UUIDは現在バージョン1から5までが規格化されており、一意の識別子の用途でよく使われるのは、タイムスタンプベースのVersion1とランダムベースのVersion4です。バージョン1は以下のように、タイムスタンプとミリ秒ごとの

リンク

排他制御に関する用語を大雑把に理解しよう「ロックとセマフォ」「共有ロックと排他ロック」「楽観的ロックと悲観的ロック」 - Qiita

排他制御とは何かそもそも排他制御とは何なのか。これはWikipediaの冒頭の説明によると以下のようです。排他制御（はいたせいぎょ）とは、コンピュータ・プログラムの実行において、複数のプロセスが利用出来る共有資源に対し、複数のプロセスからの同時アクセスにより競合が発生する場合に、あるプロセスに資源を独占的に利用させている間は、他のプロセスが利用できないようにする事で整合性を保つ処理の事をいう。「目的地Xへ向かっているAさんが乗車しているタクシーに、Bさんが突然乗り込んできて目的地をYにするよう運転手さんに頼んでしまう」そんなことが起こらないように制御する仕組みが排他制御となります。 (AさんBさんが各プロセス、タクシーの目的地という情報が資源にあたります) 資源という用語は抽象的です。資源は物理メモリ領域、仮想メモリ領域、ファイル、DBのテーブルのレコード、と処理によって様々です。

kadoppe 2019/02/27

リンク

Nuxt で Express を使いときの reload 問題。 - Qiita

はじめにこんにちは。今日も明治大学 advent calendarやっていきます。アドベントカレンダー忘れてて、数週間前に貯めておいた記事でどうにか繋ぐ。 Reload 問題 nuxtとapi serverを実装して最高のSSR applicationを作りたいぜ！なんて思うでしょ？でもね、ググって出てくるnuxt & api serverって思ったより微妙なんだ。どれも、開発時のreloadが気持ちよくない。 nuxt & expressでググって良く出てくるのは以下の2つのパターン。 1. nuxt as an express middleware 2. express as a nuxt middleware 1. nuxt as an express middleware まずはこっち。nuxtが提供しているexpress middlewareを使うバターン。 Example

kadoppe 2019/02/24

リンク

認証トークンをCookieに保存するのは卒業しよう - Qiita

Webアプリケーションの認証トークン（セッション）はCookieヘッダで送信するのが一般的だとは思いますが、そろそろこのCookieに依存した方法は負の遺産ではないでしょうか？認証トークンの送信はRFC 7235で規定されているAuthorizationヘッダを使うと良いです。Basic認証とかDigest認証で使うやつですね。実はBasicやDigestの他にRFC 6750でBearerというスキームが登録されています。単一の文字列を認証情報として送信するためのスキームで、トークンを送信するのにピッタリです。参考: トークンを利用した認証・認可 API を実装するとき Authorization: Bearer ヘッダを使っていいのか調べたその場合は、認証トークンはCookieではなくlocalStrage（またはsessionStorage）に保存することになると思います。

kadoppe 2019/02/24

リンク

フロントエンド開発でパッケージのアップデートを継続的におこなう - Qiita

フロントエンド開発でパッケージのアップデートを継続的におこなうこれは Classi Advent Calendar 2018 1 日目の記事です。フロントエンドエンジニアの @kasaharu です。はじめに昨今のフロントエンド開発はフレームワークと呼ばれるものから便利なライブラリまで幅広いパッケージを使って行われているしかし、これらは導入したときのままであることが多く、バージョンアップすることを怠ると後々問題の原因になったりするバージョンを上げないとセキュリティ問題に対応できなくなったり、パッケージそのものがサポートされなくなったりするまた、逆にバージョンを上げることでパフォーマンス改善などの恩恵を受けられる場合もあるが、その機会を損失していたりする今回は、できるだけ負荷にならずに継続的なパッケージアップデートを習慣化するために Renovate というサービスを使用して

kadoppe 2019/02/19

リンク

FFmpegで動画をGIFに変換 - Qiita

FFmpegとは FFmpegは動画と音声を変換することのできるソフトオプションがとても多く、細かい調整が可能公式document GIF画像やTwitter用の動画作成に便利です mov → gif 変換後 cat.mp4 ↓ cat.gif インストール

kadoppe 2019/02/14

リンク

nuxt.js(v2)でpug/stylusを利用する - Qiita

pugやstylusなどのインデント記法は、見やすく、そして、誰が書いても綺麗になる(整形ツールいらない)ので好き。 nuxtでは、NPMパッケージをインストールするだけで使える。素晴らしい。 nuxt.js(v2)は設定済みの想定 ↓ nuxt.js(v2)の導入方法 1.NPMパッケージをインストール本体とコンパイルするためのlodaerをインストール ※nuxt.js(v2)から、pug-plain-loaderが必要になっている。忘れずに。 // pug $ npm i pug pug-loader pug-plain-loader // stylus $ npm i stylus stylus-loader <template lang="pug"> .container h1.red Hello {{ name }}! </template> <script> export

kadoppe 2019/02/11

“npm i stylus stylus-loader --save”

リンク

【v2対応】Nuxt.jsとFirebaseを組み合わせて爆速でWebアプリケーションを構築する - Qiita

Firebase Advent Calendar 2017 21日目の記事です。フリーランスでフロントエンドを中心にエンジニアをやっているpotato4dです。普段はVue.jsを中心に、案件を進めたりコミュニティに関わったりしていますが、今回はそんなVue界隈で今アツいフレームワークであるNuxt.jsとFirebaseを組み合わせて、SPA + SSRにAuthと Firestore を組み合わせたアプリケーションを高速で作る方法を、サンプルとあわせてご紹介します。 2019/10/16 追記このサンプルは Firestore が存在しない Nuxt v1.x + RTDB 時代のコードを愚直に移行しているので全体的に資料が古くなっています。インフラ構成については順次更新していますが、特にデータストア操作周りについてはできるだけ参考にしないでください。 2019/07/02

kadoppe 2019/02/11

リンク

webpackのTree Shakingを理解して不要なコードがバンドルされるのを防ぐ - Qiita

はじめに webpack の Tree Shaking に関する備忘録です。以下を目的とした記事になります。 Tree Shaking とは何か、なぜ Tree Shaking をするのかを理解する webpack を利用して Tree Shaking するためにはどうすれば良いのかを理解する Tree Shaking 以外の「デッドコードをバンドルさせない」ための手段を理解する解説に利用しているコードの最終形態は GitHub 上にあります（hira777/webpack-tree-shaking-example）。 webpack を理解していることを前提とした記事ですので、基礎知識を習得したい方は webpack 4 入門をご覧ください。 Tree Shaking とは webpack などでファイルをバンドルする際に、デッドコード（利用されていない不要なコード）を除去してファイル

kadoppe 2019/02/05

リンク

JavaScriptライブラリ/プロジェクトのファイルサイズの問題点を見つける方法 - Qiita

ブラウザ向けのJavaScriptだとファイルサイズはある程度気になると思います。この記事では、ファイルサイズの計測方法やボトルネックとなってるライブラリの見つけ方についてできるだけ簡単な方法をまとめます。ファイルサイズと一言にいっても、ブラウザでは大体minifyしてから配布するのでminify後のファイルサイズも重要です。ソースコード自体のファイルサイズ minifyしたファイルサイズ minify + gzipしたファイルサイズコメントの多いソースコードはminifyするとかなり小さくなったりすることが多いので、ソースコード自体のファイルサイズでは比較しにくいです。また、ソースコードにおいて assert モジュールを使っているとファイルサイズが10kb弱程度minify後で変わります。 assertモジュールは通常外しても問題ないので、unassertでビルド時に取り除き

kadoppe 2019/02/05

リンク

フロントエンドのレスポンスを向上させようと思ってSpeedCurve使ってみた - Qiita

はじめに web(フロントエンド)のパフォーマンスを改善をしようと思ってて、SpeedCurveというツールを中心にどんな風に取り組もうかの作戦をかるーくまとめますそもそもSpeedCurveって？ https://speedcurve.com まぁレスポンス時間とかを的確に可視化してくれるツールサーバ側の設定が必要なく、契約して設定をポチポチすれば完了するサーバ側の設定が必要ないのでベンチマークするサイトが自由に設定できるカスタムメトリック使う場合はアプリケーション改修必要だったなぜSpeedCurve？まず、自作はちょっと時間的にツライので外部の良さげなツールを使おうと思った。別に違うツールでもよかったけど、良いらしいと聞いたのでさっそく使おう設定 Menu > Settings から行う Sites 計測するサイトの基本情報を入力 Regions 計測をする場所を指

kadoppe 2019/02/05

リンク

はてなブックマーク

タグ

ブックマーク / qiita.com (1,152)

お知らせ

今週のはてなブックマーク数ランキング（2024年9月第2週）

月間はてなブックマーク数ランキング（2024年8月）

今週のはてなブックマーク数ランキング（2024年9月第1週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス