Wiz テックブログ

Wizは、最新のIoTやICTサービスをお客様に届ける「ITの総合商社」です。

フロントエンド

Nuxt Bridgeを使ってみて使用法、所感まとめ

今回は先日リリースされたNuxt Bridgeについて試してみたいと思います。

Next.jsのmiddlewareを使ってbasic認証を実装する

こんにちは、フロントエンドエンジニアの髙橋です。 先日Next.js ConfでNext.js 12は発表されましたね! 色々な新機能が追加されましたが、新機能のMiddlewareが気になって試してみたのでその使い方などを書いてみようと思います。 middlewareとは? 公式に…

現代を支配する究極のエンジニア像

需要激増中のグロースハッカーという職業について書いてみました。 自分が目指す職業の一つの選択肢として読んでいただけると幸いです。

新卒がタスクの恐怖で殺されないためには(仮)

こんにちは、フロントエンドの益田です。 OJT期間を終えてタスク管理について相談する機会があったので、今回は入社して5ヶ月経った自分なりのタスクの進め方について書いていきたいと思います。 1. 期限を確認する まずは、緊急か緊急でないかの確認をして…

ドキュメント作成に向いている静的サイトジェネレータはどれ?

こんにちは、フロントエンドエンジニアの柳田です。 現在、チーム内でドキュメントを作成する機会が多くなってきました。 社内では、様々な方法でドキュメントを作成しているのですが、そのひとつの方法として、静的サイトジェネレータ(Static Site Generat…

PlaywrightとTestCafe比較

E2Eフレームワーク,ライブラリである「TestCafe」と「Playwright」について簡単に比較してみました。

Puppeteerを使ったツールの構成について

こんにちは、フロントエンドエンジニアの高橋です。 先日Puppeteerを使った業務効率化のツールを作成しました。 その時参考にさせていただいた記事と一緒にその構成についてまとめたいと思います! Puppeteerをこれから触る方に少しでもお役に立てればと思い…

リモート環境におけるエンジニアの新人研修と新人メンターの話

リモート環境下で行われたフロントエンドエンジニア新人研修について、その内容と振り返りに加えて、エンジニア歴約1年半の自分がメンターとして教育に携わった所感を記したいと思います。

Reactコードレビュー会を行いました。

こんにちは、フロントエンドエンジニアの仲本です。 Wizの新プロジェクトにてフロントエンドをReactを使用して実装しました。 新プロジェクトのフェーズ1が終了とフェーズ2の間で一度リファクタリングを行おうと思い今回コードレビュー会を開きました。 コー…

Webアクセシビリティ検証フレームワーク「acot」を導入してみた。

はじめまして。フロントエンドエンジニアの内田です。 最近福岡では日中30℃を超える気温でぐったりです。アイスがとろけております。 さて突然ですが、この記事をご覧になっている皆様はアクセシビリティについて悩んだ事はありますでしょうか? Wizでは残念…

様々なコミュニケーションについて〜営業部との違い〜

はじめまして!フロントエンドの久保です。 今回は【営業部 → エンジニア】へジョブチェンジした話を実体験に基づいて書いていきたいと思います。 ジョブチェンジの経緯 単刀直入にいうと新型コロナウィルスです。 今、どういう事??と思いましたよね。笑 …

CSS設計について

研修中、特にCSS設計に苦戦した事もあり、CSS設計について知らない方向けにCSS設計の例やWizで使っているCSS設計をまとめてみました。

TestCafe v1.14.0がリリースされました

こんにちは、フロントエンドエンジニアの菅野です。 4月7日にリリースされたv.1.14.0で待望の機能が追加されました! 今回はリリースノートをもとにアップデート内容とそれに伴いTestCafeを実装しているプロジェクトのリファクタリングを行なったので、ご紹…

Next.jsでのDynamic Importの使い所

Next.jsでのDynamic Importの使い所について、私がよく使用する2つの使い方についてまとめてみました。

Next.js Serverless Functions APIを使ってみました

はじめに 皆さんこんにちは、フロントエンドエンジニアのWooです。⚡️ Next.jsの簡単なサーバー内の処理の実装ができたので、Vercelデプロイ基準でNext.jsのServerless Functionsの実装方法を調べてみました。 Serverless Functionsとは? Serverlessを直訳す…

useReducerの活用法について

useReducerは様々な場面で活用でき、可読性・パフォーマンス向上に大いに役立ちます。本記事では、useReducerの基本的な使い方と様々な活用法について説明したいと思います。

イージングでスムーズなアニメーションを作ろう

ド派手なアニメーションからUIのモーションまで、幅広く応用できるイージングについての記事です。

Next.jsのCSR(SPA),SSR,SSG,ISRのまとめ&メリットデメリットについて

はじめまして。最近無性に海外旅行に行きたいと思っているフロントエンドエンジニアの内田です。 Next.jsってページごとに色々なレンダリング方法を柔軟に切り替える事が出来て便利ですよね。 ですが、利用する際にはきちんとそれらレンダリング方法のメリッ…

E2Eテストの取り組みについて

はじめまして、フロントエンドエンジニアの菅野です。 今回は、E2Eテスト自動化の取り組みについてお話ししたいと思います。 E2Eテストとは End to Endを略してE2Eと呼ばれています。 例えば、 CV(コンバージョン)ポイントやログイン機能の動作確認 VRT(…

Gatsby v3リリース 差分ビルド検証

先日、(2021年3月3日) Gatsby v3.0がリリースされました。 Introducing Gatsby 3.0 – Faster in Every Way that Matters いくつかの変更がありますが、特に気になった項目が V3 for Content Editors: Faster build times on any service (あらゆるサービスで…

AOP、Laravelのライブラリ紹介

AOPとは 背景 横断的関心事(Cross Cutting Concerns) 用語 Aspect(アスペクト) Advice(アドバイス) Join Point(ジョインポイント) Point cut(ポイントカット) その他 Laravelのライブラリ 個人的な印象 Laravelの機能との差 Middleware Listener, …

GatsbyJsでWordPressをHeadless CMSとしてサイト構築deployまで試してみました。

はじめに GatsbyJsとは何か GatsbyJs導入install WordPressと連動 GatsbyJs側の処理 config設定 記事一覧ページ 記事テンプレート作成 NetlifyでDeploy Netlifyとは何か デプロイ手順 参考イメージ まとめ はじめに 皆さんこんにちは、フロントエンドエンジ…

第2回LT会を行いました。

第2回LT会レポ JSモジュールバンドラのこれからについて考える メモリーを認識したプログラム PHPのInterfaceの使いどころ TypeScript導入のススメ 第2回LT会レポ 今回のLT会の内容は 発表者: 4名 制限時間: 発表時間 5分 + 質問時間 10分 テーマ: 自由 で行…

Vue3.0における状態管理(Vuex,Provide / inject)

こんにちは、フロントエンドエンジニアの小玉です。 今回は、Vue.jsにおける状態管理についてお話したいと思います。 Vue2.x時代、多くの方はVuexを使用していたのではないでしょうか?Vue2.x、Vue3.xともに公式のドキュメントにおいても、状態管理のセクシ…

Next.js10新機能 next/imageを使ってみた

こんにちは、フロントエンドエンジニアの松尾です。 2020年10月27日にNext.js10がリリースされ、パフォーマンスを改善するための20個を超える新しい機能が追加されました。 nextjs.org 私たちフロントエンドチームでも、プロジェクトにNext.js10を導入してお…

Snowpack 試してみました

皆さんこんにちは、フロントエンドエンジニアの高野です。 皆さんはJSのバンドラーは何を使われていますか? 私たちフロントエンドチームでは主にwebpack、一部browserifyを使用しています。 最近はReactやVueをブイブイ使いビジネスロジックをもつことも多…

【TypeScript】 HTMLElementに関する型推論

こんにちは。フロントエンド の仲本です。 今回はHTML要素に関する型推論について、一般的な型推論からデファルトでは型推論できない場合の対応方法までを紹介いたします。 要素に対する型推論 まずはHTML要素の一般的な型推論を紹介いたします。 <html lang='ja'> <head> <meta charset='utf-8'> <title>sample</title></meta></head></html>…