Wiz テックブログ

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

フロントエンド

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>…