webpack

webpackの処理の流れ 上記を踏まえた実装例 SCSSを使用する場合 Typescriptを使用する場合 webpackの処理の流れ Webpackは、JavaScriptアプリケーションのためのモジュールバンドラーであり、アプリケーションに必要なすべてのモジュールを取り込み、それらを1つまたは複数のバンドルにまとめます。 一般的なWebpackの処理の流れは以下の通りです：1. エントリーポイントの指定: webpackの最初のステップは、アプリケーションのエントリーポイントを特定することです。 通常、このエントリーポイントは、アプリケーションのメインファイルであり、依存関係のチェーンを…

やりたいこと Reactアプリに追加でライブラリをインストールしようとしたら 依存関係の沼にハマったので、create-react-appコマンドを使わずに Reactの環境構築を行いたい。 実現方法 webpackを用いて環境構築を行う。 webpackは複数のJavaScriptファイルを一つのファイルにまとめて出力するツールである。 プロジェクトの初期化 下記コマンドを実行して初期化&package.jsonを生成する。 npm init -y webpackのインストール 下記3種をインストールを行う。 webpack webpack-cli webpack-dev-server np…

はじめに こんにちは、情報システム部の呉です。 あっという間に、2023年の終わりが近づいてきました。今年はLinkers Sourcing / Marketing (LS/LM)ではシステムの様々な内部改善を行いました。 その一環としてwebpackのパフォーマンスを改善しましたので、今回は共有させて頂きたいと思います。 問題の発覚 きっかけは今年行ったCoffeeScriptの撤廃作業でした。撤廃作業はあくまで内部改善なので、並行している他の開発タスクと競合しないように、ファイルもしくは機能毎に分割し、サイドミッションの形で段階的に進めていました。 作業はほぼ問題なくスムーズにできていまし…

こんにちは、みんなのマーケットでエンジニアをしているきたがわです。 今回はくらしのマーケット内で読み込まれるバンドルファイルを軽量化した話について紹介いたします。 ぜひご覧ください！ 発表資料 speakerdeck.com

はじめまして。今月から株式会社ヘンリーのフロントエンドエンジニアをしている kobayang です。この記事では Storybook を React や Vue などの UI ライブラリを使っていないプロジェクトでも活用できるかも、という話をしていこうと思います。 Storybook storybook.js.org もはや説明不要な気がしますが、Storybook は UI を実装する上で便利な、UI プレビューのためのライブラリです。また、プレビューだけでなく、Jest から Story を呼び出すことで簡単にテストが書けたり、Chromatic と連携することで、VRT ができるようにな…

angular16にアップデートしたら@angular-builders/custom-webpackに互換性がなくなり困り果てていました しかし、ついにベータ版ですが@angular-builders/custom-webpack@16.0.0がリリースされましたね！ 早速アップデート npm install --save-dev @angular-builders/custom-webpack@16.0.0-beta.0 angular.jsonまたはproject.jsonを書き換えましょう ‘‘‘ts "build": { "executor": "@angular-builders/…

フロントエンドのバンドルとは モジュールバンドラーとは？ トランスパイルとは？ Typescriptをトランスパイルする場合の例 フロントエンドのバンドルとは フロントエンドのバンドルとは、プロジェクト内にある複数のJavaScriptファイルやCSSファイルを1つのファイルにまとめることを指します。 これにより、Webページのロード時間を短縮することができ、ユーザー体験を向上させることができます。 また、読み込むファイルを1つにすることで、読み込み処理の記述の煩雑さを防ぐことができます。バンドルは、通常、モジュールバンドラー(後述)と呼ばれる特殊なソフトウェアを使用して作成されます。 モジュ…

こんにちは、iimonの検索チームでフロントエンドエンジニアを担当している保田です。今回は、ReactにStorybookを導入して、インタラクションテストを試してみたことを記事にしました。 Storybookとは？ Storybookは、UIコンポーネントのカタログ作成・テストなどができるツールです。 デザイン確認やユーザーインタラクションのテストが簡単に行えます。 主にReact、Vue、Angularなどのフレームワークで使用されることが多いです。 導入することのメリット・デメリット メリット すでに作成済みであるコンポーネントなどが分かりやすくなる コンポーネントの状態確認がしやすい …

こちらの記事でまとめたように、 kintone のアプリに対してカスタマイズファイルをアップロードできます。 ですが、自分の場合だと、普段は Live Server 設定で VSCode 上でデバッグして、ある程度開発が終わったら、一度カスタマイズファイルとしてアップロードして、動作確認＆本番環境への反映、となるので、カスタマイズファイルアップロード後に不具合があると Live Server 設定で再度デバッグ等を行うことになります。 ということで、複数アプリのカスタマイズファイル設定を Live Server を使う設定に戻すための js を作ってみました。 という記事だったんですが、最終的…

kintone のカスタマイズファイルを設定するとき、いちいちアプリの設定画面からファイルを指定するのって面倒です。さすがにこれについては、 kintone がカスタマイズ用の js ファイルをアップロードするためのツールが提供してくれています。 customize-uploader - cybozu developer network なので、これを使って簡単にアップロードしてみます。 設定 まずは、設定します。 PS D:\work\tmp\kintone_tutorial\revert_live_server> npm install --save-dev @kintone/custom…

Laravelを使い始めたばかりでほぼ何もわかっていないが、Laravel公式オンラインドキュメントでいくつか便利パッケージが紹介されていた（下図）ので、概要を理解するために表にまとめた。 Laravel公式で紹介されているパッケージ 以下の表にまとめた。カテゴリは、おおよそ近いもの同士でグルーピングするために自分で適当につけた。 パッケージ カテゴリ 概要 Breeze キット Laravelのすべての認証機能について最小限の実装を提供するスターターキット Cashier (Stripe) 決済 決済インフラサービスであるStripeとのインターフェースを提供する Cashier (Padd…

List of 10+ Best JavaScript Sliders 2024 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 ウェブサイトにインタラクティブなスライダーを追加するJavaScriptカルーセルスライダーライブラリをお探しですか？この記事では、ウェブページのユーザーエクスペリエンスを向上させるのに役立つ最高のJavaScriptスライダーをいくつか紹介します。 スライダーは、ウェブデザイナーや開発者にとって最も議論の的となるデザイン要素の1つです。一部のデザイナーや開発者はウェブサイトにスライダーを追加することを好みますが、…

2024/9/18 https://layerx.connpass.com/event/328945/ Next.js のページ遷移を全力で止める yprestoさん https://speakerdeck.com/ypresto/hack-to-prevent-page-navigation-in-next-js 「保存されません」ダイアログ 変更の保存漏れを防ぐUI 勝手に保存するパターン ダイアログで確認するパターン 戻る/進むでもちゃんと出す Nextでやるのは大変 Navigation Guardというライブラリを作った ページを止めるハック ページ遷移 リロードやリンクによる遷移 …

はじめに 挫折 Vue 3 への移行の手順 Vue 2.6.12 から 2.7.16 にアップグレード 依存関係 主な修正箇所 @vue/composition-api の削除 from '@vue/composition-api' を from 'vue' に変更 root.$route を root.proxy.$route に変更 root の型定義を SetupContext['root'] から Vue に変更 補足など vue-cli から vite に移行 依存関係 主な修正箇所 コマンドの変更 環境変数の修正 babel.config.js の修正 jest.config.js…

Create React App で React の環境構築を行う方法という記事を書いたので、今回は Create React App を使わずに一から環境構築を行う方法についてまとめました。 この記事は以下の構成になっています。 必要なパッケージ・ツール 完成系のディレクトリとファイルの構造 環境構築の流れ 必要なパッケージ・ツール 必要なパッケージ・ツールは以下の通り。 Node.js npm か yarn react react-dom webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/prese…

Web アプリの設計手法である MPA と SPA についてと、 Rails ・ React での SPA の簡単な実装をまとめました。 理解すべきことは以下です。 MPA と SPA それぞれの特徴 MPA と SPA それぞれの構造 MPA と SPA それぞれを実装するために必要な技術 MPA と SPA の違い MPA と SPA それぞれのメリット・デメリット MPA と SPA の特徴 MPA（Multi-Page Application：マルチページアプリケーション） MPA は、従来の複数の HTML ページで構成される Web アプリケーションのこと。 MPA ではページ間を…

厳しい暑さが和らぎ秋の気配が感じられる季節になりました。まだまだ真夏日を記録する日もありますので、体調管理には十分気をつけてください。 今月のDevOpsニュースでは、生成AIをはじめとする最新技術の動向や、クラウドサービスの新機能などをお届けします。 今月も8月のDevOpsニュースをお届けします。 開発環境 AIアシスタント Postgres.now Puppeteer Rspack 実行環境 containerd 2.0 生成AI Google Workspaceに生成AI CI/CD AWS CodeBuildがiPadOSやmacOSアプリなどのビルドに対応しました。 技術トレンド …

こんにちは。エンジニアの佐藤(@t0m0h1r0x)です。 今回は、弊社で現在進めているEmotionからCSS Modulesへの移行について紹介します。 移行の背景、検討した代替ライブラリ、そして最終的な決定について話していきます。 移行の検討理由 代替ライブラリの検討 Panda CSS Pigment CSS CSS Modulesへの移行 今後の展望 まとめ 移行の検討理由 弊社では現在、CSS-in-JSライブラリとしてEmotionを使用しています。ピュアなCSS記法を好むメンバーが多いので、EmotionのTagged Template Literal記法がチーム文化との相性も…

Reactの上達へのきっかけを掴んだ8月の学習の振り返りをしたいと思います。 8月の学習時間 結果：96.25時間 半年合計：705.25時間 HCに入って半年、本当に自分の時間のすべてを使って勉強して半年で700時間を達成できました。 もともとの目標が600時間だったため（年間1200時間ペース） 半年で700時間（年間1400時間ペース）はかなり上出来だと思っています。 しかしながら、まだロードマップは半分も進んでいません。やはりHCのロードマップは難しく 最新の技術を学ぶことは並大抵のことではないと感じています。 どうしても自分のポートフォリオをモダンな技術を使ってフルスタックで作成した…