フロントエンド

職業訓練校時代の同期とLINEしてて思いました。 どこからどこまでがフロントで処理する内容で、どこからどこまでがバックエンドで処理する内容なのか？？？？ 小学生でもわかるレベルで説明ができないのでとりあえず記事にして考えをまとめることにした。 プログラムってのは基本的には取得加工表示だと思ってて、さらに細分化するとリストを取得して、加工するためにループと条件分岐で加工して、繰り返し表示するもの。 でもそれってフロントでもバックエンドでもできるよね？ めっちゃ簡単にいうと フロントの入力フォームから数字の１と１をバックエンドに送ってあげる。 バックエンドで１＋１とする。それをフロントに返す。 フ…

はじめに こんにちは、技術本部 Bill One Engineering Unit の江川です。 普段は、Bill OneでWebアプリケーション開発をやりつつ、フロントエンド周りの技術的な改善に向き合ったりしています。 今回は、バックエンド編の続きとして、フロントエンドにおけるConnectによるスキーマ駆動開発の実例を紹介できたらと思います！ なお、本記事は【Bill One 開発 Unit ブログリレー】という連載記事のひとつになっています。他の記事もぜひぜひご覧ください！

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

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

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

はじめに こんにちは！フロントエンド開発課のkoki_matsuraです。 この記事では、E2Eテストフレームワークとして用いられるPlaywrightのインストールといくつか基本的なテストコード、最後に拡張機能についてもご紹介させていただきます。これからPlaywrightでテストを書きたい人、E2Eテストに少しでも興味を持っていただける方に読んでいただけると幸いです。 目次は次の通りになっています。 はじめに Playwrightとは インストール 簡単なテストを書いてみよう Playwrightの設定を編集しよう 別タブを開くテストを書こう 別タブをコードから開くケース 別タブをリンクか…

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

出版社主催のプール水着撮影会、共産党の圧力で禁止に、仕事を奪われたモデル業の女性などから苦言相次ぐ 快感により種の保存へのインセンティブを与えるのが『本能』だというのであれば、女性の出産分娩に痛みと恐怖が伴うのはなぜなのだろう？問題 - 自意識高い系男子 [23話]バンオウ-盤王- - 綿引智也/春夏冬画楽 | 少年ジャンプ＋ 共産党が『水着撮影会イベント』を次々に中止に追い込む事件が発生。このままではグラビア文化が破壊されるかもしれない。 Markdown + AI（GithubCopiotX）の驚異のタッグ！[emoji:B5A] 2023年新世代の爆速ライティング体験へようこそ！[emo…

今日はてブでこんな記事が話題になっていました。 記事を読んでて、以前そこそこ大きめのサービスでバージョン2からの移行作業を経験した者として色々思うことがあったので個人的な思いを書きまとめてみることにします。 筆者自身はComposition APIの難易度よりもエコシステム・コミュニティ周りの影響も強いように思っているため、書き方よりこれらの話がメインです。 Vue全体に対する個人的なスタンス まっしろな状態から始める場合は全然選択肢に入ると思っています。 一方でバージョン2から3へ移行する場合は、覚悟を決めて時間に余裕を持ってやる必要があります。むしろこれが一番の鬼門です。メンバーがフロント…

求人まとめ 前口上 クックパッドで人員削減、退職勧奨があったようで、各社が採用情報をTwitter上で #ex_cookpad に流しています。 クックパッド社で働いたことはないんですが、Rubyコミュニティーへの貢献は大きいものがあり、よく技術ブログを読んでいます。 エンジニアのレベルが高いのもあるのですが、デザイナーが半分PMを兼ねているような業態が独自な部分で強いところですね。 フローメディアだと流れてしまうので、exクックパッドな人も、単に転職先探している人にも有用そうなので簡単にまとめておきます(職業紹介を目的としておらず個人的なメモです)。 エンジニア Ruby タイミー Scov…

梅雨シーズン到来です。雨の日も、気持ちだけはスカッと晴れやかにいたいですね。 今回は、「Amazon CloudFront」についてです。その名の通りクラウドのフロントエンド（ユーザに最も近い場所）からコンテンツを提供してくれるサービスです。 以前、ある案件で「Amazon S3」に配置されている大量の画像ファイルをWebページで表示する際に、 S3ダイレクトで画像ファイルを取得する CloudFront経由でS3の画像ファイルを取得する どちらの方がいいか悩んだことがありました。 実際にパフォーマンス検証もしてみて、2のCloudFront経由の方が速かったのと、静的Webサイト配信等の事例…

こんにちは。 pixiv事業本部 マンガ部のマネージャー tenです。 昨年10月、新サービス「pixivコミックインディーズ（以下、インディーズ）」のリリースに寄せた記事を投稿しました。 インディーズの他にも、ピクシブはpixiv、pixivコミック、Palcy という、マンガ関連サービスを多数開発・運営しています。 pixivといえばイラスト！小説！……だけではなく、マンガもこれだけやっているよということを皆さんにもっと知っていただくべく、「pixiv MANGA Night」というイベントを開催します！ pixiv.connpass.com サブタイトルを「作品と読者を繋ぐ技術のウラ側」…

Webデザインの世界は、ますます競争が激化し、デザイナーがコモディティ化されてしまう傾向があります。しかし、優れた経営コンサルタントとして、私はWebデザイナーがこの困難な状況から抜け出すためのいくつかの方法をご紹介します。以下では、具体的な要点を整理し、具体例も交えながら、Webデザイナーがコモディティ化から逃れるための戦略について説明します。 1. スキルセットの多様化単一のスキルに頼るだけではなく、他の関連するスキルを習得することが重要です。たとえば、UI/UXデザイン、フロントエンド開発、コンテンツ戦略など、さまざまな分野でのスキルを習得することで、自身の価値を高めることができます。例…

東京無料システムエンジニア交流会（6月）日時：2023年6月15日(木) 19:00〜20:30 （定員12名） 場所：東京都中央区日本橋小伝馬町１６−９aLATO日本橋小伝馬町6階 参加費：無料 持ち物：お名刺 ※受付にてご提出いただきます (お名刺をお持ちでない方は、前日にお送りしたご案内メールの受信画面を受付時にご提示ください) 対象者： IT関連のエンジニアの方 システムエンジニア、フロントエンドエンジニア、サーバーサイドエンジニア、アプリケーションエンジニア、バックエンドエンジニア、ネットワークエンジニア、インフラエンジニア、プログラマー、データベースエンジニア、エンベデッドエンジニ…

1. はじめに 先日AWSとVue.jsでアプリケーションを開発する機会がありましたので個人的に重要だと感じた点や躓いた点をまとめました。参考になれば幸いです。 2. 目次 1. はじめに 2. 目次 3. 概要 3.1. アーキテクチャ図 3.2. ダイアグラム図 3.3. ランタイム設定 4. 各種AWSリソースのセットアップ 4.1. Amazon S3 4.1.1. Amazon S3とは 4.1.2. Amazon S3の設定 4.2. Amazon VPC 4.2.1. Amazon VPCとは 4.2.2. Amazon VPCの設定 4.3. Amazon RDS 4.3.1.…

こんにちは。プロダクト開発部QAエンジニアの岡と申します。 弊社は「auブックパス （運営：KDDI株式会社）」と包括的なパートナーシップを結び、開発を行なっています。 こちらのサイトの監視に、Datadog Synthetics Tests（ブラウザーテスト）を導入して自動化したことについてお伝えします。 サイトの監視を自動化した結果、障害の検知と解決を迅速に行うことができるようになりました。 この記事で伝えたいこと Datadog Synthetics Testsによる外形監視の自動化について この記事で伝えたいこと Datadog Synthetics Tests 導入理由 Datado…

(adsbygoogle = window.adsbygoogle || []).push({}); 皆様、どんな朝を迎えてますでしょうか。私は、戦いに行く気分です。 昨日の落ち込み記事に、励ましのコメントをありがとうございます。 turibakapapaさんとsarukichitailさんの言う通りだなと思ったのと、 sukekiyo-kunさんの言う、『「出来が悪い子ほど可愛い」ってタイプかもしれません』これが本当だったら良いなと心底思いました。 昨日の記事で色々書きましたが、全て私の思い込み勘違いと被害妄想だったのです😅 6月6日の朝9時の始業開始後、『bollaちゃん、ちょっといい？』…

仕事のフロントエンド開発ではviteを使用しています。 ただ最近viteコマンドで開発サーバを起動しても何も表示されなくなる（画面は真っ白）、という事象に遭遇しました。 chromeのコンソールを確認すると以下のような文字列だけが表示されていました。 Failed to load resource: the server responded with a status of 504 (Outdated Optimize Dep) 対応1 とりあえず、再インストールしたらどうにかなるかも、と思い、以下のような手順で再インストールし、viteを起動しました。 rm -fr node_modules…

クラウド環境の構築を行なっていると、ごくたまにBasic認証とBearer認証の２つを行いたい時があります。 具体的にはWebAPIとフロントエンド（SPAやSSG等）が分離されている構成でBearerを使っているケースです。検証環境のような非公開のシステムにBasic認証をつい設定してしまうとAuthorizationヘッダーが競合します。 これに対する解決方法をいくつか挙げてみます。 1. Basic認証をやめる いっそ止めるという方法。代わりにIP制限ではどうかと一考の余地あり。 2. ドメインをAPIとフロントエンドで異なるものにする Basic認証をフロントエンドだけに設定してAPI…