pnpmについて 私は普段、パッケージマネージャーにnpmではなくpnpmを使っています。npmよりパッケージインストールが高速であったり、ちょっと良い機能が付いていたりします。1 この記事の内容のほとんどはnpmとpnpmのどちらでも問題ないように書いているつもりですが、念のため前提として紹介させていただきます。 create-next-appの実行(オプション追加) create-next-appにはいくつかオプションがあります。私はいつも以下のようにしています。 # pnpmの場合 pnpm dlx create-next-app ./some-directory --ts --no-tailwind \ --eslint --app --src-dir --import-alias '@/*' # npmの場合 npx create-next-app ./some-director

本稿は Next.js で今試せる React canary の機能「useFormState」に関する記事です。Server Action を使用すると、API Client を使用せずにブラウザから直接サーバーサイドの関数を実行できます。Server Action のメリットは以下のものが挙がります。 API Client が不要になる ハイドレーションを待たずに反応できる Progressive Enhancement を維持できる useFormState の話の前に、Server Action について少し触れていきます。 Server Action だけではない「Client Action」とは？ 「Server Action」というワードを知っている方は多いと思いますが「Client Action」はまだ馴染みのないワードかもしれません。React、Next.js いずれも公

タイトル通り、JavaScriptツール群「UnJS」にどんなライブラリが存在するのかをひたすら見てみよう！　という記事です。 本当は全て紹介しようと思ったのですが、全75個あり、1つの記事に入れるとあまりにも多すぎるので、この記事では2023年11月4日時点のStar数の順に沿って上位30個を紹介していきます。 UnJS とは UnJSは、Nuxt 開発チームが中心となって開発・メンテナンスされている、あらゆるJavaScriptフレームワーク上で統一的に動作するユーティリティーツール・ライブラリ群です。 UnJSというプロジェクトが何であるかについては、2022年11月に公開された講演映像「UnJS: Nuxt 3 behind the scenes by Pooya Parsa」を観て頂くのが最もわかりやすいと思います。Nuxt 3 正式リリース直後ということもあって、かなり詳細な背

YouTubeは広告ブロッカーをブロックするためのアンチ広告ブロッカーの展開を本格化しており、Adblock PlusやuBlock Originといった人気広告ブロッカーがYouTubeで機能しなくなっています。そんな中でもYouTubeで問題なく使えることをアピールしている広告ブロッカーが「FadBlock」です。 GitHub - 0x48piraj/fadblock: Friendly Adblock for YouTube: A fast, lightweight, and undetectable YouTube Ads Blocker for Chrome, Opera and Firefox. https://github.com/0x48piraj/fadblock 開発者のPiyush Raj氏によると、FadBlockは広告を検知・削除できるように設計された広告ブロッ

Bleeping Computerは10月30日(米国時間)、「Google Chrome now auto-upgrades to secure connections for all users」において、GoogleがすべてのChromeユーザーに対し、HTTPリクエストを自動的にHTTPSリクエストに変更する「HTTPSアップグレード」を開始したと報じた。Googleはこれまでにも同機能を限定的に展開していたが、2023年10月16日に安定版のすべてのユーザーが対象になったという。 Google Chrome now auto-upgrades to secure connections for all users 歴史的に、ブラウザはHTTPSをサポートするサイトにおいて安全ではないHTTPリクエストを行うことがある。Google Chromeでは、次のような条件でHTTPリソー

WebサイトやスマホアプリのさまざまなUIデザインにぴったりな、シンプルなソリッド・ベタ塗りからおしゃれなカラーまで揃ったSVGアイコンが完全無料で利用できるblendiconsを紹介します。 アイコンはなんと、200,000個以上！ ベーシックなUIをはじめ、ショッピングサイト、タッチジャスチャー、日用品や家具、飲食物、スポーツ、ミュージックなど、多種多様なアイコンが揃っています。 blendicons Blendiconsはデザイナーやデベロッパーが容易に必要なアイコンを手に入れられるように、200,000個以上の高品質なアイコンを作成し、ダウンロードできるようにしたサイトです。 アイコンの利用にあたっては個人でも商用でも無料で、Webサイトやスマホアプリをはじめ、プレゼンや印刷物などあらゆる用途に利用できます。アイコンをカスタマイズして利用することもOKです。ただし、アイコン素材をそ

Windows Subsystem for Linux（WSL）に新機能。使用メモリや仮想ディスクの自動縮退、LAN経由でWSLへ直接アクセス可能など マイクロソフトは、Windows上でLinuxの機能を利用できるWindows Subsystem for Linux（WSL）の2023年9月版となる新バージョン「WSL 2.0.0」で、使用メモリをWindowsに返却して自動的に縮退する「autoMemoryReclaim」や仮想ハードディスクを自動的に縮退する「Sparse VHD」、従来のNATに代わる新しいネットワークモード「Mirrored」によるLANからWSLへの直接アクセスなどの新機能を搭載したことを明らかにしました。 下記は今回の新機能を説明するブログの作者であるCraig Loewen氏のツイートです。 WSL has a new update with some b

HTMLはdivたった一つ、あとはCSSをコピペするだけで約580種類のローダーを実装できるCSS Loadersを紹介します。 ローダーは、バーやドットのシンプルなアニメーションから他ではあまり見ない面白いものまであり、ローダーを探すときはここをチェックすることをお勧めします。ローダーが不要な人でもCSSアニメーションを楽しめると思います。

はじめに もう文字列の置換で sed コマンド使うの禁止して良いんじゃないですかね？ 言いすぎだとわかってあえて言っていますが。 悪い書き方（外部コマンドに頼る方法） # 変数 line に入ってる文字列を echo コマンドで出力して sed コマンドに渡し、 # sed の s コマンドで "from" を "to" に置換して出力したものを ret 変数で受け取る ret=$(echo "$line" | sed "s/from/to/")

🤷‍♂️ 結合度とは みなさん、おはようございます！ さて、いきなりですが、みなさん プログラミングにおける、結合度とはご存知でしょうか？ 「知っとるわい！！」との声が聞こえてきそうですが、 かく言う私は、言葉は知っていても、細かい部分まで理解することができていませんでした と言うわけで、結合度に関してReactのコードを混ぜながら解説しましたのでご覧ください〜！ もし間違いあればコメントいただけると嬉しいです 凝集度編もあるよ！ 🤔 結合度って？ 結合度とは、関数、モジュール、コンポーネントなどが、どれだけ他のコンポーネントに依存しているかを示す指標 🤔 結合度が低い状態とは？ 結合度が低い状態とは、各コンポーネントが互いに独立している状態 もしくは非常に少ない依存性しか持っていない状態 独立性 各コンポーネントが、できるだけ自己完結している 他のコンポーネントに依存することなく動

「NAT（ナット）※1」はオンラインゲームを支える重要な技術のひとつです。 「NAT越え※2」に失敗するとマルチプレイができなくなりますし、「NATタイプ※3」の違いはマルチプレイのしやすさに影響します。 ところが、NAT は仕組みが難しく、初心者向けの記事も少ないため、イカスミカフェには NAT についての質問がよく寄せられます。 そこで今回は、Nintendo Switch（ニンテンドースイッチ）を例にして、世界一わかりやすく NAT を解説してみたいと思います。

筆者が知らない間に、Windows 10とWindows11の入力環境は生まれ変わっていました。 少々大げさな書き出しですが、「アプリを導入して、キーの割り当てを変更する」なんてことが面倒くさいという人にこそ試してみて欲しいカスタマイズ設定が、実は2020年5月のOSアップデートから導入されていたようなんです。 設定を適用すれば日本語入力の切り替え時にストレスを感じなくなるTIPSなので、ぜひ試してみて欲しいところ。以下に解説します。 【今日のワークハックはこんな人におすすめ！】 日本語と英語など、複数の言語を使用する人Windows10/11で、日本語入力の切り替えにストレスを感じている人 今日のワークハック：キーの割り当てを変更して日本語入力のストレスを減らすキーの割り当てを変更するPhoto: 田中宏和ところでスペースバーの左右にある「無変換」キーと「変換」キー、使っていますか？ 結

Google Apps Scriptの環境構築をVSCode上で行う方法について詳しく解説していきます。clasp,asideを使って構築するので、爆速で構築できます。 ことのはじまり 私は最近Google Apps Script(GAS)の学習を始めました。 GASの学習を始めると、まずはAppsScript公式のIDEでスクリプトを書いていくことになると思います。 しかし、普段VSCodeを使い慣れている身からすると、VSCodeの便利機能が使いたくて仕方なくなります。 それじゃあ、使い慣れたVSCodeを使おうじゃないか！！ AppsScript公式のIDEだとGitに差分を残していくこともできないぞ！！（できます） というわけで、GASをVSCodeを使って開発する為の環境構築の手順を書いていきたいと思います。 前提条件 VSCodeがインストールされている Node.jsがインス

あらすじ 公衆WiFiに繋いだ状態でいつものように docker container run -p 8080:80 nginx のような感じでDockerコンテナを動かしていたら、外部からリクエストを受信した。 ファイアウォールを設定し、外部からのアクセスを拒否しているはずなのになぜアクセスできたんだ... 環境 Docker desktop for mac with apple silicon 4.21.0 何が起きた? Dockerはデフォルトの設定では-p 8080:80のようにポートマッピングするとファイアウォールの設定を書き換え、外部からそのポートへのアクセスを許可するようになっている。 その結果LAN内の他のPCから対象ポートにアクセス出来てしまう。 ちなみにこれはDocker公式からも注意が出ている。 Publishing container ports is insecur

はじめにlink あまりモノレポの構成について語られている記事が多くないなと感じたので、現時点で自分が考えている設計をまとめてみる。 以前にTwitterでディレクトリ構成と内容については言及したが、実際に利用する技術についてはあまり触れなかったので改めて検証してみた。 https://twitter.com/koh110/status/1617510034266808322 クライアントサイドとサーバーサイドのコード共有については下記の記事がよくまとまっていた。 https://capelski.medium.com/effective-code-sharing-in-typescript-monorepos-475f9600f6b4 上記の記事の構成も参考にしつつ、自分の考えも加えて検証していく。 相対パスを利用する方法 npmのローカルパス指定（file:xx）を利用する方法 シンボ

アクセシビリティとはアクセシビリティは、サービスや情報をどんな利用者も円滑に利用できるかの度合いです。 アクセシビリティが高いほど、より多くのユーザーが円滑に利用でき、アクセシビリティが低いほど、より多くのユーザーが利用できないということです。 アクセシビリティ向上は、障害当事者だけでなく、さまざまな環境や状況にいる人、高齢者、日本語以外を得意な言語とする人など、すべての人のためのものです。人だけでなく、サービスや情報にアクセスする機械(ロボット)もアクセシビリティの影響を受けます。 SmartHRの開発方針SmartHRは「well-working 労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会を作る。」というミッションを掲げ、働くすべての人を後押しするプラットフォームをつくっています。 誰もがその人らしく働ける社会を実現するため、SmartHRはアクセシビリティの向上に取

目次＃ 前編 準備段階：計画と指標 パフォーマンスを重視する文化、Core Web Vitals、パフォーマンスのプロファイル、CrUX、Lighthouse、FID、TTI、CLS、端末。 現実的な目標の設定 パフォーマンスバジェット、パフォーマンス目標、RAILフレームワーク、170KB/30KBバジェット。 環境の定義 フレームワークの選択、パフォーマンスコストの基準設定、Webpack、依存関係、CDN、フロントエンドアーキテクチャ、CSR、SSR、CSR + SSR、静的レンダリング、プリレンダリング、PRPLパターン。 中編 アセットの最適化 Brotli、AVIF、WebP、レスポンシブ画像、AV1、アダプティブメディア読み込み、動画圧縮、Webフォント、Googleフォント。 ビルドの最適化 JavaScriptモジュール、モジュール/ノーモジュールのパターン、ツリーシェイ

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

こーじ提督🐇KB_fishing Ch所屬 @hegeshan_k 先日、ATM行ったら前のお客さんの忘れ物と思われるクレジットカードが置かれたままになっていた。 「やば。。。。」ってなったけど、周囲に誰もいない。そもそもATMコーナーに僕だけ。誰ともすれ違っていない。 で、どうしていいかわらからんからATMに付属している受話器を利用してみた。 2023-06-22 11:58:28 こーじ提督🐇KB_fishing Ch所屬 @hegeshan_k コールセンター？みたいな所に繋がるので、 「ATMにクレカ落ちてたんですけど。。」って話した。 コ「そのクレカをATMに挿入してください」 僕「え、僕触っていいの？？？」 コ「はい、ATMで回収しますので」 僕「じゃあ、、挿れるね(ｽﾞﾌﾟﾌﾟ..」 コ「取り消し、押してください」 僕「アイアイ」 2023-06-22 12:00:51