こんにちは。Reactの話題の中でもかなりの部分を占めるのがステート管理、さらに言えば各種のステート管理ライブラリです。今さらながら、Reactにおけるステート管理の手法やいくつかのステート管理ライブラリを比較考察して記事にまとめました。 useState + バケツリレーReactにおける基本的なステート管理はuseStateです。ひとつのコンポーネント内で完結するようなステートならばuseStateは非常に適しており、他の選択肢はほぼ無いと言っても構わないでしょう。 ステートをアプリケーションの広範囲で使いたい場合が問題です。次の画像に例示されるように、分岐したコンポーネントツリーの末端のコンポーネント（使用者）で同じステートを参照したい場合を考えます。 useStateと組み合わせる場合、もっとも原始的な方法はpropsのバケツリレーによるものです。propsは親コンポーネントから子

Vite（ヴィート＝フランス語で「速い」の意味）は2020年に発表された新しいフロントエンドのビルドツールです。 開発者がVue.jsの作者であるEvan You氏であるため、Vue.jsのツールであると誤解されることもありますが、プレーンなJavaScript（バニラJS）からVue.js・React・Svelteといった流行のフレームワークまで、さまざまな環境で利用できる汎用的なツールです。 位置付けとしてはwebpackのようなバンドラーと呼ばれるものに近い存在ですが、それだけではありません。この記事では、Viteを導入してプレーンなJavaScriptから、TypeScript+Vue.js・Reactといったフレームワークまで、快適な開発環境を手に入れる方法を紹介します。 この記事で紹介すること： Viteの特徴と基本の仕組み 基本の使い方 Vite + SCSS Vite +

みなさんはPicture-in-Picture(PiP)という機能を使ったことがありますか。PiPは動画コンテンツなどを浮遊する小窓に表示する機能です。小窓はウィンドウの外側を自由に移動できます。 デスクトップが賑やかになりがちなPCでもPiPは大活躍なのですが、特にスマートフォンにおいては数少ない「ウィンドウ」機能になります。Androidはもちろん、iOS14も対応したことで話題になりました。 これによってスマホ一台あれば、ソシャゲの公式生放送を見ながらソシャゲのイベントを周回する地獄のような行為が可能になりました。 利用者という視点から見ると非常に便利なのですが、開発者から見ると動画しか表示できないのはなかなか使い所が難しくなります。そこで、この機能を使って好きな情報を表示できないか実験してみました。 PiP機能の対応環境 Chrome 70 Firefox 71（制限付き） mac

「かっこいいウェブサイト」とはどのようなものでしょう？　ICS MEDIAを見てくださるみなさんであれば、ダイナミックなアニメーションや3次元的な動きがあるウェブサイトに「おっ」と惹きつけられた経験は一度や二度ではないかと思います。たとえば、スクロールに連動したインタラクティブな動きは冒険するようなワクワクした気持ち、没入感を与えてくれます。 『ポーラ2029年ビジョン』 本記事の前半では、話題になったウェブサイトからかっこいいスクロール演出の事例を取り上げ、それらを分析します。 さらに記事の後半では、「自分でも作ってみたいなぁ、でもどうやって実装しているんだろう？」と悩むみなさんに向け、オリジナルのデモを用いて実装を紹介します。 本記事を読んだ後には、「どうやって実装しているんだろう？」と未知の技術に感じていたスクロールアニメーションも、「こうやっていたのか！」と身近に感じられるようにな

この記事について 上記のようなドラッグ&ドロップを使った並び替えの処理を自作したは良いものの、使うことが無くなってしまったので、供養の意味を込めて、その時に得た知見をこの記事で共有したいと思います 💪 実装する条件 この記事で実装する処理は以下の条件のもと実装してきます。 サードパーティ製のライブラリを使用しない React Hooks を使って実装する 並び替えするときにアニメーションさせる 簡単に扱えるようにする！ アニメーションは CSS を使って行いますが、今回は簡略化の為に CSS ファイルは扱わずにインライン CSSを用いる事とします。 どのように使えるか考える では早速、「 実装していくぞー 💪 」と行きたい所ですが、今回のような汎用的な処理を自作する時は、「 どういう感じで使いたいか？ 」という所から考えた方が、色々とやりやすいと思っています。なので、今回はそこから考え

棒グラフや折れ線グラフ、どうやって実装していますか？ Charts.cssなら簡単です。データをtableタグで実装し、CSSのクラスをtableに加えるだけで横棒グラフ、棒線グラフ、折れ線グラフ、エリアグラフなどを簡単に実装できるCSSのフレームワークを紹介します。 HTMLは普通の表組みなのでアクセシブル、グラフやチャートはレスポンシブにも完全対応した優れものです。 Charts.css Charts.css -GitHub Charts.cssの特徴 Charts.cssのデモ Charts.cssの使い方 Charts.cssの特徴 Charts.cssはtableで実装した表組みにシンプルなCSSのクラスを加えるだけで、さまざまなグラフやチャートを実装できるフレームワークです。カスタマイズも簡単で、ユーティリティのクラスも豊富に用意されています。 HTMLとCSSだけで実装 セマ

東京オリンピック・パラリンピック組織委員会の森会長が、JOC＝日本オリンピック委員会の評議員会で「女性がたくさん入っている理事会は時間がかかる」などと発言し、国内外から批判の声が上がったことを受け「オリンピック・パラリンピックの精神に反する不適切な表現だった」として発言を撤回し謝罪しました。 東京大会の組織委員会の森会長は3日、JOCの評議員会で「女性がたくさん入っている理事会は時間がかかる」などと発言し、国内外から批判の声が上がっていました。 これを受けて森会長は4日午後、都内の組織委員会のオフィスで報道陣の取材に応じ「きのうの発言については、オリンピックパラリンピックの精神に反する不適切な表現だった」として発言を撤回し謝罪しました。 JOCは、規定で女性の理事の割合を40％以上とすることを目標としていて、森会長は「ガバナンスに対しては数字にこだわると運営が難しくなることもある。私が知っ

「中止という選択肢はありませんよ。今も、準備は着々と進んでいます」（東京五輪の運営に携わる関係者） 7月23日に予定されている東京五輪の開会式まで、あと半年を切った。収まることのない新型コロナウイルスの感染拡大を受け、にわかに中止や再延期について報じられるようになってきたが、1月21日、国際オリンピック委員会（IOC）のトーマス・バッハ会長は「7月に開催しないと信じる理由は、現段階では何もない」と発言し、その可能性を否定した。 しかし、五輪の中止・再延期を望む声は根強い。NHKの世論調査（1月13日発表）によれば、東京五輪・パラを開催すべきか、という質問に対し、合わせて77％が「中止すべき」「さらに延期すべき」と回答。「開催すべき」の16％を大きく上回った。 ただし、中止を決めたら今度は、大きな経済損失が発生するのでは、との指摘がある。宮本勝浩・関西大名誉教授の試算によれば、大会が中止され

この記事は Front-End Study #3 で発表されたライブコーディングの内容を記事にしたものです。記事中のソースコードは GitHub でご覧いただけます。 この記事は、これまで一般的なフロントエンドエンジニアだった私が一年ほどアクセシビリティーについて勉強する上で 「最初に教えてくれればよかったのに〜！」と思った内容 を React と Next.js を用いて紹介するものとなっています。 読み終わった後に次にコードを書く際にふと意識できるようなアクセシビリティーの普遍的な事実を紹介し、最後に今後の React の動きについて軽く触れるものになっています。目次は次のとおりです： 基本事項 SPA のルーティングによる問題 リッチなコンポーネントでの例 Jest + React Testing Library でのテスト Reactとアクセシビリティーの今後の動き 役に立つweb

これまでのあらすじ 財テクを書いた後に、いままで賃貸に住んでいて、戸建かマンションを買ってみるかとなった COVID-19 の影響で在宅勤務が長期化しており、都心の 1LDK よりも、少し郊外で広い家に引っ越して、書斎というかオフィス的な空間を自宅内に用意したいと考えた 家の買い方に関する本をいろいろ買って読んでみたり、ネットの記事を読んでみたり、実際にマンションの購入手続きを進めてみたり (途中でキャンセルしたけど) 、仲介業者の紹介でファイナンシャルプランナーに相談したりした 前提 shunirr の独自研究による財テクをまとめています shunirr は、そこそこの規模の会社勤務なソフトウェアエンジニア、東京 23 区内在住、実家は田舎の賃貸で、相続できる資産とかは無い shunirr の思想・価値観によってまとめられているので異なる価値観の人には合わない可能性があります shuni

はじめに 脱サラして、個人開発アプリだけで生活している、あたか絵師です。 Crieitアドベントカレンダー10日目として、売れるアプリにするためのコツを100個吐き出します。 僕は、個人開発アプリで月6桁の売上を出す感じですが 「売れてるな〜！！」 って感じるのは、1万円/月を超えるぐらいのアプリなので 「売れるアプリ」＝「コンスタントに1万円/月ぐらい売り上げるアプリ」 と考えて下さい。 何となく書いていたら ・ASO ・CS ・UX ・企画 ・マーケティング ・運用 に分かれる気がしたので、その分類でいきますよ！ 普段もたまに役立つことをつぶやいている可能性があるので、twitterフォローもどうぞ🐔 👉👉 https://twitter.com/atagon 👈👈 noteとzennの記事も気になったらどうぞ 📱 食えるアプリにするための細かい工夫 (Zenn) 📱 売

飲食店などを訪れた際にメールアドレスを登録すると、同じ場所にいた人の感染が確認された際にメールで知らせる大阪府の「大阪コロナ追跡システム」の利用が進まず、運用が始まってから半年余りの間に、感染が発生したという通知が一度も送られていないことが分かりました。 「大阪コロナ追跡システム」は、飲食店やイベントの利用者が店頭などに掲示されたQRコードをスマートフォンで読み取ってメールアドレスを登録すると、同じ頃、同じ場所にいた人の感染が確認された際にメールで知らせるシステムで、ことし5月、大阪府が運用を始めました。 これまで、合わせて5万2000件余りのQRコードが飲食店などに掲げられましたが、利用者のメールアドレスの登録数は、1日当たりおよそ1万3000件にとどまっています。 府ではQRコードを掲げても、利用者がほとんど登録していない店もあるとみています。 このシステムについて、NHKが運用状況を

私はフロントエンドエンジニアとして働いてはいるのですが、巡り合わせが悪いのでしょうか？まともなテストを書いたことがないんですよね。まあ、それもでテストくらい書けないとなぁ。なんて思ってはちょいちょい調べたりする日々を過ごしていました。 そんなある日、たまたま TDD（テスト駆動開発） についての動画を視聴してみました。 TDD 自体は知ってはいて、なんとなく知っているくらいの知識ではありましたが、分かりやすい説明とその思想が好きで、のめり込むように見てしまいました。 その後も何度か視聴して、フロントエンドでも TDD したいなと考え始めました。 普段テストすら書いていないのにいきなり TDD とも思わないこともなかったですが、実際に普段自分がさわっているようなコードに落とし込んで書いていくと、テストする本当の意味というものが、より正確に理解できてきたような気がします。 そんなテスト初心者の

セキュリティは難しいです。 ですが、プログラミング初学者の皆さんは必要以上に萎縮せず、どんどんアプリケーションを作り、公開することにチャレンジして欲しいと私は思っています。 一方、事実として、脆弱なアプリケーションが公開されている（サーバ上でアクセス可能な状態になっている）だけで、全く無関係な第三者が被害を被る可能性があることは知っておく必要があります。 それはWordPressを使った単なるWebサイトであったとしても同じです。 また、あなたのアプリケーションが破壊されて困らないものであったり、 個人情報を保持していないものであったとしても、です。 だから、知らなかった、では済まされないこともあります。 この記事では、PHPのソースを例に、 特にプログラミング初学者が生み出しやすいアプリケーションの脆弱性について、 具体的なコードを挙げながら解説します。 なお、本記事のサンプルコードはも

最近Chrome DevToolsについて調べていて発見した便利機能を紹介します。 誰もが使える最高便利な開発マシンChrome DevToolsを使いこなして開発体験を変えましょう！ 1. $0で選択中のDOM要素の取得 特定の要素に何かしたいという時には、要素のIDやclassを確認してConsoleでdocument.querySelector("#xxx")で取得するというのが一般的だと思います。実はそれはカーソル選択と$0で代替できます。 Classや、IDがついていない特定のDOMを取得したい時とかにも使えるので地味に便利です。 手順 カーソルで取得したい要素を選ぶ Consoleタブで$0を入力 最近知ったChrome DevToolsの便利機能① $0 での選択中のDOM要素取得 Elementsタブで選択状態のDOM要素は、Console上で $0 を入力することで取得で

[レベル: 中級] この記事では、Wordpress 5.5 に標準実装されたサイトマップ生成機能を無効化する方法を紹介します。 WordPress のコア XML サイトマップ機能 リリースされたばかりの WordPress 5.5（この記事を公開している時点での最新バージョン）は、検索エンジン向けの XML サイトマップを作成する機能をコア機能として標準実装しました。 これまでサイトマップ生成にはプラグインを利用していました。 コア サイトマップは WordPress をインストールしたディレクトリの直下に作られます。 ファイル名は wp-sitemap.xml です。 example.com に WordPress をインストールしていたらサイトマップの場所は example.com/wp-sitemap.xml になります。 アクセスしたサイトマップはこんな感じです（正確には、サイ

【Step1】Google Colaboratory のノートブックを新規作成 Google Colab を起動して、ノートブックを新規作成します。 【Step2】Gradio インストール 以下のコマンドでPythonライブラリの Gradio をインストールします。