🎊Reactの2種類の新フック「useTransition」と「useDeferredValue」を最速で理解する（プレビュー版） - Qiita
🎊Reactの2種類の新フック「useTransition」と「useDeferredValue」を最速で理解する（プレビュー版）JavaScriptReact 10月25日、Reactの新機能であるConcurrent Modeのプレビュー版が発表されました。この中には、Concurrent Modeの恩恵を得るために必要となる新しいAPIが含まれています。 これらのAPIの中心となるのが、Suspenseと2種類の新しいフックuseTransitionとuseDeferredValueです。この記事ではこの2種類のフックに焦点を当てて、これらが何をしてくれるのか、どのようにこれらが新しいのかを解説します。 要するに、Reactの公式ドキュメントを読んでまとめましたということです。特に、ガイドを一通り読んで理解しないとこれらのフックが何をしているのか理解しにくいため、最速で理解できるよ
ワイ「アニメーションするにはこのuseTransitionってのを使えばええんか？」 - Qiita
社長「やめ太郎くん」 ワイ「なんでっか社長、ワイは今Reactのアプリを半分だけVueに書き換える作業で忙しいんでっせ」 ハスケル子「（何でそんな意味不明なことを……）」 社長「せやったな、これからはVueの時代やからVueの使用実績を増やさなあかんねん」 ワイ「とはいえReactも今年公式ドキュメントの日本語版が出たり勢いづいとるから捨てがたい」 社長「せやから半々にしてどっちも取り入れるんや！ 素晴らしい施策やろ！」 ワイ「さすが社長！」 ハリー先輩「（案件を半々にするんちゃうのかい！）」 ハスケル子「（私は何でこんな所でインターンしているんだろう）」 ※ この記事は全面**無職やめ太郎さんリスペクトのワイ記法**でお送りする二次創作記事です。（6ヶ月ぶり3回目） Reactでアニメーションを実装したい 社長「さて、今回はアプリにいい感じのアニメーションを追加してもらいたいんや。これか
Angularでの開発を快適に進めるために知っておきたいこと - Qiita
Help us understand the problem. What is going on with this article? この記事は Angular #2 Advent Calendar 2019 3日目の記事です。 こんにちは、奥野賢太郎（ @okunokentaro ）です。今回は同日に公開された記事『フロントエンドフレームワーク選定前に知っておくべき Angular の 6 つの問題点と、それでも Angular を選ぶ理由』のアンサー記事として、筆者の考える問題点の克服方法、または誤解の解消、および自分がAngularを選ぶ理由を述べようかと思います。 特定のAPIの便利な使い方…とかよりは、もうちょっと視座の高い話になっています。また本稿内にてReactの言及が多いことについては、アンサー元の記事がReactを推しておられることに由来しており、それらの節で言及してい
package-lock.jsonの各プロパティについて調べてみました。 - Qiita
JavaScript Advent Calendar 2017 13日目の記事です。 今年はnpmが5にメジャーアップデートされました。 npm5になり新しく加わった機能の一つにpackage-lock.jsonがあります。 他の機能についてはこちら(npm v5 がリリースされた) 今回はpackage-lock.jsonの各プロパティについて詳しく載っている日本語記事が無かったので調べてみました。 内容に不備があったり気づいたことがあればどんどんコメントください。 きっかけ package-lock.jsonについては依存パッケージの固定化する機能であったり、元々はnpm-shrinkwrapというものがあってそれを改良したものであったり等は聞いたり読んだりしたことある方は多いかと思います。 私も「依存パッケージの固定ができるなんて便利だな、公式もコミットするのを推奨しているしgit管
Rictyのバッククオートを修正する - Qiita
Rictyはライセンスの関係上、使用に際してフォントを手元で合成する必要がありますが、2018年6月26日現在、合成後のフォントに不具合があり、バッククオート(`←これ)が後続の文字に重なって表示されてしまいます。 FontForgeを使うと簡単に修正できるのですが、軽くググった感じだと情報が見付からなかったので、ここでまとめておきます。 コメントでCUIで完結させる方法を共有してくださっているので、そちらもぜひ参照してください。 用意するもの 合成済みのRicty / Ricty Discord FontForge GUI 修正手順 FontForgeのGUIを起動します 編集したいフォントファイルを開きましょう(Ricty-Regular.ttf, RictyDiscord-Regular.ttf等)。 ずらっと表示された文字の中から、バッククオートを見付けましょう。文字コードはU+0
Git submodule の基礎 - Qiita
この記事は Git Advent Calendar 6日目の記事です！ Git submodule って最初わかりにくいと思うので、基本的な説明をしようと思います。 git submodule とは git submodule は、外部の git リポジトリを、自分の git リポジトリのサブディレクトリとして登録し、特定の commit を参照する仕組みです。 Subversion でいうところの、external と似ています。 さて、解説のため、手元に、リポジトリA (/path/to/a) とAの submodule として、よく使う例として Bootstrap (元Twitter Bootstrap) を登録してみます。 git submodule を理解するうえで重要なのは、 リポジトリAが指し示すsubmoduleとしてのBootstrapのcommit 現在のBootstr
マイクロサービスほどじゃないけどウェブサービスを分割開発したい人向けDocker設定を集めるスレ - Qiita
Futureアドベントカレンダー6日目です。昨日は @shun_shushu さんでした。 マイクロサービスまではいかなくても、gRPCなり、Swaggerなりを使って、リッチなSPAのフロントエンドと、いくつかのプロセスに分割されたバックエンドでサービスを開発したい、というニーズはあると思いますので、今までやってきた開発の反省・良かったところを踏まえて、次やるなら絶対にこうする・実際にこうし始めた！というDocker活用案です。 フロント、バックエンドのサービスを種類ごとに書いています。好きなフロントエンドと、好きなバックエンドのレシピを組み合わせて、オリジナルのdocker-compose.ymlを作る、という感じで読んでいただけるように書いています。対象言語とかも増やしたいので、この記事自体、検証結果を受けてどんどん変わっていく予定です。 ソースコードは次のリポジトリに置いておきます
TypeScript v3.7.2 変更点 - Qiita
更新 2019/11/06 正式版がリリースされて微妙に差分があったので更新 更新 2019/11/01 Call Hierarchy について更新 こんにちはメルペイ社な@vvakameです。 TypeScript 3.7がアナウンスされました。 What's new in TypeScript in 3.7 Breaking Changes in 3.7 TypeScript 3.7 Iteration Plan TypeScript Roadmap: July - December 2019 Roadmapはこちら。 この辺に僕が試した時のコードを投げてあります。 変更点まとめ Optional Chainingのサポート Add support for Optional Chaining stage 3になったので foo?.bar.baz() とか書けるやつ ?. でワンセット
開設後３週間で収益１０万円を得た個人開発サイトでやったことの全部を公開する - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 開設して３週間ほどで収益１０万円を個人開発サイトから得たので、そこでやったことを全部ここに公開する。 世の中には＊＊億ドルのバリュエーションを獲得したスゲー起業家の話か、個人開発サイトを立ち上げたものの収益なんてゼロに近い話かの両極端しか無いように感じる。 パッと立ち上げてだいたい１ヶ月でiPhoneXが買えるぐらいのサイト規模というのは、どんなレベルのエンジニアでも手が届く範囲内にあるのが実感だ。「人生賭けて起業！」とかそんな熱い話ではない。普段の仕事が終わったら、ちょこちょこコードかいて個人的にアプリを公開して収益を得る、ぐらいの話
GitHubのスターは金にならない - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Sizzyというツールがあります。 様々なサイズの画面を同時に表示し、レスポンシブレイアウトがどうなるかを一気に確認できるという便利なツールです。 スマホ向けWebサイトを開発している人なら、持っていると非常に便利でしょう。 参考：レスポンシブの確認ツール、後発だけに便利！スマホ・タブレットの主要なデバイスでの表示確認が同時にできる -Sizzy / 『Sizzy』様々なデバイスでのサイト表示を確認出来る便利サイト さてこのSizzy、元々無償のChromeエクステンションだったのですが、先日2019年7月に単独のアプリとして有償化され
ユーザエージェントでの iPad 判定関数 iOS/iPadOS 対応版 - Qiita
追記 2019-09-03 @BYODKM さんから、簡潔に iPad か否かを判定するプロパティを教えていただきました。ありがとうございました。（実機 iOS12, iPadOS の iPad にて確認済みです） 下記のコードで iOS12 と iPadOS どちらでも iPad か否かを判定できます。 const ua = window.navigator.userAgent.toLowerCase(); const isiPad = ua.indexOf('ipad') > -1 || ua.indexOf('macintosh') > -1 && 'ontouchend' in document;
新しく登場した一括管理アプリ「Stack」がガチで便利だったから聞いてほしい - Qiita
Product Huntをみていたら、 Stackというアプリが話題になっていたので、チラッとみてみました。 Webアプリを一元管理できるようで、有名どころだと「Franz」「Station」があります。 私は「Station」を愛用しており、乗り換える気持ちはなくて、「試しに触ってみるか」くらいの感覚でDLしました。 （Product Huntで超人気アプリを使ってみたかったというのもあります） 使ってみた結果、最高に便利な一元管理アプリで、速攻でstationから乗り換えました(掌返し) ぜひ皆様にその感動をいち早くお届けしたくて、超久しぶりにQiitaに投稿します。 →https://stackers.app/ ※2019/9/27時点、Mac限定のアプリです。 Stackを激推したい３つの理由 個人的にStackいいなぁと思うポイントは３つあります。 横スクロールで一望できる カテ
idやclassを使ってテストを書くのは、もはやアンチパターンである - Qiita
いきなり結論を書くと、idやclassはスタイルのためのものなので、テストでそれを使うのはやめましょう。そして、カスタムデータ属性を使いましょう。(idやclassはスタイルのためだけではないという意見はごもっともです！しかし、主にとしてスタイルに使われるということでご了承頂いて以下の駄文に付き合って頂けると幸いです🙇) 先に断っておくと主にreactについての話で、JSXを前提とします。(手法はReactに限りませんが理由は後述) 2020/03/23 追記 この記事は1年以上前に書かれた記事なのでテストフレームワークとしてenzymeを使っていますが、現時点ではTesting Libraryの使用をオススメします。data-testid に対応するクエリを備えています。 React Testing Library · Testing Library はじめに ご存知の通り、ロジックと
GitHub Actions で Windows IE11 と Mac Safari を selenium-webdriver で動かす - Qiita
GitHub Actions で Windows IE11 と Mac Safari を selenium-webdriver で動かすSeleniumselenium-webdriver 最近得た天啓で、 「GitHub Actions はコンテナを windows / mac / ubuntu から選べるということは、 本物の safari と ie11 を selenium-webdriver で動かすことができるのでは？」 と思ってガチャガチャやってみたら、なんとできてしまったので、紹介します。 今回は node で。 name: xbrowser on: [push] jobs: e2e-ie: runs-on: windows-latest steps: - uses: actions/checkout@v1 - uses: warrenbuckley/Setup-Nuget@
おまえはReact hooksを知っているか - Qiita
よく来たな。おれは毎日すごい量のコードを書いているが、誰にも読ませる気はない。しかし今回はReact hooks という真の男のためのAPIを発見したのでいてもたってもいられずQIITAに記事を書くことにした。 （この記事の文体は、逆噴射聡一郎先生のパロディです。） お前は毎日VUEだとかREACTだとかPWAだとかBBBFFだとかそういう流行に常に振り回されながらフロントエンドというメキシコを生きている。フロントエンドで生まれてくる技術のほとんどは、マッチの火より儚くすぐ消えてなくなるものだ。しかし、流行に乗り遅れるのを恐れているおまえはそういった技術にとびつき、チュートリアルをよみ、すべてを理解したと息巻いてプロダクトに導入し・・・やがてそれの流行がおわり・・・メンテをするのが辛くなり・・・しぬ。フロントエンド界隈ではへなちょこな技術がもてはやされ、しばらく経ってそれが全く使い物になら
宣言的UIは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? この記事は、ある程度以上の規模のGUI開発において、React Hooks以後の宣言的UIにより、大規模開発に用いられる設計論に完全に対応できるようになり「ビジネスロジックの変更や追加」に対応するコストを低く保つこと（技術的負債の抑制）ができるようになったことを解説するものです。 技術的負債の抑制には、技術的負債の原因となりがちな「広範囲の密結合」と「適切な疎結合を保つ仕組みの欠如」が欠かせません。それをカバーするのが、大規模開発をクリーンに行える設計論（ここでは「現代的な設計論」とよぶもの）です。クリーンアーキテクチャなんかでGUIに
S3+CloudFrontでWebフォントを利用する（FireFox対応） - Qiita
結論からいうと、以下の3点で対応可能です。 1.S3 のバケットに CORS の設定を行う。 S3 Management Console で対象バケットを開き、右上の Properties ボタンを押します。 項目がいくつか現れますが、その中の Permissions を展開して、Edit(Add) CORS Configuration ボタンを押し、表示される CORS Configuration Editor に以下のように入力して saveします。 AllowedOrigin は Web フォントを使用するリクエスト元となるドメインです。 必要な数だけ列挙します。 <?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <COR
あなたがnpm installをしてはいけない時 - Qiita
記事を移転しました。 以下の概要をみて、興味があればご覧ください。 概要 あなたは普段、何気なく npm install を使っていることでしょう。 しかし、 npm install が何をしているのか、実は誤解している人も多いと思います。 記事のタイトルは釣りではないので、どんな時に npm install は問題を起こすのか、説明できない人は以下を読み進めてください。これは多くの開発者が無意識に無視している、とても重要な事項だと思っています。 なお、npm 4.x系以下の方は本記事の対象ではありません。 続き -> https://blog.minimalcorp.com/users/jigen/posts/6f325dc9b8a00370b6aedf47a34cb3ce
2行でwebpack.config.jsで補完を効かせる方法 - Qiita
まず前提として、webpack.config.jsそのものをTypeScriptで書くことができる。公式ドキュメントにも記載があり、ts化自体は数分で終わる。しかし、このwebpack.config.jsをStoryBookの設定から参照するなど他のツールから読まれるときにTypeScriptだと不都合な場合がある。そのようなときに、この方法を使うと1分もかからず補完の効く環境を用意できる。便利なので是非導入してほしい。 Configuration Languages | webpack How 方法は簡単で、@types/webpackをインストールし、上の動画のようにコメントを書くだけ。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
公式ドキュメントを読んでもinferが理解できない人のためのinferの説明 - Qiita
