function safeJsonParse<T>(jsonString: string): T | null { try { const parsedData = JSON.parse(jsonString); if (typeof parsedData === 'object' && parsedData !== null) { return parsedData as T; } } catch (error) { console.error("JSONパースエラ</t>…
type SampleType = { id: number; name: string; } // 1 type OptionalSampleType1 = Partial<SampleType>; // 2 type OptionalSampleType2 = { [K in keyof SampleType]?: SampleType[K]; }</sampletype>
React v18 関連 StrictMode により初回に2回マウントされる 想定した挙動と違って少し戸惑ったので。 （Next.js であれば next.config.js から無効にできる） React.FC 型 から children が除外される React.VFC はもう使わない children を明示的に指定する…
1ヶ月間で読んだ技術系の記事の中からいくつか厳選して毎月まとめています。 CSS 【CSS】きみは "擬似クラス" 何個言えるかな？？ - Qiita JavaScript JavaScriptの生みの親「自動セミコロン挿入やめときゃよかった……」 - Qiita React I was creating Forms …
1ヶ月間で読んだ技術系の記事の中からいくつか厳選して毎月まとめています。 CSS 便利な無料ツールが登場！ Webサイトで使用しているCSSや自分が書いたCSSを詳細に解析してくれる -CSS Analyzer | コリス CSSでこんなことができるの知ってた？ 要素・コンテ…
1ヶ月間で読んだ技術系の記事の中からいくつか厳選して毎月まとめています。 CSS 覚えておこう！ CSSのconic-gradient()関数を使用した美しいグラデーションの実装方法 | コリス IEよ、さようなら IEをサポート外にした時に使用できるCSSのプロパティや機能…
1ヶ月間で読んだ技術系の記事の中からいくつか厳選して毎月まとめています。 CSS Styling `select` elements for real - Microsoft Edge Blog 【CSS】CSSの擬似クラス :toggle()を使ってToggle Switchを作る - Qiita JavaScript &&・||「ウチらってさぁ。よ…
Next.js (+TypeScript) の環境構築 create-next-app のインストール npm i -g create-next-app プロジェクトの作成 npx create-next-app@latest --typescript 実行 npm run dev ESLint の設定 パッケージのインストール npm i -D eslint 設定 npx eslint --i…
1ヶ月間で読んだ技術系の記事の中からいくつか厳選して毎月まとめています。 HTML Those HTML Elements You Never Use - DEV Community CSS 最近のWebサイトで見かける！ フロントエンドのデベロッパーにもデザイナーにも役立つCSSの実装テクニックのまとめ…
ReactとTypeScriptでカスタムコンポーネントを作っていた際に、通常のHTMLタグの属性の型をどのように持ってくればいいんだろうと思ったので、調べたことをまとめました。 結論：React.ComponentPropsWithoutRef ※もしくは React.ComponentPropsWithRef 以下…
1ヶ月間で読んだ技術系の記事の中をいくつか厳選し、自分用の備忘録と記事の拡散・共有の意図を込めて毎月まとめています。 CSS これからはこの実装がオススメ！ブラウザの高さいっぱい、iOSでアドレスバーがあっても高さいっぱいに表示するCSSのテクニック …
1ヶ月間で読んだ技術系の記事の中をいくつか厳選し、自分用の備忘録と記事の拡散・共有の意図を込めて毎月まとめています。 HTML HTML tableの実装がこれまでと変わる！Googleデベロッパーによる変更点の解説 -TablesNG | コリス 15 HTML5 best practices fo…
1ヶ月間で読んだテック系記事の中でも良記事やニュース記事をピックアップし、自分用の備忘録と記事の拡散・共有の意図を込めて毎月まとめています。 HTML どうしてHTML5が廃止されたのか | フューチャー技術ブログ HTMLのa要素にping属性...？ - Qiita CSS …
1ヶ月間で読んだテック系記事の中でも良記事やニュース記事をピックアップし、自分用の備忘録と記事の拡散・共有の意図を込めて毎月まとめています。 CSS 2021年、CSSのクロスブラウザ対応の現状、SafariやFirefoxで起こる不具合の対応方法 | コリス A Thoro…
1ヶ月間で読んだテック系記事の中でも良記事やニュース記事をピックアップし、自分用の備忘録と記事の拡散・共有の意図を込めて毎月まとめています。 CSS :empty | CSS-Tricks 10+ CSS BORDER ANIMATION EXAMPLE - DEV Community JavaScript 知っておくと実…
1ヶ月間で読んだテック系記事の中でも良記事やニュース記事をピックアップし、自分用の備忘録と記事の拡散・共有の意図を込めて毎月まとめています。 HTML 地味に便利！さまざまなプロジェクトに適したHTMLのテンプレートを簡単に生成できる -HTML Boilerpla…
Introduction 「CSS完全に理解した」Tシャツは以前から知っていて、ネタとして面白いし、敢えてそのデザインを再現するには多少CSSの理解が必要になってきて、深いな(?)と思っていました。 そんな中最近この記事を見つけ、楽しく拝見させていただき、これに…
1ヶ月間で読んだテック系記事の中でも良記事やニュース記事をピックアップし、自分用の備忘録と記事の拡散・共有の意図を込めて毎月まとめています。 HTML えっ、著作権の帰属を表すHTMLタグがあるんですか？ - Qiita <meta charset="UTF-8"> を書く必要性があるケースとデメリット</meta>…
1ヶ月間で読んだテック系記事の中でも良記事やニュース記事をピックアップし、自分用の備忘録と記事の拡散・共有の意図を込めて毎月まとめています。 CSS CSSの中央揃えで、最も万能で信頼できる実装テクニック | コリス Web制作者が知っておくと便利なCSSの…
今回は個人的なブレークポイントの決め方を共有してみようと思います。 1. iPhoneの最大サイズを調べる 2. iPadの最小サイズを調べる 3. SPデザインを切り替えるブレークポイントを決定する 4. タブレットのデザインを用意するか否か 4-1. タブレットのデザ…
1ヶ月間で読んだテック系記事の中でも良記事やニュース記事をピックアップし、自分用の備忘録と記事の拡散・共有の意図を込めて毎月まとめています。 CSS CSSの見過ごしがちだけど興味深い実装テクニック、ホバーでラインを引いて逆方向で元の状態に戻すエフ…
HTML HTML5の10の新機能 あなたは知ってますか？ - Qiita CSS コピペで簡単！CSSで実装されたジグザグ、波状、罫線、アイソメトリックスなど背景パターンのスタイルシート | コリス CSSの疑似クラス「:focus-within」が素晴らしい理由 | コリス Webページや…
最近社内で新卒・初学者向けにフロントエンドのコードレビューをする機会が増えたので、自分のためにもレビューの観点をまとめておこうと思います。 共通 エラーチェック（バリデーションチェック） 使われていないコード、コメントアウトがないか インデン…
HTML metaタグに記述するソーシャルメディアや検索用のコードをまとめて簡単に生成できるオンラインツール -Meta Tags | コリス document outline algorithm と h1 要素 | grgr-dkrkのブログ CSS Animating Number Counters | CSS-Tricks CSS設計において特…
HTML あなたがまだ使っていないかもしれないHTML5の便利機能10選 - Qiita CSS CSSでheight: 100vh;を定義したのに、iOSのスマホで高さいっぱいに表示されないのを解決するCSSのテクニック | コリス JavaScript Back-end Developers RoadMap❤ - DEV Deno v1.4…
シングルクラスでmodifierを使う element内でクラス名を格納するための this を定義し、modifier内で継承しています。 これにより、 class="block__element block__element--modifier" と2つクラスを付けるようなところを class="block__element--modifier" …
CSS content-visibility: the new CSS property that boosts your rendering performance CSSを活用してHTMLのセマンティックエラーを指摘する方法 - ICS MEDIA JSからTSへの移行ツール、ts-migrateを試してみた - Qiita JavaScript JavaScriptからletを絶滅…
HTML 【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい | Rriver SVG Title vs. HTML Title Attribute | CSS-Tricks CSS CSSの小ネタ: 画像に枠線をつける際、borderよりもbox-shadowの方がより美しく実装できる | コリス Web制作の面倒な作業…
外出先でMacからChromeリモートデスクトップを使用し、自宅のWindowsを操作したいとき 日本語が打てず困っていたので色々と調べてみました。 結論「option + @」 Macの「Backquote」がWindowsの「半角/全角」と対応している Macで「Backquote」を入力するに…
①外部ファイル読み込み時にパラメーターをつける phpでuniqid();やdate();などを使い頻繁に変わる値を設定する <script src="/js/test.js?x=<?php echo uniqid(); ?>"></script> ②jQueryの記述を$(function(){})の中に入れない jQueryの記述は毎回下記のように$(function(){})の中に書くというのを通例としていたが、外側に…
