こんにちは。名古屋グループのとりです。 昨年まではリモートワークにする日が多く、静かな環境で集中できるかと思いきや、安物の椅子で座り心地が悪かったり、移動する事が無いので運動不足がストレスになったりと、やっぱり職場の方が仕事に集中できるなと思う今日この頃です。 私はWebやアプリの入力フォームに対して探索的テストを行う時、開発現場に居た時の経験から何か悪さできないかなとプログラム上誤動作を起こしそうな入力を試す事が多いのですが、同様の手段でデータベースを意図的に不正操作する方法をSQLインジェクションと呼

はじめに こんにちは WESEEK で yaml から css まで何でも書く haruhikonyan です。 フォームなどをコンポーネント化したときに同じページにそのコンポーネントを使うと id の重複に困ったりしませんか？ そんな時に React が公式で提供している useId という hook を使うと解決するかもしれません。 しかし利用においては注意点があるので具体例とともに紹介したいと思います。 useId とは まず最初に useId とは何かです。 簡単に言えば同じ React を使った

こんにちは。エンジニアの北島です。普段は LIFULL HOME'S の売却査定領域 でエンジニアリングを担当しています。 今回は既存アプリケーションのパフォーマンス改善に、フロントエンドの観点から取り組んだ話をします。 経緯 弊社のサービスで プライスマップ という AI 査定による不動産価格を地図上で一気に見られるサービスがあります。 このサービスは 2015 年にローンチされ、当時は最新の技術を利用していたものの現在は老朽化が進んでいました。 私どもの部署では昨年このサービスの運用主幹となり、昨年度

フロントエンドエンジニアの嶌田です。株式会社 LIFULL でプロダクトのアクセシビリティ向上をミッションとして活動しています。 本日は、不動産・住宅情報の総合サービスである LIFULL HOME'S のスマートフォンサイト において、過去半年間で実施したアクセシビリティ向上施策をご紹介します。ご紹介する施策のうちいくつかは、内容を掘り下げて実装コードを交えて解説をしていきます。 それでは、早速アクセシビリティ向上のために実施した施策を見ていきましょう。 ボタンを正しくボタンにする 追加コンテンツを読み

本記事は 2022年度 新人卒業記念Week 4日目の記事です。 🌸 3日目 ▶▶ 本記事 ▶▶ 5日目 📚 はじめに 1.Udemyでのオンライン学習 2.実務での修正作業 3.新規ページ作成 大変だったこと①：参考となるコードやパーツがない 大変だったこと②：クラス名や共通要素を一から考えなくてはいけない まとめ はじめに 初めまして、入社一年目の小嶋です！現在はWebディレクターを目指して日々修行中です！ 新人卒業記念Weekということで、コーディングがほぼ未経験だった私が、html・cssを使って

はじめに ZOZOTOWN開発本部の武井と申します。ZOZOTOWNのフロントエンドリプレイスプロジェクトを主に担当しております。 ZOZO DEVELOPERS BLOG でも「 ZOZOのリプレイスプロジェクトで得られる唯一無二の経験。大規模サービスを進化させるやりがいとは 」というインタビュー記事を掲載しておりますので、もしよろしければこちらも併せてご覧ください。 さて、本題です。現在ZOZOTOWNではオンプレミスかつ、モノリスだった既存システムをマイクロサービスAPIに責務を分割したり、インフラ

ニフティ株式会社新卒2年目のRyommです。普段はマイ ニフティというスマートフォン向けアプリの開発・運用を行なっています。 ニフティには書籍購入補助制度があり、その管理にbookbotというツールを使っています。 今まで書籍購入補助制度で購入された本とその感想を、bookbotがデータベースに貯め込んでおり、昨年末にNotion連携機能を実装したことで誰でも簡単に閲覧できるようになりました。 そこで今回は、書籍購入補助が始まった2019年から蓄積したデータの分析結果を大公開しちゃいます！ 社内では以下の

はじめに こんにちは! そろそろエンジニア2年目が終わり、3年目を迎えることに恐怖している新垣修一です! 今回はPythonWebフレームワークの一つであるStreamlitを使用して、アプリを作成してみます。 最近技術系の記事を見るとフロントエンドの知識なしで早くアプリを作成できるStreamlitというフレームワークの存在を知り、少し触れてみたいなと思い今回の記事を書かせていただきました。 Streamlitとは Streamlitは、Streamlit社が開発したPythonのWebアプリケーション

LIFULLでフロントエンドエンジニアをしている齋藤です。 2008年入社なので15年目ぐらいの古株です。今は LIFULL HOME'S の賃貸部門でフロントエンド開発をしています。 いきなりですが、みなさんはアイコンをどう実装していますか？ アイコンフォント、スプライト、一つ一つ切り出す。フォーマットもSVG、PNG、Fontなどなど。 実装方法はいろいろありますし、サイト規模や運用体制などでどれが扱いやすいかは変わってきますよね。 たかがアイコン、されどアイコン。 利用頻度が高く、大きさや色が微妙に

プロダクトエンジニアリング部の海老澤です。 普段は LIFULL HOME'S の賃貸部門のフロントエンド開発をしています。 近年、LIFULL の開発部門では「開発生産性」という言葉が取り沙汰されるようになりました。 LIFULL HOME'Sの主要リポジトリは10年以上運用され続け、今も多くの開発者によって日々改修され続けています。 長い年月の中で小さな設計ミスも積み重なって大きくなり、ちょっとした実装でも入念な調査が必要となり開発生産低下の要因となっていました。 また10年以上前に採用したフレームワ

こんにちは、ISID 金融ソリューション事業部の岡崎です。今回はEpicGames社が提供する ゲームエンジン 、 UnrealEngine5 のPlugin「PixelStreaming」を使用し、WebUIからサーバー上のUE5の操作を行いました。 はじめに PixelStreamingを利用してWebUIからUEを操作するためには、UEアプリ上のBluePrintにURLクエリや JavaScript などを紐づける必要があります。 今回は、WebUIとUEアプリの連携をする為の方法について解説しま

日々GitHub上で管理されたファイルを編集していて欠かせないことの1つに「Pull Requestを作る」があります。 Pull Request（以下プルリク）の説明文はMarkdown記法をサポートしているので、箇条書きやWeb上にあるドキュメントへリンクなどを気軽に書くことができます。 ところで、プルリクの説明文やいわゆるREADME.mdのようなMarkdownで書かれた内容は直接GitHub上で表示されるのではなく1、別途HTMLに変換されて表示されます。 プルリク作成の画面ではMarkdown

この記事は、イベント　【 PERSOL（パーソル）グループ Tech Talk #3 - 技術負債との向き合い方 - 】を開催しました。 の発表内容です。 dodaの技術負債を解消する守りのリファクタリングと攻めのリアーキテクティングというタイトルで発表させていただきます。 まず、自己紹介です。私は斎藤悠太と申します。略歴としましては、Sirや事業会社での開発を経験して、2020年にパーソルキャリアに入社しています。現在はdodaの開発に関わっていて、得意な領域は、サーバーサイドからインフラ領域です。言語

こんにちは、XI 本部ソフトウェアデザインセンター所属・新卒 1 年目の松本です。 昨年10月に配属されてから 3 ヶ月間、Atlassian Forge を使った アプリ開発 を担当しました。 そこで今回は、Forge の概要と実際の開発手順を解説していきます。 Forge に関する日本語記事はほとんどなく心細い想いをしたので、本記事が誰かの助けになれば幸いです。 Forge とは UI 構築手法 2 パターン UI kit Custom UI 開発手順の例 到達目標 執筆者の環境 ① Node.js

こんにちは！エンジニアの大林です。 先日セーフィーのエンジニアにアンケートを取ったので、今回はその内容をお届けします。 アンケートのテーマは「新卒エンジニアにおすすめの〇〇は？」ということで、以下の3つについて聞いてみました！ 技術本 技術以外の本 本以外の学習媒体 新卒エンジニアにおすすめの技術本は？ 新卒エンジニアにおすすめの技術以外の本は？ 新卒エンジニアにおすすめの本以外の学習媒体は？ 最後に 新卒エンジニアにおすすめの技術本は？ たくさんの意見が寄せられましたが、中でも多かったのが以下の2冊でし