ミッツ

パンが大好きなbboy(ブレイクダンサー)です。 仕事はフロントエンドエンジニアをして…

ミッツ

パンが大好きなbboy(ブレイクダンサー)です。 仕事はフロントエンドエンジニアをしています。

Vite試してみた

ビルドするのが瞬殺なVite環境を試しにつくってみました。 今回、以下フォルダ構成のものを作成しました。複数ページやテンプレートエンジンに対応できるように試みましたが、うまくいかず一旦断念。。 いずれ挑戦します プロジェクト作成手順①プロジェクト作成に下記コマンド入力(npmの場合) npm init vite@latest ②「プロジェクト名」の入力、「フレームワーク」「テンプレート」の選択 ? Project name: › hello-vite? Select

ミッツ

    • ポートフォリオに導入しているwebpack

      「gulpfile.jsの中身をタスク毎に分割しました！」でwebpackの設定については割愛させていただきましたので、今回はこちらにフォーカスしていきます。(こちらも試行錯誤中ですのであくまでご参考までにどうぞ🙇‍♂️) フォルダ構造 まず、自分がwebpackで行っていることとしては主にJavaScriptファイルのみのバンドルになります。説明のためにJavaScriptファイル名は実際のものと変えています😅 script01.min.jsにバンドル・src/ass

      ミッツ

      • レスポンシブで使うmixin

        自分がレスポンシブで使っているmixinのコードを紹介します。 割り算はDart Sass 2.0.0に対応した書き方にしています。(詳細はこちら) PCでvw指定、SPでvw指定ができるmixin 基本的な計算方法としてはPCとSPともに デザイン上の数値 ÷ デザイン上の横幅サイズ × 100 (単位[vw]) としています。 今回の例ではPCデザイン1400px、SPデザインが375pxで作られている想定でのmixinになります。 @use 'sass:math'

        ミッツ

        • gulpfile.jsの中身をタスク毎に分割しました

          gulpfile.jsの中身をずっとタスク毎に分割できたら、管理しやすいし、かっこいいなぁと思っていて、何度も挑戦しては「あ、無理だ…」っていうのを繰り返していたら、今回タスク毎に分けることに成功したので記事にしてみました。 今回はタスクを分割することにフォーカスしているので、gulpのプラグイン が非推奨のものだったり、あまりよろしくない書き方をしている可能性もありますので、あくまで参考程度にみていただけたらと思います。（まだまだ試行錯誤中ですので…） タスク分割前の状

          ミッツ

        Vite試してみた

        ミッツ

          ちょうど１ヶ月経ちました

          はじめまして、ミッツです！ 昨日でマークアップエンジニア として入社して、ちょうど１ヶ月経ちました。この写真のノートは仕事のメモ帳です。あこがれのWeb業界に潜り込んでの感想として、マジでわからなさの境地です。 まずはここに至るまでの経歴をざっと書こうと思います。 ** 子供〜大学編** 生まれも育ちも埼玉で、性格は今もですが真面目でいい人すぎって周りからよく言われます。あと、子供の頃から興味がわく対象範囲が狭めな気はします。自分が興味のあることに関しては没頭しますが、興

          ミッツ

          ちょうど１ヶ月経ちました

          ミッツ