「JavaScript」に関連する技術ブログ

企業やコミュニティが発信する「JavaScript」に関連する技術ブログの一覧です。

Node.js で Twig のプリプロセッサーを作って言語の機能拡張をしてみた話

技術開発部の相馬です。好きな JS モジュールバンドラーは Rollup です。 表題のとおりですが、今回は Node.js を使って PHP のテンプレートエンジンである Twig のプリプロセッサーを作り、言語機能の拡張をしてみた話についてご紹介したいと思います。 はじめに 弊社のメイン事業である LIFULL HOME'S の開発の歴史は長く、技術的負債と呼ばれるモノも多く存在しています。

社内勉強会で「JavaScript Promiseの本」を読了しました。

こんにちは!M&Aクラウドの荒井です。 弊社では週に2回社内で勉強会を開いています。 水曜日の夜は「フロントエンド勉強会」、金曜日の夜は「アプリケーション設計勉強会」と題しまして、お題に合う教材を選定し、みんなで輪読しています。 今年の6月はじめ頃から9月末にかけて、フロントエンド勉強会にて、こちらの「JavaScript Promiseの本」を教材にさせていただき

負債化したレガシーブラウザ対応のリファクタリングへの取組み

プロダクトエンジニアリング部の柴田です。 普段は LIFULL HOME'S の賃貸領域でフロントエンドの開発・設計を担当しております。 今回は LIFULL HOME'S での Web フロントエンドおけるレガシーブラウザ対応の負債解消への取り組みについてご紹介いたします。 背景 現在の LIFULL HOME'S の大枠は 2011 年ころに作られたものであり、当時の CSS3 サポート状況に差異のあるブラウザで

An Optimal Tool for Visual Testing, "Gazo-san" Is Now an OSS

Hi, I'm Jye Ruey . A SET(Software Engineer in Test) from LIFULL. We published an End-to-End testing framework "Bucky" at last time. www.lifull.blog In this time, an image difference detection tool "Gazo-san", which is for visual testing, is also published. github.com This article will introduce visual testing and the features of Gazo-san. What Is Visual Testing Why Visual Testing is needed Three keys in Visual Testing Capture 📷 Difference detection 🔍 Reporting 📑 Difference with End-to-E

JSON Schemaを用いたAPI Gatewayの設定ファイル管理

こんにちは、ECプラットフォーム部の鶴見、竹中です。普段はZOZOTOWNのリプレイスに関わるID基盤とAPI Gatewayの開発を行っています。 本記事では、API Gatewayの開発で取り入れているJSON Schemaを使ったドキュメントの自動生成および、スキーマの自動検証を紹介します。 API Gateway設定ファイルの運用改善 弊社で開発しているAPI Gatewayは、APIへのリクエストのルーティングやリト

Pug を HTML に移行して .vue ファイル の template タグ内に ESLint を効かせた話

こんにちは!スマートキャンプで インサイドセールスに特化した SaaS を作っているエンジニアの中川です。 上記プロダクトのフロントエンドは Vue.js を用いて開発しているのですが、 その中で SFC 内の template タグで使用していた Pug をやめて HTML に移行した件をこの記事ではお話しようと思います。 また、実際に template タグに ESLint を効かせてみて発覚したエラーや警告

「ひとり言」がチームワークを活性化?新入社員研修でオンラインハッカソンをやって分かった成功のための6つのコツ

開発部門(基盤本部)でエンジニア育成を担当している高玉です。 新入社員研修 の締めくくりとして、オンラインのハッカソンを5月末に開催しました。ハッカソンとは1~2日でアプリを作り上げる、企画から開発、デモまで全部入りのトガったイベントです。オンラインでのハッカソンは初めての取り組みでしたが、過去の経験を活かした事前準備と、新入社員の素晴ら

Vue 2.xのOptions APIからVue 3.0のComposition APIへの移行で知っておくと便利なTips

こんにちは。ECプラットフォーム部のMA(マーケティングオートメーション)アプリケーションチームで、社内向けのマーケティング運用ツールを開発している長澤( @snagasawa_ )です。 先日、日本時間の2020年7月18日に Vue 3.0のRelease Candidate(v3.0.0-rc.1) がリリースされ、今後は最終リリースまで主要なAPIのbreaking changeは想定していないとのアナウンスがされました。アナウン

開発要望をユーザーストーリー形式にした話

はじめまして、トラーナで業務委託エンジニアとして働いている @madai0517 です。 代表のしだのりさん( @sdx_ )とは約20年前のバイト仲間で今回ご縁があって一緒に仕事をすることになりました。 ※因みに当時はしだのりさんに ハンバーガ ーの作り方を教えてもらったり昇給試験の監督をしてもらってました。(マ◯ドナルドではバイトがバイトの昇給試験を行いますw

Rails + React のプロジェクトに Jest + Enzyme を導入してReactコンポーネントを単体テストする

Reactを利用しているRails プロジェクトにJestとEnzymeを導入して Reactコンポーネントのテストを書くことができたので導入手順をメモします。 当プロジェクトの環境は導入時点でRails5.2系で、webpackerとsprocketsが共存している状態でした。 Jestとは jest は javascriptのテストフレームワークです。 describe, it, expect などがあり RSpec と近い構文で記述することができます。 describe("足し

LIFULLの新卒エンジニア研修 in 2020

こんにちは。LIFULLでエンジニアをしている中村優太です。 2020年4月に新卒で入社して、早くも4ヶ月、配属されて2ヶ月が経過致しました。 この記事では、配属までのLIFULL新卒エンジニア研修についてご紹介したいと思います。 はじめに 研修スケジュール プログラミングの基礎 個人開発演習 その他トピック 最後に はじめに LIFULLのエンジニアは2ヶ月間の新卒研修があり

JavaScriptでの絵文字の扱われ方を知っていますか?

スマートキャンプの20卒エンジニアの高砂です! 皆さんは、JavaScriptにおける絵文字の扱われ方が難しい事をご存知ですか? 本記事では、その背景と適切な方法を解説していきます! JavaScriptにおける絵文字の問題点 問題点の再現 問題点の背景 絵文字を適切に扱う方法 まとめ JavaScriptにおける絵文字の問題点 JavaScriptで文字数カウントを実装する際、素直に考えると下記

9 年を超えて開発が続く LIFULL HOME'S の Web フロントエンド開発環境の改善

技術開発部の相馬です。好きな UI フレームワークは Svelte です。 私が現在所属しているグループでは、弊社のメイン事業である LIFULL HOME'S における開発効率の改善などを行っています。 今回は、LIFULL HOME'S の Web フロントエンド(以降はフロントエンドと表記します)開発環境を、Node.js の資産を用いて近代化した話(以降は近代化と表記します)をご紹介したいと思いま

LIFULL HOME'Sでのフロントエンド刷新・リファクタリングの歩み

こんにちは。プロダクトエンジニアリング部の中島です。 本稿(連載)では LIFULL HOME'S におけるフロントエンド技術スタックの刷新やリファクタリングの取り組みについて発信していこうと思います。 歴史 LIFULL HOME'SではバックエンドをSymfony2(php) + SinatraベースのBFF(ruby)、フロントエンドをjQueryといくつかのマイクロライブラリによって構築しています。 LIFULL HOME'Sの現在稼

PWA, PRPL Pattern の概要と採用状況の調査

こんにちは。メドレーにてジョブメドレー開発エンジニアをしています、矢野と申します。 ジョブメドレーでは、主にバックエンド ( Ruby on Rails ) の改修を担当してます 直近では 「サイトパフォーマンス改善施策」 として、Rails コードのリファクタリングによる TTFB 高速化に取り組んでました 「もう絶対にコケないのが分かってる」ビルドやテストを、手元のコンソー
技術ブログを絞り込む

TECH PLAY でイベントをはじめよう

グループを作れば、無料で誰でもイベントページが作成できます。情報発信や交流のためのイベントをTECH PLAY で公開してみませんか?