フロントエンド実装

フロントエンドチームの君田（きみた）です。 本日は半角英数が改行されない原因とその対処方法に関して書いていこうと思います。 要素の横幅は指定しているのに、半角英数がその要素のないに収まってくれない！という事象を今更ながら経験しました。 そんなときに少しでも役に立てれば嬉しいです。 なぜ半角英数は改行されないのか？ タイトルでは直面する状況がわかりやすいように書きましたが、「半角英数が改行されない」は実際は正しくないです。 正確には「長すぎる半角英数の単語がある場合に改行されずに要素幅を超えて表示されてしまう」ということが起こっています。 CSS では、非常に長い単語などの切れない文字列がある場…

トラストバンク開発部・フロントエンドチームの君田（きみた）です。 本日はinputタグのpattern属性について書いていこうと思います。 フロントエンド開発をしていると、入力値の検証はどこかで実装する機会がある機能です。 そんなときに少しでも役に立てれば嬉しいです。 patern属性について pattern属性とはinput要素に正規表現を適用させることができる便利な属性です。 どんなinput要素にも指定できるわけではなく、以下のtype属性を指定した場合に有効になります。 text tel. email url password search 正規表現を設定することによって、入力欄が空文…

トラストバンク開発部・フロントエンドチームの君田（きみた）です。 先日以下のような記事を目にして、とても気になったので記事にしようと思いました。 www.builder.io 自分もフロントエンドの開発時によく使用したり、見かけたりするFetch APIです。 このFetch APIのエラーハンドリングについて言及されていた記事で、書かれていた内容を実際に試してみたので書いていきます。 Fetch APIはステータスコード200以外の場合でもエラーをスローしない 任意のステータスコードを返却してくれるサービスを使用して記載していきます。 httpbin.org 例えば以下のようなコードがあった…

こんにちわ、トラストバンク開発部・フロントエンドチームの君田（きみた）です。 本日は、Google検索結果でより多くの情報をユーザーに届けることができる、構造化データについて書いていこうと思います。 構造化データを使用することは、たくさんの検索結果がある中でよりクリックされやすくなる仕組みの一つかと思います。 それではまず、構造化データとは何かから書いていきます！ 構造化データとは？ Google公式ドキュメントには以下のように記載があります。 構造化データとは、ページに関する情報を提供し、そのコンテンツ（たとえば、レシピページの場合は材料、加熱時間と加熱温度、カロリーなど）を分類するために標…

エムスリーキャリア薬剤師採用支援チームの吉田と申します。 今回は、Hotiwreを用いたフロントエンド実装について、弊社の採用管理システムの実例を交えてご紹介いたします。 何をやったか? 弊社の採用管理システムには薬剤師の検索機能があり、ユーザー毎に検索条件を保存することが可能です。 この画面でTurbo Streamsを用いてモーダルとフラッシュメッセージの制御を行いました。 今回実装した画面遷移パターンをざっくりとまとめると以下のようになります。 リクエストの種類やサーバーサイドでの処理結果によって、最終的に表示する内容が分岐しています。 設計前は「Turbo Framesで実装できるやろ…

Intel Macに実行環境構築方法はこちら ComfyUI 起動オプションの使用方法: ComfyUI Options: ComfyUI 起動オプション: Intel Macに実行環境構築方法はこちら yummac.hatenablog.jp ComfyUI 起動オプションの使用方法: usage: main.py [-h] [--listen [IP]] [--port PORT] [--tls-keyfile TLS_KEYFILE] [--tls-certfile TLS_CERTFILE] [--enable-cors-header [ORIGIN]] [--max-upload-s…

どうも、yukiです。 この記事では2024年12月の学習の振り返りをしていきます。 12月の学習時間 結果: 125h (累計: 634h) 今月はコロナで一週間ほど療養していたことを踏まえると、悪くない学習時間を確保できました。 内容としてもXクローンの途中まで進めることができ、順調な成果を収められたかと思います。 今後はもう少し濃い内容を成果物に盛り込めるよう頑張ります。 12月に取り組んだ学習 Django ← 取り組み中 よかったところ 新規機能実装に慣れてきた 「実装に必要な知識を軽くインプット」 ⇨ 「とにかく手を動かして、疑問点を炙り出す/深ぼる」といったスタイルに落ち着きまし…

2024年の振り返り 2024年も終わりが近づいてきました。この一年間を振り返り、学びや成長を振り返るブログを書きたいと思います。 RailsとVue.jsでの開発 今年も引き続きRailsとVue.jsを使った開発に注力しました。特に印象的だったのは、以下のようなプロジェクトです： REST APIの実装 Railsを使って、効率的かつ拡張性のあるAPIを設計しました。サービスクラスやフォームオブジェクトを活用し、コードの可読性と再利用性を向上させました。 データ登録フォームの構築 Vue.jsとAxiosを使って動的なフォームを作成しました。入力エラーのリアルタイム表示やユーザー体験の向上…

この記事は hacomono advent calendar 2024 の21日目の記事です こんにちは。開発本部 UX 部の yasu です。 最近はクロストレーナーという効率的に有酸素運動（全身運動）ができるマシンにハマっていて、ジムで Netflix を見ながら楽しくカロリー消費に励んでいます。 直近では海外ドラマ「プリズンブレイク」全シーズンと日本の「六本木クラス」を見ました。 はじめに この記事では、UX 部と CTO 室リアーキテクチャ＆イネーブルメント部が主体となって進めていた、フロントエンド（Nuxt で書かれたコンポーネント）のテストコード実装に関するスキルトランスファー（ス…

この記事は hacomono Advent Calendar 2024 20日目の記事です。 はじめに こんにちは。UX部エンジニアのがーみーこと石上（@gaaamii）です。最近、With Wellness *1 というありがたい制度を活用してジムで筋トレを始めました。たくさん運動して、おいしくラーメンを食べたいと思っています。 本記事では、hacomonoの1つのプロジェクトにおいて、私がフロントエンドテストコード追加とリファクタリングを通してhacomonoのフロントエンド実装の理解を深めた体験について書きます。機能の当初の実装者でなく改修に関わっていない身でも、そこへテストコードを書い…

この記事は、LayerX Tech Advent Calendar 2024 の 17 日目の記事です。 tech.layerx.co.jp こんにちは、バクラク事業部エンジニアの ktr です。特定のお客さま環境で発生した珍しいエラーと、その調査・解決までの一連の流れをご紹介します。本記事を通じて、同様の問題やパフォーマンス異常に遭遇した際のヒントや知見になれば幸いです。 特定テナントからのお問い合わせ あるお客さまから、「月末月初になると、画面の操作ができなくなる」とのご報告をいただきました。ピーク期間となる月末月初以外では特に問題なく利用できている点が特徴的で、当初はサーバー側の負荷増大…

はじめに こんにちは。「HR forecaster」というサービスの開発を行っている新卒2年目の讃岐です。現在は、フロントエンドエンジニア兼スクラムリードを担当してます。 入社後、以下の3つのサービスで0→1の開発を経験しました。・社外向け：「トレンド検索」・「トレンドランキング」の2つ・社内向け：サービス1つ これら3つのサービスは、いずれもリリースまでに4～6ヶ月規模で開発を行いました。今回は、0→1のサービス開発における流れや、意識しているポイントについてお話しします。（※開発の流れは、私が所属するチームでの事例です） はじめに 開発体制 リリースまでの流れ 1. Figmaのラフデザイ…

この記事は JMDC Advent Calendar 2024 16日目の記事です🌲 15日目は川島さんによる「Redshiftのストアドプロシージャで単体試験自動化をやってみた」でした。 qiita.com 株式会社JMDCでヘルスケアプラットフォームサービス【Pep Up】 のフロントエンドエンジニアをしている新保です。 この秋からPep Up開発チームに「カイゼンチーム」という新しいチームができ、エンジニアに加えてそのチームリーダー的なこともやることになりました。これはPep Upの各種数値を計測し、こまめな改善施策を打ってその影響を計測するという、いわゆるグロースハック的な役割を期待さ…

こんにちは！12月03日の@iwadoooo_77さんの記事にてご紹介いただいた25卒内定者の＠riku_ftです！ 今回は個人開発で採用したLaravel + Inertia + React + TailwindCSSという構成について、実装を通じて発見した利点と課題を話したいと思います。 きっかけ：個人開発でSPAの複雑さに悩んでいた 個人で開発し、公開、運営までしたいWebアプリケーションでの開発段階での話です。 そのアプリではユーザー体験を考慮してSPAの実装を考えていました。 ですが、「いざ作ってみよう！」と意気込んで実装を始めたものの、調べれば調べるほど考慮すべき要素が増えていきま…

10X プロダクトデザイナーの日比谷（ @suuminbot ）です。 10Xではしばらくプロダクトデザイナーの新規募集をクローズしていましたが、この度新たにプロダクトデザイナーを募集することになりました！ しばらく外部発信できていなかったこともあり、この記事では最近のStailer、そして10Xでのデザインの近況についてまとめようと思います。 TL;DR Stailerのプロダクト開発はフェーズが変わり、新たなイシューを探索できるようになった Stailerの「価値の源泉」の1つはやはりUXにある 実は新規プロダクトも複数開発している デザイナーの専門性を持って「良いUX」を作るためのプロセ…

こんにちは、テクノロジーコンサルティング課のゴマ太郎です。今回は Google Forms を用いてフォームを自社サイトに、簡単にかっこよく、実装する方法を紹介します。 いざ自力で実装しようとすると、回答を蓄積する DB の設定や回答があった際の通知処理など、フォームのフロントエンド実装の他にも考えることが多く出てきます。そのようなバックエンドの面倒事については考えず、楽をしたいという方に向けての記事になります。 1. Google Forms の実装パターン 1-1. 実装パターン 1-2. 各パターンの比較 2. 実装方法 2-1. ① Google Forms に遷移させる 2-2. ②…