フロントエンド

こんにちは！フロントエンド開発課のkoki_matsuraです。 この記事では、僕が開発に携わっている製品のE2Eテストに取り入れたページオブジェクトモデル(POM)という実装パターンの概要と取り入れたキッカケ、POMへリファクタリングする簡単な例をご紹介させていただきます。 僕と同じようにE2Eテストに関わっている方、E2Eテストに興味を持っている方などに読んでいただけると幸いです。 目次は下記のようになっています。 POMとは なぜPOMを使い始めたのか POMへのリファクタリング ログイン画面 テスト内容 POM導入前のテストコード ページオブジェクト作成 POM導入後のテストコード 終…

こんにちは。Webエンジニアの永田です。 先日、クチコミ転職診断という機能をOpenWorkのWebサービス上でリリースしました！ １５個のキーワードに対する印象を回答することで、自身とマッチングする企業が分かるという機能になっています。 アカウントをお持ちの方はマイページのメニューまたはこちらのリンクからアクセスすることができます。まだの方は是非お試しください！ 今回の記事ではWebエンジニアの視点で、Webサービスに関する設計や開発についてお話しします。 全体の設計 クチコミ転職診断は、以下の様な仕組みになっています。 定期的に、各企業のクチコミの、各キーワードの出現頻度の全社順位を計算す…

こんにちは、介護事業者向け経営支援サービス「カイポケ」のフロントエンドエンジニアのsetohです。2022年12月から株式会社エス・エム・エスで働いています。 私は大学時代にAndroidアプリ開発を始め、就職後は一貫してAndroidアプリ開発を軸に10年以上のキャリアを積んできました。しかし心機一転、エス・エム・エスに入社後はこれまで全くの未経験であったフロントエンドエンジニアとして業務を行っています。 今回の記事ではAndroidアプリエンジニアがフロントエンドエンジニアとして業務をこなせるようになるまでに効果的だった学習内容について書きます。 学習する観点 以前に同じフロントエンドエン…

フロントエンド開発のためのセキュリティ入門 知らなかったでは済まされない脆弱性対策の必須知識作者:平野 昌士翔泳社Amazon 「フロントエンド開発のためのセキュリティ入門」を読みました。 この記事では、その感想をまとめてみたいと思います。 概要 この書籍は、その名の通りフロントエンドのセキュリティについて入門者でもわかりやすく解説されたものです。 XSSやCSRF、クリックジャッキング、オープンリダイレクトなど、フロントエンドで考慮すべきセキュリティ上の課題が幅広くカバーされています。 さらに、問題に対する具体的な対策が紹介され、その後にハンズオン形式でその手法を試すまでの一連の流れで学ぶこ…

はじめに vue-cropperjsの概要 調査 README バージョンについて Props コールバック 実装編 応用編 円形切り取り 画像サイズの自動調整 最後に はじめに お久しぶりです！ クロスマート株式会社でフロントエンドのタスクを主に担当しております。ナイスガイの福留です。 大腿骨頸部骨折して緊急搬送されたエンジニアが３ヶ月半の入院中でも仕事が出来た訳の執筆後、特に大腿骨周りに異常はなく健康に過ごせております。 日々の散歩とカルシウムは大事ですね。 本日は、弊社プロダクトでも使用しているライブラリであるvue-cropperjsを色々調べてみる記事になります。 また以下から弊社の…

1. はじめに Web フロントエンド開発を中心に行っている寺島です。 この記事はアンドパッドで開発しているデザインシステム 『Tsukuri』 の Web 向け実装である『Tsukuri for Web』の構築について紹介する最後の記事です。 tech.andpad.co.jp tech.andpad.co.jp tech.andpad.co.jp この記事では Tsukuri for Web の現状と今後について紹介します。 記事内容を通して、Web フロントエンド開発者やデザイナーの方にアンドパッドに興味をもってもらうことを目的としています。 2. Tsukuri for Web の現状…

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

現在参画中の現場で、chatgpt を使った新規プロダクト開発に関わる機会があったので感想を残しておこうと思います。 普段は別でメインのプロダクト開発に取り組んでいますが、今回はリリースまでの一時的な助っ人として開発に参加することになりました。 このプロダクトは比較的小規模なサービスで、SPA + サーバレスなバックエンドの構成が採用されました。 実装メンバーはメインエンジニアと僕の2人で、サービスの構想からリリースまでかなりタイトなスケジュールでの開発が求められました。 僕はフロントエンドの開発を担当したのですが、明日までに検証環境で動かせるようなベース部分を作って PR を立ててほしいみた…

こんにちは、コドモンプロダクトチームの中野です！ コドモンでは、2020年から既存プロダクトの機能リプレイスを進めています。今回は第二弾機能リプレイスでの負荷テストについて書きます！ 目次 目次 リプレイスの背景 今回のリプレイスの概要 負荷テストの概要 k6の紹介と選定理由 テスト設計・実施までのプロセス テストシナリオ作成 テストシナリオA テストシナリオB テストシナリオC テストの目的 検証観点 WEB/APPサーバー DBサーバー 検証環境 実行 結果・考察 結果 考察 今回のテストをふりかえって まとめ リプレイスの背景 既存のプロダクトはこれまで成長を続けてきましたが、一方でコー…

これは何 今回モノレポ管理ツールを Nx から Turborepo へと移行したのですが、ポリレポからモノレポへの移行に関する記事はあっても管理ツールのリプレイスというのはあまり見当たらなかったため、その知見を共有したいと思います。 弊社サービスとフロントエンドの構成について マキヤマブラザーズ株式会社で副業エンジニアとして主にフロントエンドをお手伝いしている @uekenu です。 弊社マキヤマブラザーズ株式会社では動画素材サービスDeLMOの運営を行っています。DeLMOは動画をダウンロードする広告主様/代理店様と動画提供者のクリエイターに利用いただいており、そこに特権管理者である弊社のス…

こんにちは、2023年4月にYOUTRUSTにジョインした寺井(YOUTRUST / Twitter)です。 今日から6/2(金)までの5日間、YOUTRUSTのエンジニアチーム全員で毎日ブログ記事を投稿していく予定です！ YOUTRUSTは2023年5月29日現在、正社員エンジニア6人 + 業務委託の方数名で開発を進めています。 今日は私がYOUTRUSTに入社して2ヶ月間一緒に働いて感じた、YOUTRUSTの正社員エンジニアのみなさんの紹介記事を書きたいと思います。 1人目 アプリエンジニア 朝日さん 1人目は、アプリエンジニアの朝日さん(YOUTRUST / Twitter)です！ 朝日…

こんにちは、開発チームでエンジニアをしている和田です。 普段の業務ではバックエンドは Node.js 、フロントエンドは Vue.js を使って開発することが多く、JS・TSな毎日を過ごしています。 最近、N2i では「毎朝15分で Go 言語を習得する」という勉強会が開催されており、Go 言語について学ぶ機会が増えました。 というわけで、今回は Go 言語の初学者を対象に Go 言語のコンセプトを理解しつつ、JavaScript の配列のメソッドを Go 言語で再現する方法について紹介します💪 Go 言語 のコンセプトに触れる Go 言語のコンセプトに触れる People illustrat…

自分としては、フロントエンド中心でポートフォリオ作った方が、将来的なアプリ作りが楽しくなる気がしている。fly.ioなら３つまではタダでデプロイ出来るみたい。rails使ってアプリも作れるけど、DB制約とか裏のロジックを作るのがめんどくさそうjsを中心として、ローカルストレージにデータを保存する形式の方が気楽な気がする。それかメモリストだけ、railsに保存して永続化するとか。その場合は、コントローラーの処理 + モデルでバリデーションが書ける。それか基本的にrailsでHTMLを描画して、部分的にJsが必要な部分はreact化すれば良いのかな？railsの中で基本的にHTML書いて、必要な部…

サムネイル こんにちは、フロリアでエンジニアとして活動している irico です。 現在 kintone ではフロリアというプロジェクトの中で、Closure Tools から React への移行作業に取り組んでいます。 今回は、そのフロリアのチームの 1 つである Reactone チーム が採用した「Storybook をフル活用したテスト手法」についてお話します。 Storybook によるテストアプローチ Storybook の v6.4 から play 関数が導入され、v6.5 から Interaction tests が可能になりました。 これによって Story 上でテストを実…

こんにちは、みっきーです。 普段ソフトウェアエンジニアとして社内システムの開発に携わっています。 今回はAmplifyの使用感を自分向けにまとめます。 使ってみたきっかけ 私の所属する課ではBootCampという名で、技術習得を目的とした開発を行う研修を実施しています。その研修で開発工数を減らす方法を模索したいと思い、流行りのローコード開発を試すことにしました。ローコード開発ツールの中でAmplifyを選んだ理由は、普段開発で利用しているAWSのサービスだったためです。 Amplifyの簡単な説明 Web/Mobileアプリ開発のためのフレームワークです。 以下機能が提供されており、フロント/…

Insight EdgeのLead Engineerの日下です。 弊社ではちょっとしたWebアプリを作るときに、AWSを用いたサーバーレスアーキテクチャで フロントエンド CloudFront + S3 + SPA（React等） バックエンド API Gateway + Lambda という構成をしばしば使います。 今回は、この構成においてありがちなキャッシュによるバージョン不整合の対策について紹介します。 SPAにおけるキャッシュ問題 上記の構成は安価かつスケーラブルにSPAを運用できることが魅力ですが、 フロントエンドの静的ファイルに対してブラウザのキャッシュやCloudFrontのエッ…

自己紹介 アラフォーで二児の母です。現在はコーダーとして働いています。 それまで 他業種で正社員で勤務していましたが、ママになって 通勤時間が長い（子供がいると一分一秒の戦いに...） 時短勤務で給料が安い 時短勤務は小学3年生まで 8時前に保育園に預け、18時直前にお迎えの日々... 子供が帰ってきた時に出迎えたい...etc 色々モヤモヤすることが増え、今後の働き方について考えるようになりました。 アラフォーでWEBの道へ 2人目の育休中に完全在宅で仕事ができるとの謳い文句に惹かれ、思い切ってWEBデザインのスクールに通うことにしました。 子供の寝た隣でパソコンを開く日々、、、課題に追われ…

前回記事を書いてから約半年位経ってしまいました。 色々あって技術ブログから離れていましたが、またコードを書く日々に戻りましたので少しずつ再開していこうと思います。 さて、 最近、Salesforce を用いたプロジェクトに関わる事が多くなって来ました。 www.salesforce.com Salesforce についてはまだ触り始めて数か月ですが、色々知識も溜まってきました。 今回からは Salesforce に関する記事を中心に書いていこうと思います。 Salesforce について ローコード開発の弊害 Apex によるバックエンドのスクラッチ開発 閑話休題 入力について 実装例 出力に…

nazology.net ⇧ 脳科学の発展を祈るしかないってことかね... JSTL（JavaServer Pages Standard Tag Library）の<c:foreach>を再描画させるには 枯れた技術なはずなのに、意外と情報が無くて驚きなのだけど。 Java側で<c:foreach>で繰り返し処理する変数の値を変えたら、<c:foreach>も自動的に再描画してくれると思いきや、然に非ず。 じゃあ、どうするかと言うと、 <c:if test=""></c:if> などで<c:foreach>を囲ってあげる必要があるっぽい。 とりあえず、<c:foreach>単独では再描画は無理…