frontend

はじめまして！フロントエンドエンジニアのエンドー(@onikumaruBuu)です！ 私は大学3年生で、普段は大学の友人と「学食モバイルオーダーアプリ」の開発をしています。フロントエンドに興味があり、React / TypeScriptを勉強中です! 8月中旬からインターンとしてミラティブに入社し、フロントエンド開発業務を行ってきました。 本記事ではフロントエンドとしてのミラティブでのインターンで身につけた知見を共有します。 目次 目次 ミラティブでのフロントエンド開発 担当したフロントエンドの仕事 イベントLPのTailwind CSSへリプレイス なぜTailwind CSSに置き換える必…

こんにちは、フロントエンドエンジニア 兼 バックエンドエンジニアの駒木です。 iOS / Android / バックエンドのライブラリ紹介に引き続き、MirrativのWebフロントエンドで使用しているライブラリをご紹介します！ JSフレームワーク: React with TypeScript / Vue.js 8割以上のアプリケーションはReact + TypeScriptで実装されていますが、数年前に立ち上げた一部のイベントページはVue.js + Vanilla JSで実装されています。 ビルド・バンドルツール: Vite / Parcel / webpack 2021年5月くらいからV…

みなさんこんにちは、X イノベーション本部ソフトウェアデザインセンターの徳山です。 本記事は電通国際情報サービス Advent Calendar 2022 12月9日の記事です。 ISID に入社して1 ヶ月ばかりですが、今まで携わってこなかった技術領域に触れる機会が増えそうなため刺激的な日々を送っております。 さて、これまでユーザーに近い領域の開発、いわゆるフロントエンドを中心とした開発に携わり4年目となります。 保守性や再利用性が高いコードをどのようにしたら書くことができるのかを模索する日々ですが、意外とフロントエンドに関しては手頃にまとまっている文献が少ないと感じます。 そこで今回は、ウ…

はじめに こちらは バイセルテクノロジーズ Advent Calendar 2022 の 8日目の記事です。 前日の記事は 市田さんの「デプロイ頻度を上げるためにやったこと」でした。 こんにちは。バイセルテクノロジーズ、テクノロジー戦略本部に所属している藤井です。普段はリユースプラットフォームのフロントエンド開発をしています。 リユースプラットフォームは、買取、査定、在庫管理、出品管理など、商品の買取から販売までを一気通貫しておこなうためのものです。前述の通り、リユースプラットフォーム上には様々なアプリケーションが存在し、類似したコンポーネントが複数のアプリケーションで量産されてしまっていると…

Vue 2 でコンポーネントテストを書くために こんにちは。プログラミングをするパンダ（@Panda_Program）です。本記事は BASE アドベントカレンダー 2022 の4日目の記事です。 本記事では Vue 2 + TypeScript 環境に Testing Library を導入する方法をご紹介します。なお、Testing Library の使い方については本記事では触れていません。当該ツールの具体的な利用方法を知りたい方は公式ドキュメントをご覧ください。 Testing Library とは何か Testing Library は Kent C. Dodds 氏が作成したコンポ…

アソビュー！ Advent Calendar 2022の2日目です。 本日の裏面はこちら！ SeleniumによるAPI呼び出しを含むE2Eテスト自動化 - asoview! TECH BLOG アソビューでフロントエンドエンジニアをしている村井です。 オートコンプリートとは？ Chromeで設定できる項目 実際に試してみる 各ブラウザの対応 まとめ 最後に オートコンプリートとは？ 皆さんはオートコンプリート機能をご存知でしょうか？ オートコンプリートとは、ブラウザに入力したIDやパスワードを記録し、自動入力してくれる機能です。 ブラウザの設定から自動入力機能をオンにすると適用されます。 今…

フロントエンドのテックリードのみゅーとん(@_mew_ton)です。 弊社では新しいプロジェクトを立ち上げの際に、Nuxt3を採用しています。 このプロジェクトでは、APIコール部分の実装について、以下のようなルールを設けています。 ブラウザからは、 Nuxt3 の ServerRoutes (BFFサーバ) へアクセスする BFFサーバから、APIサーバへアクセスし必要な情報を取得する BFFサーバにて、ブラウザで表示するためのデータ構造に変換する (不要な情報を削ぎ落とす) このプロジェクトでE2Eテストを導入するためBFFサーバのモックを準備しました。 今回は、Nuxt3 の Serve…

Symfony UXとは Symfony UXは以下の説明[1]の通り、シームレスにJavaScriptをSymfony Applicationで扱うための取り組み・ライブラリとのこと。Stimulusをラップしているようです。 Symfony UX is an initiative and set of libraries to seamlessly integrate JavaScript tools into your application. For example, want to render a chart with Chart.js? Use UX Chart.js to bu…

単なるここ最近読んだ本のメモ。 AWSで実現するモダンアプリケーション入門 〜サーバーレス、コンテナ、マイクロサービスで何ができるのか 作者:落水 恭介,吉田 慶章 技術評論社 Amazon frontendの扱いの参考にしよう，と思って読んだ。実際にはfrontendの具体的設計は入っていなかったのだが，Amplifyのきっかけをつかめた。サンプルアプリを題材にアーキテクチャの変遷をたどっているので読んでいて「設計を体験している」感がする。 基礎から学ぶ サーバーレス開発 作者:青池利昭,福田悠海,和田健一郎 シーアンドアール研究所 Amazon サーバーレスの「運用周り」の話が載っている。…

AWS Amplifyを使ってReact frontendを作ろう，というなかなか意欲的なラボ。 Frontendのような変化の激しい技術をやるならある程度時間をかけて集中しないと，と思っていたのでとっかかりにちょうど良い。

これは、なにをしたくて書いたもの？ ふだんDocker Composeをそんなに使っていないのですが、たまに使うとコンテナ間で名前解決するのにどうすればいいのかよくわからなく なるので、ちゃんと見ておくことにしました。 参照ページ 主に、以下のページを見ています。 Networking in Compose | Docker Documentation Compose specification | Docker Documentation 環境 今回の環境は、こちら。 Docker Engine。 $ docker version Client: Docker Engine - Commun…

少し前からFour Keysの取得をはじめました。今回はそれについて書きます。 背景 Four KeysとはLeanとDevOpsの科学でも紹介されていますが、GoogleのDevOps Research and Assessment (DORA) チームが確立したソフトウェア開発チームのパフォーマンスを示す指標です。 https://cloud.google.com/blog/ja/products/gcp/using-the-four-keys-to-measure-your-devops-performance?hl=ja クオカードでも開発生産性の向上は一つの重要なテーマですが、現状を…

Goのフレームワークである、ginを使って簡易的なAPIを作成していきたいと思います。 ginとは ginは、Goで書かれたWebアプリケーションフレームワークになります。 高速なパフォーマンス、ミドルウェアが充実、JSONのリクエストのバリデーション、ルーティングのグループ化、エラー管理、組み込みのレンダリング、拡張性があるなどの特徴を持ちます。 インストール $ go get -u github.com/gin-gonic/gin コード内でインポートする import "github.com/gin-gonic/gin" これで、ginを使用することができます、簡単ですね！ docker…

wails initで生成されたコードはapp.goのGreetメソッドがフロントエンド側に公開されるように設定されている。 // Greet returns a greeting for the given name func (a *App) Greet(name string) string { return fmt.Sprintf("Hello %s, It's show time!", name) } これがfrontend/wailsjs/go/main/App.d.tsとfrontend/wailsjs/go/main/App.jsにそれぞれ下記のようにビルドされる。どうやら必ず…

いま読んでいる本 bookmeter.com bookmeter.com 今週の読んだ記事 今週のTwitter fav ついにJS標準でディープコピーできる関数がきたー！！！再帰的にネストしたオブジェクトも安全にコピーできるっぽい。 https://t.co/9lE3XRKOcA— tompenguin 🇺🇦 (@tompenguin_) 2023年1月19日 📢SaaS市場のトレンドを四半期毎にまとめた「Japan SaaS Quarterly Report 22.Q4」を公開しました！22年のスタートアップ調達環境は活況だったものの、Q4からペースは減速。上場市場は反発したものの、景気後…

ElmishはFableでElmっぽいアーキテクチャを実現するライブラリ。 elmish.github.io 今回もまた前回に引き続きで。 yohfee.hatenadiary.org まずは依存関係のインストール。 $ cd path/to/hello $ cd frontend/src $ dotnet add package Fable.Elmish.React -v 3.0.1 Elmish 4もまたFable 4待ちと思われる。 frontend/src/App.fsはこうなる。 module App type Model = int type Msg = | Increment |…

FelizはFableでReactを使うのが簡単になるDSLを提供するF#のライブラリだ。 zaid-ajaj.github.io 前回のhelloプロジェクトを引き続き利用して組み込んでみる。 yohfee.hatenadiary.org まずは依存関係のインストール。 $ cd path/to/hello $ cd frontend $ npm install react@17 react-dom@17 $ cd src $ dotnet add package Feliz -v 1.68.0 Fable 3だとFeliz 1とReact 17が限界のようだ。Fable 4でFeliz 2…

当記事は みずほリサーチ&テクノロジーズ × G-gen エンジニアコラボレーション企画 で執筆されたものです。 はじめまして、みずほリサーチ&テクノロジーズの小野寺と申します。 みずほでは 2022 年 3 月に発表した Google との戦略的提携 の一環として Google Cloud の活用に取り組んでいます。 この記事では AWS のアーキテクトを経験してきた著者がはじめて Google Cloud で社内向けの静的 Web ページを配信するまでの経緯を記述しています。 Single Page Application を Google Cloud で構築予定の方や、これから Goog…

はじめに Ruby on RailsのWebサービスを個人開発中です。 Docker＋VSCode Remote Container開発環境を作るにあたり、初めてで色々調べながら進めたので、記録しておきます。 やってみて分かったのですが、開発環境はDockerコンテナを使いつつ、コーディングはローカルでやるのと全く変わらない感じでVSCode上でできるので、かなり快適です。 そもそもDockerとは？ Docker自体に初めて触れる方の場合は、こちらの記事をさらっと読んでから戻ってくると、この後の内容を読み進めやすいと思います。 peno022.hatenablog.com 手順 VSCode…