(2020/3/28追記) 続編公開しました😀 『2020年版｜続・Node.js入門！”パスを通す”方法を教えてやんよ｜セイト』 https://youtu.be/lhfNe6xmlLg 開発・人事・YouTubeコンサルなどお仕事のご依頼はこちらへお願いします！ seito@bug-fix.org 🔽セイトのプロフィール 今はLIG Philippines Inc.て会社でVPoEしてます。 親会社のLIG Inc.含め、エンジニア中心としたクリエイティブ職採用では採用戦略〜最終面接を実施してます。 【Twitter】プログラミング／ライフハック系の話を発信してます！ https://twitter.com/seito_horiguchi 【TikTok】ショート役立つ話／あるある話 https://www.tiktok.com/@seito2020 🔽ターミナルにつ

はじめに やっぱりwebpackがわからない（エピソード1）、エピソード2を公開しているのですが、そもそもnpmからわからない、という人もいると思いますので、今回はnpmに関して説明します。 なお、やっぱりwebpackがわからないではViteに関して触れていますが、Node.jsもDenoという新しいランタイム環境が登場しています。ですが、やはりまだ開発現場で使用するには難しいと思いますので、Node.jsを使用するうえでnpmはちゃんと理解しておいた方がいいです。 npmとは npm とはNode.jsのパッケージを管理するシステム、所謂パッケージ管理システムです。アプリケーションを作成する際、便利なパッケージをそのプロジェクトにインストールして、使用することができます。 ところで、パッケージとは一体何なのでしょうか？ パッケージとは システム開発ではモジュール、パッケージ 、ライブラ

ベテランほど知らずに損してるPhotoshopの新常識（4）まだスライスで消耗してるの？「画像アセットの生成」でスライス不要のサクサク切り出し 連載 ベテランほど知らずに損してるPhotoshopの新常識 Web制作で不可欠な画像の切り出し。Photoshopの「画像の切り出しにスライス」は2年前のちょうど今頃に終了、現在は「画像アセットの生成」を使うことでスライス作業から解放されています。 CC→CC 2014→CC 2015とバージョンアップに伴う変更点とともにご紹介します。「画像アセットの生成」をご存じの方は、復習がてら読んでいただければ幸いです。 __ Photoshop体験版 ダウンロード __ サンプルファイルを ダウンロード スライスの問題点 Web制作ではカンプと呼ばれる一枚絵を作成し、そこから必要なパーツを切り出すというワークフローが一般的です。 https://blog

初心者が絶対に覚えるべき「40」のコーディング知識について解説しているnoteです。40のうちいくつかは無料で読めるようにしているので、無料部分だけでも是非読んでみてください！ はじめまして、だい（@dai_webp）と申します。 私について 都内でフリーランスとして、Webデザイン・コーディング・サーバーサイドなどの仕事をしています Web業界歴は6年です（制作会社3年→フリーランス3年） 2冊目のnoteになります。他のnoteもおすすめなので是非チェックしてみてください！ ・・・ 150回購入頂けました！（2022年5月時点） 感想や反響をモーメントにまとめました。購入・ツイートして頂いた方ありがとうございました！ ▼Twitterモーメント https://twitter.com/i/moments/1506453336673103872 いくつかの解説は無料で読めます。その部分だ

webpack（ウェブパック）とはJSファイルをまとめる高機能なモジュールバンドラー。まとめることでウェブページのHTTPリクエストの数を減らしたり、高度なウェブアプリケーションの開発に役立ちます。 連載ではTypeScriptやBabelなどのES2015+の環境構築、ReactなどのJSライブラリの設定方法を網羅。サンプルファイルで詳しく解説します。 webpackの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。検索結果の上位の野良記事を参照にしたら古いバージョンの内容ばかり。解説記事通りにやったのにうまく動かない･･･なんて困った方も多いのではないでしょうか。本記事は常に最新版に対応させているので、安心して読み進めてください。 ※本記事では2023年3月現在のwebpack 5（2020年10月リリース）以上で解説しています。 本記事で解説しているこ

やっぱりwebpackがわからない（エピソード2）、そもそもnpmからわからないを公開しました。 webpackがわからない 最近はViteが注目されだして、実際にとても良いビルドツールです。Vue.jsのEvan Youさんが開発しただけのことはありますね。ネーミングもイカしてます。しかし、だからといって、では開発環境にViteを採用しようと簡単にはできないのが、業務の辛い所です。新しい技術を採用して、「わしが全責任を引き受けるぜよ」というThe 男気！な人はなかなかいません。 したがって、当分はwebpackを使い続けることになるのですが、これが未だによくわからないという人が意外と多いです。フロントエンドプログラミングの初心者に近い人などは、この段階でつまずくことにより、すっかり自信をなくしてしまうこともあります。 ですが一先ず安心してください。webpackを含むこれらフロントエンド

こんにちは、くりちゃんです！ 最近のWebサイトを見ていると、画面遷移が高速でシームレスに遷移するサイトが当たり前のようになってきています。これは非同期遷移と呼ばれる技術で、同一のページ上でHTMLをJavaScriptによって書き換えることで不要なHTTPのリクエストが減り、高速に遷移できことができます。 また非同期遷移を採用することでページ遷移のアニメーションも凝った演出を入れられるので、メリットが多いです。 デメリットとしては、やはり通常の遷移と比べて、HTMLをJavaScriptによって書き換えるので実装難易度が上がること、非同期遷移特有のケアをしないといけない点が出てくるため工数が増える点です。昨今のWeb制作ではNuxt.jsやNext.jsなどのJavaScriptフレームワークの普及によって、非同期遷移を簡単に実現することができます。 しかし、JavaScriptフレーム