フロントエンド

半角英数が改行されない原因と対処方法

フロントエンドチームの君田(きみた)です。 本日は半角英数が改行されない原因とその対処方法に関して書いていこうと思います。 要素の横幅は指定しているのに、半角英数がその要素のないに収まってくれない!という事象を今更ながら経験しました。 そんな…

CSS擬似クラス関数 :is()が便利で使いやすい!

トラストバンク開発部・フロントエンドチームの君田(きみた)です。 本日はCSS擬似クラス関数である:is()について気になったので記載していきます! CSSの擬似クラス関数:is()とは? CSSの擬似クラス関数:is()とは、引数にCSSのセレクタを渡すと、その条件…

inputタグに正規表現を適用させる!pattern属性とは?

トラストバンク開発部・フロントエンドチームの君田(きみた)です。 本日はinputタグのpattern属性について書いていこうと思います。 フロントエンド開発をしていると、入力値の検証はどこかで実装する機会がある機能です。 そんなときに少しでも役に立てれ…

fetchでは正確なエラーハンドリングができない? 〜 JavaScriptのFetch APIでより安全にデータを取得する方法 〜

トラストバンク開発部・フロントエンドチームの君田(きみた)です。 先日以下のような記事を目にして、とても気になったので記事にしようと思いました。 www.builder.io 自分もフロントエンドの開発時によく使用したり、見かけたりするFetch APIです。 この…

iOSのinputとtextareaクリック時にズームされてしまうのを防ぐ

トラストバンク開発部・フロントエンドチームの君田(きみた)です。 本日はiOSにて入力フィールドをクリックした時に自動でズームされてしまう挙動を防ぐ方法を書いていこうと思います。 iOSでは入力フィールドの文字サイズ(font-size)が16px以下だとズー…

トラストバンクのフロントエンドを支える(予定の)ESlint

こんにちは。フロントエンドエンジニアの片柳です。 先日、トラストバンク内での開発における共通ルールeslint-config-trustbankをリリースしました。 www.npmjs.com もともと、トラストバンクのフロントエンドではリンター兼コードフォーマッターとしてESLi…

検索結果をわかりやすく・リッチに表示! 〜 構造化データとは 〜

こんにちわ、トラストバンク開発部・フロントエンドチームの君田(きみた)です。 本日は、Google検索結果でより多くの情報をユーザーに届けることができる、構造化データについて書いていこうと思います。 構造化データを使用することは、たくさんの検索結…

JavaScript不要!?cssのline-clampでテキストを省略表示!

トラストバンク開発部・フロントエンドチームの君田(きみた)です。 本日はテキストの省略表示に使用することができるcssプロパティ「line-clamp」について書いていきます。 最近業務で業務で使用する機会があり、大変便利で感動を覚えたので是非記事にしよ…

Event.preventDefaultとEvent.stopPropagationの違いを調べた

テックブログ初めての投稿になります! フロントエンドエンジニアの君田(きみた)です。 タイトル通り、Event.preventDefaultとEvent.stopPropagationの違いを調べたので記事にしようと思います。 調べようと思ったきっかけ 自分自身、preventDefaultとstop…

第1回 CSSBattle in トラストバンク レポート

皆さんこんにちは。フロントエンドエンジニアの片柳です。 今回はフロンドエンドチーム内で行われた「CSSBattle」第1回目の様子をレポートします。 CSSBattleとは? cssbattle.dev CSSBattleとは、指定されたお題をCSSだけで、いかに早く・綺麗に模写できる…

OEMサービスのUIをStorybookで管理する

はじめまして。フロントエンドエンジニア兼サーバーサイドエンジニアの片柳です。 先日、トラストバンクから「Bonchiふるさと納税」がリリースされました! www.trustbank.co.jp ふるさとチョイスのOEMサービスとは、パートナー企業がブランドデザインを維持…