はてなブックマーク

なぜfor文が良くない場合があるのか プログラミングにおけるfor文は、繰り返し処理の便利さから、広く使用されています。 しかし、この便利なメソッドにはいくつかの難点があり、扱いが難しい側面があります。 1. 可読性の低下 for文は特に、ネストされたループや複数の条件を含む場合、コードの可読性を低下させることがあります。 例えば、以下のコードは二次元配列の各要素を2倍にする処理を行っていますが、二重のfor文により、何をしているのか一見して理解しづらくなっています。 const matrix = [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ]; let doubledMatrix = []; for (let i = 0; i < matrix.length; i++) { let row = matrix[i]; let doubledRow = []; for

はじめに DRY, KISS, 車輪の再発明, などなど... プログラミング界隈には、一見「？？？🤔？？？」となるような、原理原則がたくさんあって困惑しますよね。。。 今回は備忘録的に、特に有名だと思った10個を独断でピックアップして記録していきます。 1. DRY Don't Repeat Yourself. ✅ 同じ内容のコードを複数箇所に書いてはいけない。（１箇所にまとめるべき） ✅ 同じ内容のコードは１箇所にまとまっていた方が、手直しが発生した場合に修正が容易になります。 複数箇所に散らばっている場合は、その数だけ修正が必要になるためミスが発生しやすくなります。 2. KISS Keep It Simple, Stupid. ✅ コードをシンプルに保つ。（無駄なコードを書かない） ✅ 自分の興味で新しく覚えた技術を使ってみたり、仕様書にないけど将来必要になりそうなコードを書いて

Cookie規制の歴史 まずはCookieがどのように規制されていったかを簡単に振り返ろうと思います。 発端としてはApple社がユーザのプライバシー保護のために、ITP（Intelligent Tracking Prevention）を「Safari」に搭載したところから始まりました。 Cookieを使ってトラッキングを行えなくするために、徐々に制限を強めていきました。 また、ITPはApple社での話ですが、「Chrome」や「Firefox」もApple社の後を追い、Cookieの規制を強めていっています。 Googleに関してはCookieに代わる機能として「Topics」を開発していたりするので今後の動向はまだわかりません。 ITPが規制を強めていった流れは以下にまとめました。 ITP1.0（2017年6月） 3rd party cookieの制限 クロスサイト トラッキングを防

Slackで動くChatGPTのチャットボットを作りたい 本記事では、Slackで下記仕様を実現できるChatGPTのチャットボットをGoogle Apps Script（GAS）でサクッと作成していきます。 botが所属するSlackのチャンネル内でメンションされると、スレッドで返信する botとのダイレクトメッセージの場合は、メンション無しでもスレッドで返信する botが参加しているスレッド内でのメッセージには、メンション無しでも（スレッド内の会話内容を読み取った上で）返信する また、下記項目も自由に設定することができます。何でも明るく回答してくれる社内のアイドル的なbotを作ってみるのも良いかもしれません。 botのアイコン、振る舞い（人格・役割など）の設定 gpt-3.5-turboやgpt-3.5-turbo-16kなどのGPTモデル設定 今回のbotは、非エンジニアの方でも作成

Panda CSSとは はじめに、今回のメインテーマとなるPanda CSSについて簡単に紹介します。 CSS-in-JS with build time generated styles, RSC compatible, multi-variant support, and best-in-class developer experience Panda CSSとは、上記公式サイト冒頭にもあるようにパフォーマンス面の課題をクリアしつつ、最高クラスの開発体験も両立したCSS in JSライブラリとなっています。 （最近ではNext.jsのReact Server Componentsが安定版になったこともあり）従来のようにランタイムCSS in JSを利用することが推奨されなくなってきている中、Chakra UIと同じ開発元によって、ゼロインタイムを実現したPanda CSSが新たにリリー

イントロダクション ChatGPTの登場は私たちに大きな衝撃を与えました。 SNSでもChatGPTをはじめとしてAIの話題で持ちきりですが、実際の業務でどんなふうに活用して行けば便利なのかは意外と語られることが少ない気がしています。 この記事では、僕が開発を進めている中で良いと思ったChatGPTの活用法や実践的なテクニックを紹介します。 具体的には、コード生成やコード理解などの開発プロセスを効率化するための方法を説明します。これらのテクニックを活用すれば、開発者は短時間でより高品質なソフトウェアを開発できるようになります。 この記事を通じて、開発者の皆さんがChatGPTの活用法を理解し、プロジェクトの効率と品質を向上させる手助けとなることを願っています。 注意点 実際にChatGPTでコーディングをする上でいくつか注意点があります。 機密情報は入力しない: 例えば、Samsungでは

はじめに StorybookとPlaywrightを連携してテストすることで、思っていた以上に良い開発体験が得られたので紹介します。 今回の記事で紹介するテストは以下のリポジトリで公開しています。 具体的には以下の点が最高でした。 独立したコンポーネント開発 Storybookを利用することで、UIコンポーネントを独立して開発・テストできます。これにより、コンポーネントの再利用性が向上し、効率的な開発が可能になります。 シナリオベースのテスト Playwrightを使ってシナリオベースのテストを実行できます。これにより、ユーザーの実際の操作に近い状況でのテストが可能となり、アプリケーションの品質を高めることができます。 クロスブラウザテストの容易さ Playwrightは、複数のブラウザでの自動テストをサポートしています。これにより、異なるブラウザでの動作検証が容易になり、互換性の問題を効

はじめに 今回は、モーダルウィンドウが開かれた時に背景を固定（背面コンテンツのスクロールを抑止）する方法を改めて紹介したいと思います。 以前まで、PCやAndroidでは比較的簡単に実現させることができましたが、iPhoneもしくはiPad（iOS or iPadOS）では別の方法で実装しなければ、実現できませんでした。 しかし、それはもう過去の話。今ではもう、簡単に実現できます🙆‍♂️ ※ただし考慮すべき点はあるので、最後まで読み進めていただければ幸いです。 iOSにおけるモーダルの背景固定が楽になっている!? PCやAndroidでは容易に実現できるものの、つい数年前までiOS端末では同じ方法で実現できない背景がありました。しかし現在では、以下いずれかの方法を使えばiOSでも容易に実現することができます。 bodyにoverflow: hiddenを設定 モーダルウィンドウが開かれた

はじめに 今回は、React（Next.js）を使って、滑らかな開閉アニメーションとアクセシビリティを考慮したアコーディオンの実装方法を紹介します。 本実装を進めるにあたって、実現したいポイントは5点あります。 高さが決まっていない（高さの最大値が決まっていない）コンテンツを表示させたい ウィンドウ幅によって高さが変化する可能性のあるコンテンツを表示させたい アコーディオンが開く時も閉じる時も同じ速度感のアニメーションを付与したい（jQueryのslideToggleのような動き） スクリーンリーダーによる開閉状態読み上げ、Tabキーによるフォーカス、EnterキーやSpaceキーでの開閉操作可能な（アクセシビリティが考慮された）アコーディオンを実現したい Webページ内検索（command + F）でアコーディオン内の単語がヒットした場合、アコーディオンが自動で開かれるようにしたい（Ch

はじめに 株式会社LCLでフロントエンドエンジニアとして働いている「おとの」と申します。 今回は、今をときめくフロントエンドのフレームワーク「Next.js」を使って、個人もしくは複数人のチームで快適にフロントエンド開発を行いたい方にオススメのセットアップを紹介します。 本セットアップを行うメリットは以下の通りです。 （自動formatが有効になる等）開発速度が増す （StylelintやEslintの静的解析により）不具合の発生や潜在的なエラーを防ぎやすくなる コードの品質と一貫性を保つことができる Next.jsを使いこなせれば、フロントエンド開発だけに限らず、ランディングページ（LP）など静的なWebサイトの実装を行うWeb制作にも有用です。 私自身、Webサイト1ページのコーディングが求められる際もNext.jsを使っています。本セットアップも簡単に終わるので、今すぐ始めたい方はぜ

はじめに 株式会社LCLでフロントエンドエンジニアとして働いている「おとの」と申します。入社してから約3か月が経ちました。短かくもあり長くもありの濃厚な時間を過ごせた気がしています。 今回は、Web制作会社でコーダーとして働いていたわたしが、自社開発のフロントエンドエンジニアに転職した理由や経緯について紹介します。今では心の底から「転職してよかった！」と感じています。Web制作に携わっている方のキャリア形成の参考になればと思います。 前職のWeb制作会社での経験 前職はWeb制作会社のコーダー（マークアップエンジニア）として、約3年間勤めていました。 主な業務内容は以下になります。 HTML、CSS、PHP、JavaScript（jQuery）等を使ったWebサイトのコーディング WordPress等を用いたCMS構築 その他、軽微なディレクションを行ったり、ガワアプリをつくってGoogl

Warpとは Warpとは、多くの便利な機能と最新のコードエディタのような操作感が実現されている非常に高速なRustベースのターミナルで、モダンなUIで利用体験も良く、生産性を上げられそうなアプリケーションです。 以下公式サイトもしくは、Homebrew経由でインストールできます。個人であれば、無料で利用することができます✨（2023年8月現在、Mac OSのみ対応しており、Windows版は開発中） 初回起動時はGithubのサインインが求められたり、簡単な質問に答える必要があります。ただ、導入自体はサクッと進めることができたり、Zshがデフォルトのシェルとして設定されているので、手間がかからないのも有り難いですね。 ■ 公式 ■ Homebrew iTermからの卒業 わたしは今まで、主にiTermを使ってターミナル操作を行ってきました。 ただ、iTermのデフォルト設定では、Mac内

Raycastとは Raycastとは、非常に高速で拡張可能なMacのランチャーアプリケーションです。Macの標準機能であるSpotlightの自由度を高めたようなアプリで、優れたUIUXによる利便性や拡張性も兼ね備えており（割と手軽に）作業の生産性を大いに高めることができます。 しかも、個人利用は実質無料（2022年10月現在）で、ユーザー登録をせずともすぐに生産性を向上させられる神アプリです🌟 以下公式サイトもしくは、Homebrew経由でインストールできます。 ■ 公式 ■ Homebrew Alfredからの卒業 Macの有名なランチャーアプリとしては、Alfredが非常に有名だと思います。今回紹介するRaycastと同様、様々な機能が用意されており、快適な作業と生産性の向上に大きく貢献する便利なアプリケーションです。 ただ、Alfredを本気で便利アプリとして使いこなすためには

スライダープラグインは何を使うべきか フロントエンドエンジニアのおとのです🙆‍♂️ Webサイトに以下のようなスライダーを埋め込む際、Web制作のコーダーやマークアップエンジニア、フロントエンドエンジニアは外部プラグインを利用して実装することが多いかと思われます。 jQueryが全盛期だった時には、Slickが多く利用されていた印象です。あらゆるオプションが用意されており、さまざまなカスタマイズが可能で、私もよく使ってきました。 また、IEのサポートが終了してからSwiperが利用されるようになった印象があります。こちらも複数のオプションがあり、比較的モダンなCSS（flex等）が組み込まれていることから、slickよりもカスタマイズが容易であるように思えます。jQueryに依存していないのも大きなメリットですね。 今までのスライダープラグインの問題 ただ、スライダープラグインは決して容