はてなブックマーク

こんにちは。本業フロントエンド副業パイソニスタのぬこすけです。 Python エンジニアの皆さん、元気にリファクタリングしていますか？ 最近、昔作ったサイトで Python で書いたバックエンドのコードをリファクタリングしているのですが、負債まみれで吐きそうです😇 この記事では Python のコードをリファクタリングする際の参考になる例をいくつか紹介します。 ぜひ普段の Python での開発の参考になればと思います！ 注意事項 対象読者は Python 初心者から中級者 を想定しています。 Python のバージョンは記事執筆時点(2023/6/15)で最新の 3.11 を前提にお話します。 必ずしも紹介した方法が最適解とは限りません。というのも、プロジェクト毎で状況が違ったり、コードに対する思想というのも人それぞれだからです。 「こういう方法もありますよ！」などあればコメントいただ

普段なにげなく使っているコードでも、実は面白い裏の仕組みがあったりします。 最たる例は setTimeout です。 実は window.location も深掘っていくと興味深い事実を見つけることができます。 今話題の ChatGPT に聞いてみます。 うーん、期待する回答ではなかったです。 今回は window.location で URL を変更した時に裏でどのような仕組みでブラウザが動くのか を深掘っていきたいと思います！ 本来は難しい内容ですが、 初心者の方でもわかりやすく説明 したいと思います。 Google Chrome ブラウザの仕組み window.location の秘密をお話する前に、 Google Chrome がどのように動いているかを知っておく必要があります。 Chrome は マルチプロセスアーキテクチャ を採用しています。 普段何気なく Chrome を使っ

こんにちは。ぬこすけです。 皆さんは React でフォームをライブラリを使わずに実装する時にどう実装しますか？ おそらく useState を使いまくっているのではないかと思います。 少し上級者の方は useReducer を使っているかもしれません。 が、そもそも React で状態管理することなくフォームは実装できます 。 実際にコードをお見せしながら紹介しましょう。 ※記事の最後に紹介した全てのコード例を CodeSandbox に載せています。 ありがちな例 コードをお見せする前に、まずはありがちな例から見たいと思います。 （結論のコードだけ知りたい方は読み飛ばして OK です） 簡易的なフォームの例です。 useState を使った実装は次のようになります。 import { useState, ChangeEventHandler, FormEventHandler } fr

こんにちは。ぬこすけです。 みなさんは React でパフォーマンスチューニングをする時に React.lazy をよく使うのではないでしょうか。 この React.lazy はパフォーマンスチューニングの恩恵を受けられるものの、実はデメリットもあります。 この記事では React.lazy をちょっとカスタマイズして、 React.lazy をメリットを受けつつもデメリットも軽減するような方法 を考えたいと思います。 React.lazy とは React.lazy という API を使うことでコンポーネントを必要なタイミングになった時に読み込ませることができます。 import { Suspense, lazy, useState } from 'react'; const Modal = lazy(() => import('./Modal')); function MyCompon

こんにちは。ぬこすけです。 皆さんは React でエラー画面を出す時どうしていますか？ おそらく、こんな感じで頑張っているんじゃないかと思います。 function MyWidget() { const [isError, setIsError] = useState(false); useEffect(() => { // 何かしらデータを取得する処理 fetchSomething() .then(() => { // データの取得に成功した時の処理 }) .catch(() => { setIsError(true); }) }, []) if (isError) { return <div>エラーです</div> } return <div>正常です</div> } いたって普通のコードです。 が、コンポーネントごとでこのようなエラーのための処理を書いていくのは手間がかかります。

こんにちは。ぬこすけです。 最近（2022/10/24）、 setTimeout について記事を書いたのですが、予想以上に多くの人に読んでいただけて嬉しい限りです。 setTimeout によって処理を遅らせることは皆さんご存知かと思います。 （上の記事に詳しい仕組みは解説しているので、ぜひ一読ください） ただ、 setTimeout にも問題はあります。 それは 処理の優先度をブラウザに教えることができない 問題です。 setTimeout はただ処理を後回しにしているにすぎません。 後回しにするにしても「この処理は優先度が低いので、ひまな時にやってね」みたいに詳しくブラウザに教えることができません。 パフォーマンスの観点では、重要な処理は優先的にさばいてより快適なユーザー体験を提供したいところです。 この問題を解決するためにあるブラウザ API が生まれました。 今回はこのブラウザ A

こんにちは。ぬこすけです。 最近（2022/10/20）に、ゆめみさんがクイズを出しました。 ゆめみさんの記事を読むと、 Proxy というオブジェクトが出てきました。 記事のタイトル通り「代入したのに、代入されない」、摩訶不思議なオブジェクトです。 Proxy って一体何者なんでしょうか？ ゆめみさんのクイズの例では やめ太郎さんがたかしに改名するのを断固拒否する 例ですが、 実は Proxy には 数千行のコードを数行にしてしまう魔力 も持っているのです。 今回は JavaScript の Proxy について魔力についてご紹介したいと思います。 本来、 Proxy は難しい内容ですが、 setTimeout の時と同じく、 できるだけ初心者の方にもわかりやすく説明していきたいと思います。 Proxy って何？ 簡単にいえば、 オブジェクトを魔改造できる ものです。 ゆめみさんの記事の

こんにちは。ぬこすけです。 最近(2022/10/26)に、マーケティングツールを開発する Repro が、タグを入れるだけでウェブサイトの表示速度を高速化させるツール「 Repro Booster 」をリリースしました。 ニュース Repro 公式サイト PRTIMESより引用 表示速度アップの仕組みは簡単にいうと、ユーザーのクリックを予測して次のページのデータを先読み & 端末にキャッシュして次のページの読み込み速度を上げるようです。 たまたま SNS でこのニュースを見かけた時、「 ほげえええ 」と衝撃が走りました。 表示速度アップの仕組み自体はエンジニアだったらあまりびっくりはしないかもしれません。 例えば、 Next.js には next/link でリンクを元にデータの先読み機能があったり、 gueess という機械学習を用いてユーザーが次にアクセスする可能性が高いページを予測

こんにちは。ぬこすけ です。 皆さんは「 setTimeout とはどんな関数でしょう？」と聞いたら、どう答えますか？ おそらく、ほとんどの人が「指定した時間に処理が走るようにする関数」と答えるのではないでしょうか？ function main() { console.log('動いたよ！！'); } // 大体 ３ 秒後に main 関数が動き出す setTimeout(main, 3000); 大雑把な理解としては問題ないですが、実は setTimeout の隠された能力はそれだけではありません。 setTimeout の隠された能力を知るとどんな良いことがあるのでしょうか？ 例えば、次のような良いことがあります。 ブラウザに対する理解が深まる Web サイトのパフォーマンスを向上させることができる ドヤれる まず、 ブラウザに対する理解が深まります 。 かのアリストテレスはこう言い残

こんにちは。ぬこすけです。 今年の2月にフロントエンドのパフォーマンスチューニングに関する記事を公開したところ、多くの反響をいただきました。 さて、 一丁前にパフォーマンスチューニングの記事を書いた本人はどうなんですか？ というお話です。 ということで 個人開発している「ぬこぷろ」という技術書のランキングサイトで PageSpeed Insights を 💯 点のスコアを出してみました。 モバイル PC ※ちょくちょく改修しているので、スコアは変動します。 弱小なインフラ構成や広告・分析用の第三者コードの読み込み、そしてある程度リッチなコンテンツを表示するサイトでここまでのスコアを叩き出せたのは割とがんばったかなーと思っています。 この記事では ぬこぷろで行ったパフォーマンスチューニングの実例を紹介 します。 みなさんのサイトのパフォーマンスチューニングの参考になればと思います。 注意事

こんにちは。ぬこすけです。 皆さんは Bot のアクセスに悩まされたことはありますか？ 私はあります。 私が個人開発しているサイトでも Bot からガンガンアクセスがきます。 1ページリクエストすると画像や js ファイルなどの追加のリクエストも走るのでやっかいです。 私のサイトは Cloud Run で動かしていますが、リクエストに比例して料金が加算するようにしているので、 Bot からの余計なリクエストを抑えてお財布に優しくしたいところです。 一方で、 Next.js のバージョン 12.2 で Middleware という機能が安定版としてリリースされました。 この Middleware という機能を使えば、 ユーザーからのリクエストが来た時にページを返却する前にコードを実行することができます。 例えば、ユーザーエージェントを判定してリダイレクトをしたり、Basic認証をかけたり、み

こんにちは！ぬこすけです。 「Github Actions で SEO 対策！サイトマップ作成を自動化！」に続き Github Actions について 2 回目の投稿です! あまり利用イメージはないかもしれませんが、実は Github Actions で Twitter Bot を運用できちゃったりします。 この記事では私が運営しているサイト「ぬこぷろ」で実際にやっている Github Actions を使った Twitter Bot の運用について紹介します。 なお、もし Github Actions がわからない方は「Github Actions で SEO 対策！サイトマップ作成を自動化！」の「Github Actions とは」を見てもらえればと思います。 どんな Twitter Bot? こいつです。 この猫型 Twitter Bot は 1 日に 2 回、こんな感じでおすすめ

こんにちは、ぬこすけです。 近年、Webフロントエンドではサイトのパフォーマンスの重要性が高まっています。 例えば、GoogleはCore Web Vitalというパフォーマンスに指標を検索結果のランキング要因に組み込みました。 また、近年の某企業が「パフォーマンスの改善に取り組んだ結果、セッション数〇％アップ、CVR〇％アップ...」などの事例は枚挙にいとまがないでしょう。 パフォーマンスチューニングするためには、定量的に計測してボトルネックを探すようなトップダウンなアプローチもあります。 しかしながら、時には千本ノック的にハウツーを片っ端から試していくボトムアップなアプローチも有効になることもあったり、日々のコーディングでパフォーマンスを意識したコードを書くことは大切でしょう。 この記事ではパフォーマンス最適化のハウツーを紹介します。 パフォーマンス改善の施策が思い浮かばない時やフロン

こんにちは。ぬこすけです。 みなさん、QiitaでLGTM（いいね）数4000越えしたジャバ・ザ・ハットリさんの名記事をご存知でしょうか？ ジャバ・ザ・ハットリさんはエンジニアのための技術書ランキングサイト「テックブックランク」を運営していますが、私もゴリゴリライバルサイトを立ち上げたというお話をしようと思います。 立ち上げたといっても実はWebサイトを公開してから1年ほど経っているのですが、その間のサイトの収益やユーザー数などの話にも触れていきます。個人開発をしている方、あるいはこれからしようとしている方にも役立つはずなので、一読いただければ嬉しいです。 [2021年3月15日 追記] この記事を投稿してから1週間ですが、多くの反響をいただきました。 Qiitaのトレンドの載ったりTwitterでもシェアされていたり、ジャバ・ザ・ハットリさんご本人にもコメントいただけて嬉しい限りです。

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは！ぬこすけと申します！ Reactを使って個人で本のおすすめ度を点数化して紹介するサイトを作っています。 ひたすら本のリストページのパフォーマンスチューニングをしていたのですが、LightHouseのパフォーマンススコアで下記のように爆上げすることができました！ Before パフォーマンススコア：30前後くらい ※表示する本のリストは10件 After パフォーマンススコア：90前後くらい ※表示する本のリストは400件程度 (2020/8/12に計測) 今回の開発で得た経験を元に、Reactにおけるパフォーマンスチューニン