package.json の browser field 入門編 - Qiita
package.json の browser field 入門編 Nodeプロジェクトのpackage.jsonには、browserというフィールドを設定することができます。 browserフィールドは、そのプロジェクトをブラウザ等のJSで使ってもらうための仕組みです。 この仕様は、browser field specに定義されています。 入門編では、この役割と基本的な機能について紹介します。 実践編では、 bundlerごとの解釈の違いと、それを回避する方法を説明します。 bundler とは このbrowser fieldを理解するには、まずbundlerについて理解する必要があります。 browser field specにはbundlerという用語が定義されていて、そこには A tool which takes a plain javascript package and crea
ちゃんと理解するCode Splitting - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Code Splitting、サボってきたのですが、必要になりそうだったので真面目に調べてみました。 これからCode Splittingやりたい方の入口的な役割になれれば幸いです。 Code Splittingとはなにか Code Splittingはその名の通り「コードを分割すること」を指します。分割されたコードはユーザのアクションに応じて非同期に読み込まれます。 ちなみにWebpackでentry point分けることとかもCode Splittingと言えばそうなのですが、本記事では触れません。また、別にSPAでなくともCode
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 などでファイルをバンドルする際に、デッドコード（利用されていない不要なコード）を除去してファイル
TypeScriptの型初級 - Qiita
この記事は「TypeScriptの型入門」の続編です。入門の続編ということなので初級というタイトルにしてみました。TypeScriptの型よくわからんという方は先に入門から読むことをおすすめします。入門レベルのTypeScriptくらい分かるよという方は読まなくても大丈夫です。 TypeScriptの型入門 さて、前回の記事ではTypeScriptの型を一通り紹介しました。この記事ではその続編として、実用上必要になるTypeScriptの型の挙動を理解したり、標準ライブラリに存在する型の使い方を理解することを目標にします。前回に引き続き、あくまでTypeScriptの型に関する話ですから、JavaScriptの言語機能とか、TypeScriptの構文とかの話はしません。悪しからずご了承ください。 最終更新： 2019-03-16 (TypeScript 3.4に対応しました） union型
react-redux hooks 時代のContainerコンポーネント - Qiita
先日 react-redux の v7.1 の stable release で hooks に対応したAPIが入り界隈で話題になりましたね。(追加されたAPIの詳しい解説はこちら https://react-redux.js.org/api/hooks) 結構コンポーネント内からお手軽に参照できる感動を伝えている情報が多いのですが(実際私も感動の嵐です)、ここで改めて「なんで Container コンポーネントって必要なんだっけ？」と「hooks APIではどうやって Container コンポーネントを書くのか」を考えていきます。 なぜ hooks API になった今でも Container コンポーネントが必要なのか 始めにここで言う "Container コンポーネント" は 「Redux の Store から値を注入するためのもの(あとdispatch 関数)」という狭義の意味で
フロントエンドでTDDを実践する（react-testing-libraryを使った実践編） - Qiita
この記事は、フロントエンドでTDDを実践する（理論編）の続編として書きました。 本記事では、react-testing-libraryでReactでTDDする方法をサンプルを使って解説します。 react-testing-library react-testing-libraryは、PayPalのエンジニアでありフロントエンドのTDDの第一人者であるKent C Doddsが、enzymeのリプレイスを意図して作ったReactのための新しいテストユーティリティです。 設計思想は、The more your tests resemble the way your software is used, the more confidence they can give you. enzymeのように実装そのもののテストをするよりも、ユーザーが使うようにテストされるべきというフィロソフィーがAPI
フロントエンドでTDDを実践する（理論編） - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? この記事は リクルートライフスタイル Advent Calendar 2018 8日目の記事です。 2018/12/10更新：続編で フロントエンドでTDDを実践する（react-testing-libraryを使った実践編）を書きました。 はじめに 自分のフロントエンドチームでは、TDDでの開発フローを実施することでフロントエンド開発の課題に向き合っていきます。 今回は、一般的に難しいとされるフロントエンドでのテストについて、どんな方針でテストを書けばいいかについて書いてみたいと思います。 フロントエンド開発の課題 プロジェクトにより
実務でどんな git コマンドを使っているか振り返ってみる - Qiita
gitコマンドって実務でどう使うんだろう？ 独学の git コマンドを実務で使いまくり、最近やっとうまく運用できているように感じます。 そのうえで、git コマンドを勉強し始めた頃、「コマンドの説明はいっぱいあるけど、実務でどうコマンドを使うんだろう？」 と感じていたのを思い出しました。 そんな想いから、よく使う git コマンドを実務テイストで振り返ってみました。 本記事に書いていないもの 実務では使うのですが、諸事情により以下は省いています。 submodule 本当はこの記事に含めようかと思ったのですが、長くなりすぎてしまったので、需要がありそうだったら次回作に書こうかと思います。 プルリク コマンドの説明をしたいため、省きます。 Git Flow やら GitHub Flow やらの Flow 系の考え 説明がややこしくなってしまうので省きます。 developブランチ、maste
本当は怖いReact.memo - Qiita
React v16から登場したReact.memoの話です https://reactjs.org/blog/2018/10/23/react-v-16-6.html FCで shouldComponentUpdate 相当のことができて超便利！ でもちょっと待って！そのReact.memo、使わない方が良いかもしれません… React.memoの方がFCよりも重くなってしまうこともある Shallow Equal するよりそのままポンッと再レンダリングした方がコストが低い場合があります 特にコンポーネント内で大して処理してない場合（JSX返すだけとか）は使わなくても良いのかも？（パフォーマンス詳しい人教えてください） もちろんですがPropsに何も渡してないコンポーネントは やってもやらなくてもいいと思います 12/3 追記 Shallow Equal のコストのほうが重いので、後述する
slackで「投稿ルールが守られない問題」を自作のスラッシュコマンドで解決する(設定編) - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? slackあるある ※※お知らせ※※ 今後、備品購入を希望される方は当チャンネルで ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 【購入品名】 ： 【購入URL】 ： 【購入承諾者】： 【納品希望日】：2019/mm/dd 【備考】 ： ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ というフォーマットを使って下さい。 (ピンどめしておきます) 現実は・・・ フォーマットを自己流に改変する人 そもそもフォーマットを使ってくれない人 別のチャンネルで依頼する人 etc..... 解決策 今後、備品購入依頼は 当チャンネルで /bihin と投稿し、 表示される
encodeURIComponentが世界基準だと誤解してた話
URLをいじくるプログラムをいじっていて、仕様がよくわからなくて悩んだのでまとめます。 2/23: 追試部分を追記 2018/7/14: JavaScriptのURLSearchParamsと、GoのPathEscapeについて追記 ことの経緯 HTTPとはなんぞやとか、GETとPOSTがどうの、それぞれでパラメータがどういう経緯でウェブアプリケーション(とかCGI)に渡って来るのかぐらいは知っていました。で、ウェブでXHRでGETリクエストを送る場合にはJavaScriptのencodeURIComponent()で各パラメータをエンコードして、&でくっつけて、URLの末尾に?で付与すればいいんだよね？と思っていました。こんな感じに。 これを受け取る側は、JavaScript(node.js)ならdecodeURIComponent()を使っているはずだ。ウェブの世界ではJavaScri
ブラウザはCSSのセレクタを右から読む、ほんまか？ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 先日、 ブラウザ君「ワイはCSSのセレクタを右から読むんや」 という記事を読みまして、ちょっと気になったので後で確かめようと思っていたのですが、なんとなくそのままになってしまいやや旬を逃した感がありつつ、ツッコミを入れてみようと思います。 なお『ワイ「ほげほげ」』みたいな形式は使いません1。恥ずかしいので。 私は仕事でChromiumのソースコードをよく読んでいるので、ChromiumのソースコードからCSSの処理を見つけて、それを基準にして解説しようと思います2。そのため、他のブラウザのレンダリングエンジンと異なる最適化が施されている
自宅サーバーでTwitter連携サービスを運営してたら家宅捜索された件 - Qiita
概要 ある朝自宅に神奈川県警が乗り込んできた。 (なお自宅は神奈川県ではない) どうやら俺はTwitterにモロ画像を投稿していたらしい。 「間違いなくこの家から投稿されていた。プロバイダにも確認済みだ。」 「(ハンドルネーム)というアカウント使ってるでしょ」 「心当たりあるでしょ？」 「(ブランド名)のTシャツ持ってるでしょ？」 おやっ、何かがおかしいです。 想定される経緯 自宅サーバーではTwiGaTen( https://twigaten.204504byse.info/ )というWebサイトが稼動している。 そしてこいつはTwitterアカウントでログインしたアカウントのタイムラインを24時間365日収集し続けている。Twitterの仕様上、これは時々ログイン履歴として記録される。 そして警察はモロ画像をうｐしたアカウントのログイン履歴を見て… 「固定回線からうｐか。バカめ。」 「
will-changeで目指す60fpsのぬるぬるCSSアニメーション - Qiita
こんにちは、CSSとVue.jsでアニメーション使いまくりのポートフォリオ作ったり、シューティングゲーム作ったりして遊んでいるゆきです。 今日はCSSアニメーションで無茶しすぎてMacBookがカイロになった反省からの「負荷をかけずにぬるぬるのCSSアニメーションを実現するための試行錯誤」の顛末をまとめます。それでもCSSでアニメーションしたいんだ 今回の目的とサンプルケース この記事では、WebでCSSを使ってゲームやアート的な表現にゴリゴリのアニメーションを使いたい！というケースを想定します。 全体を通してCSSのwill-changeプロパティを使ったGPUレンダリングによる最適化のお話です。will-changeってなに？って方はこの後でてくる参考記事リストを先に見ていただくのが良いと思います。 https://css-anime.firebaseapp.com/ 今回検証するアニ
Cookieとセッション管理 - Qiita
Cookieやセッション管理といったWebアプリケーションの基本技術について改めて調べてまとめた。 『HTTPの教科書』、『プロになるためのWeb技術入門』が主な情報元で、RFC6265も一部見ている。 Cookieとは HTTPにおいてWebブラウザとWebサーバ間で状態を管理するプロトコル、またはそこで用いられるWebブラウザ上に保存された情報のこと ※ 参考：Cookieとは｜HTTP Cookie｜クッキー - 意味/解説/説明/定義 ： IT用語辞典 Cookieの目的 ステートレス（状態を維持できない）なプロトコルであるHTTP上で、状態管理ができるようにすること Cookieの仕組み まず、サーバがSet-Cookieという名前のフィールドをHTTPヘッダに載せてレスポンスを返す。Cookieとしてクライアントに保存して欲しい情報を、このSet-Cookieフィールドの値とし
Ricty を神フォントだと崇める僕が、フリーライセンスのプログラミングフォント「白源」を作った話 - Qiita
生成元にはプログラミング向け英文フォント Hack と、Adobe 製作の源ノ角ゴシックに丸みを付けた派生フォント 源柔ゴシック を使用させていただきました。 白源の生成元である Hack、及び源柔ゴシックには、いずれも SIL Open Font License Version 1.1 という大らかなライセンスが適用されているため、改変及び配布が自由となっています。したがって、白源の生成済みフォントファイル (ttf ファイル) は GitHub からダウンロードして、すぐにご利用いただけます。 「白源 (はくげん／HackGen)」の特徴 プログラミングフォント「白源 (はくげん／HackGen)」には以下のような特徴があります。 文字幅 半角1:全角2 の正統派な等幅フォント (文字幅 半角3:全角5 バージョンも同梱) Hack 由来の読みやすく、しっとりとした印象の英字 源柔ゴシ
【Vue.js】Web API通信のデザインパターン (個人的ベストプラクティス) - Qiita
はじめに Vue.jsを使用したアプリケーションでのWeb API呼び出しのデザインパターンについて調べてみました。 しかし検索して出てくるチュートリアルやサンプルは、コンポーネント内でaxiosをインスタンス化していたり、Vuexの中でaxiosを使用するというサンプルがほとんどでした。 しかし実際のプロダクトでこれをしてしまうと コンポーネント内でAPIアクセスの直書きによって単体テストが困難に Vuex(actions)の肥大化(使い回さない処理はStoreに記述しないほうがいいとする文献もある) API通信部分をPureJSでモジュール化しても依存度がイマイチ下がらない（コンポーネントでモジュールをインポートするため）。 などなど問題になることが多そうでした。 ある日、Jorge氏が投稿した「Vue API calls in a smart way」という記事にたどり着きました。
🎉React 16.8: 正式版となったReact Hooksを今さら総ざらいする - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 来たる 2 月 4 日、ついに React 16.8 の正式版がリリースされます。この React 16.8 には、アルファ版が公開されて以来常に React ユーザーたちの関心をほしいままにしてきたReact Hooksが正式版となって追加されます。 ※追記：アメリカ時間で 2 月 5 日になっても React 16.8 がリリースされませんでした。事前情報で 2 月 4 日と言ってたのに……。いつになったらリリースされるのかはよく分かりません。2 月 6 日に React 16.8 がリリースされました！ 熱心な React ユーザ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WebWorkerをenjoyableにするComlinkとは何者か - Qiita
JavaScriptでの賢いconsole.log( )の使い方 & その他便利なconsole.xxx( )使い方まとめ (dir・table・warn・groupとか) - Qiita
