問題 <img src=""> をブラウザで表示した時、どうなるか知っていますか？わざわざimg要素のsrc属性を空文字列にする機会がないので意外と知らないかもしれません。 もちろん画像は表示されず、(指定していれば)altが表示されます。 img要素のsrc属性を空文字列にすると、リンク切れになることがわかりました！いかがでしたか？(？) そのときHTMLImageElementは JavaScriptでsrcが空文字列のimg要素のDOMインスタンスを確認してみましょう。例として https://zenn.dev/stin を開き、Chrome開発者ツールを使ってsrc属性に空文字列を指定したimg要素を埋め込んでおきます。 そして次のJavaScriptを実行します。 const element = document.querySelector('img[src=""]'); con

技術構成 API: microCMS(ヘッドレスCMS) Next.js Vercel TypeScript はじめに プレビュー機能は、Next.jsのPreview Modeのおかげで、実装自体は簡単になりました。ですが、「現在どのプロセスを実行中で、どのシステムやサービスに対してどんな操作を行っているのか？」 の把握に少し時間がかかりました。 なのでこの記事では、プレビュー機能を実装する過程を分けて解説し、図解した上で今はどの過程かを示して書くようにしました。特に初めての方が迷わずに進められるように心がけました。 プレビュー機能とは？ プレビュー機能は、コンテンツの公開前に、そのコンテンツがウェブサイト上でどのように見えるかを確認できる機能です。この機能により、下書き状態や編集中の記事を、実際の公開環境と同じ条件下で閲覧することが可能となります。 プレビュー機能をどう実現しているか？

【Next.js】Google Analytics も YouTube iframe 埋め込みも公式ライブラリでいけるようになるぞ ちょっと株式会社 Advent Calendar 2023 12 月 24 日の記事です。 みなさんこんにちは、chot Inc. の Web エンジニアです。 Next.js で Google Analytics を導入するとき、どうしていますか？僕は毎度「nextjs google analytics」でググって「こうやるのか〜」と適当に作っています。本当にちゃんと計測されているのか疑心暗鬼です。 また、YouTube の iframe 埋め込みはどうでしょう。普通に iframe を埋め込むと PageSpeed Insights のスコアをごっそり奪っていきます。恐ろしいですね。 これらのサードパーティリソースを SPA である Next.js に導入

この記事の目的 今まで Web アプリケーション製作を行った経験が無い方が「ちょっと個人開発で何か作ってみようかな！」と思ったときにうっかり脆弱性を作りこんでしまうことを少しでも防げたらいいなと考えました。 そのためにはまず脆弱性を他人事だと考えないことが大事だと思ったので、私が過去の開発現場において実際に遭遇したことがある Web アプリケーションの脆弱性の事例を幾つか紹介します。 紹介の前に注意喚起をします。 自分が管理しているわけではない Web アプリケーションに対し、依頼されてもいないのに脆弱性を探す行為は絶対にしないでください。その行為の内容によっては犯罪になる可能性もあります。 外部から渡されたデータを何の対策もなしに SQL に埋め込んでいる SQL インジェクション攻撃の説明でよくみられる例ですが、ログイン処理でユーザーが入力した ID とパスワードに一致するユーザー情報

こんにちは、chot Inc. の Web エンジニアです。 chot Inc. は案件単位の開発を行っており、1 つの案件で数名のチームメンバーが開発しています。フェーズの切り替わりでメンバーが替わることもあるので、環境変数の共有が必要です。どこから取得するとか、何に使う値なのか、取りうる値はどんなものか、など。 そのコミュニケーションコストを下げるためか、README.md にリストアップしてみたり、notion にリストアップしてみたり、いろいろ工夫されていました。 しかし、ソースコードから独立したそれらのドキュメントでは当然メンテナンス漏れが発生します。これは t3-env で解決できるなと思い提案してみたところ、すぐに社のテンプレートリポジトリに導入されました。 t3-env の使い方はすでにいくつか記事があるのと、そもそも何も難しいものではないので、この記事では「信頼出来る唯一

TypeScriptでは配列が空でないことを型レベルで表現できます。 この記事ではその型をNonEmptyArray<T>と書くことにします。 結論だけ先に書くと、次のように定義するのが正しいです。 export type NonEmptyArray<T> = [T, ...T[]] | [...T[], T] 現在ネット上では上記とは異なる、少し不具合のある型定義が紹介されているので要注意です。 それらも含めて簡単に解説します。 よくある間違いその1：T[] & { 0: T } ２つあるうち最初に紹介するのはこの型定義です。[1]

この記事では紹介してないものも載せてます。 既に実装済みなとこは省略 簡単に説明すると、Vercel上のNext.js製のWebアプリを作り、CMSはmicroCMSを利用してAPI経由でデータ（記事）を取得・表示させたWebアプリです。今回は「いいね機能」だけにフォーカスしているのでそれ以外の実装済みの部分は割愛しています。 記事に関する処理や表示に関して 簡単に説明します microCMSを使ってAPI経由でデータを取得 主に記事の一覧ページと詳細ページがある構成 getStaticPathsとgetStaticPropsをつかってSGしてます ルーティングはDynamic Routingを用いています 参考 ディレクトリ 「いいね」機能を実装するにあたって、関連するディレクトリとファイルを以下に示します。 ディレクトリ構成の図解 . ├── src │   ├── component

今回は、Reactのアニメーションの方法について紹介します。 WebGLを使うようなダイナミックのもではなく、Webサイトを制作する上でよく使うアニメーションや、要素がビューポートに入ると発火するなど、あるあるだけど意外と実装めんどくさい...なものを簡単に実装できる方法を紹介します！ また、それらを組み合わせて自作ライブラリも作ってみたのでぜひチェックしてみてください🙌 Intersection Observer API 言わずと知れたJavaScript標準の交差監視APIですね。 Reactでは、ライブラリを使った方が楽に実装できるため、今回はサンプルコードと基本的な解説のみ行います。 import React, { ReactNode, useEffect, useRef, useState } from "react"; const ObserverComponent = ({

はじめに みなさんはエディタに何を使っていますか? 筆者は最近、VSCodeからNeoVimに乗り換えました。 NeoVimは自分好みにカスタマイズしていくエディタです。 この記事ではVSCodeに飽きちゃった人やNeoVimを使ってみたいけど難しそうだなと思っている人に向けてAstroNvim を紹介します。 AstroNvimとはオールインワンのNeovim環境です。 カスタマイズも簡単にできるため、NeoVim初心者にはとてもおすすめです。 筆者もAstroNvimからNeoVimに入門しており、いまも使い続けています。 AstroNvim のインストール Macの場合はbrewを使って簡単に導入できます。 brew install neovim git clone --depth 1 https://github.com/AstroNvim/AstroNvim ~/.config/

Storybookのメジャーバージョンが7にアップデートしてからしばらく経ちます。 しかしながらNext.jsとtailwindCSSの組み合わせにStorybookを使用する記事が少なかったため、 組み込むために行ったことをまとめました。 動作確認環境は以下のとおりです。 "next": "13.3", "react": "^18.2.0", "tailwindcss": "^3.3.2", "storybook": "^7.0.11", "@storybook/addon-essentials": "^7.0.11", "@storybook/addon-interactions": "^7.0.11", "@storybook/addon-links": "^7.0.11", "@storybook/blocks": "^7.0.11", "@storybook/nextjs": "

こんにちわ！フロントエンドエンジニアのわでぃんです。 最近、BaaSの中でも特に勢いのある、Supabaseについての入門記事です。 簡単なチャットアプリを開発しながら使い方や、一連の流れを覚えていきましょう！ 作成するアプリの概要として、Supabaseが提供してる認証機能や、リアルタイムリスナーを活用し、ユーザー同士がリアルタイムでやりとりできるチャットアプリを作ります。 Next.js・TypeScriptで開発します。 Supabaseはここ2.3年くらい？で人気がどんどん高くなってきていますが、情報が錯綜している感（特に日本語の情報）があったため、1からSupabaseを学んで開発したい人や、Supabase興味あるけど手が出せていないという人向けの入門記事を書いてみました！ Supabaseとは Supabaseは、オープンソースのFirebase代替として注目を集めているBa

はじめに 内海「どうもー ミルクボーイですー」 駒場「お願いしますー」 内海「あーありがとうございますぅー ねっ 今XSS攻撃をいただきましたけどもね」 駒場「こんなん なんぼあっても良いですからね」 内海「ねー あればあるだけ良いですからね　ほんとにね」 駒場「いきなりですけどね うちのオカンがね 好きなセキュリティに関する用語があるらしいんやけど」 内海「あっ そーなんや」 駒場「そのセキュリティに関する用語をちょっと忘れたらしくてね」 内海「好きなセキュリティに関する用語忘れてもうて どないなってんねんそれ」 駒場「でまあ色々聞くんやけどな 全然わからへんねんな」 内海「分からへんの？ ほな俺がね オカンの好きなセキュリティに関する用語 ちょっと一緒に考えてあげるから」 内海「どんな特徴ゆうてたかってのを教えてみてよー」 CORSとは 駒場「あのー Webブラウザ上で異なるオリジン間

どうも、hanetsukiです。 GitHubにはアカウントそれぞれにREADMEを乗せられるリポジトリがついているのはご存知でしょうか？ 以前から簡易的なプロフィールは掲載していたのですが、訪問していただいた方に「おっ！」っと思わせるようなREADMEにしたいと思い更新することにしました。 今回更新するにあたって何を使ったのかというのを忘備録的に残していきます。 これが今回完成したREADME 詳しいソースコードは、リポジトリをご覧ください。 Skill Icons 自分が持っているスキルなどを表示するときに便利。 他にもお気に入りの言語や、今学習の言語という使い方もできそうですね！ 詳しい利用方法は、https://github.com/tandpfun/skill-icons#readme をご覧ください Badge Generator Zennのフォロワー数の記載に利用しています。

記事の動機 VSCodeの拡張機能何入れてますか？と聞かれることが多いので忘備録的に残します。 Language Japanese Language Pack for Visual Studio Code 日本人なので、日本語が母国語です。 英語のUIでも操作に支障はありませんが、一眼でどういう挙動をするのか理解できる状態は作業の効率につながります。 Linter, Formatter ESLint javascript系のlinterです。 ファイルを保存時にプロジェクトにある設定ファイルを読み込んで自動修正をしてくれたりしてくれます。（要設定） Prettier - Code formatter いろんなファイルをフォーマットしてくれるやつです。 ファイルを保存時にプロジェクトにある設定ファイルを読み込んで自動修正をしてくれたりしてくれます。（要設定） Stylelint スタイルにま