開発環境・インフラ

開発環境・インフラ

npmキャッシュ削除で解決!インストール失敗を防ぎ開発をスムーズに進める方法【完全解説】

npmキャッシュクリアの完全ガイド。開発現場でよく遭遇するキャッシュ由来のエラーとその解決法を徹底解説します。基本的な「npm cache clean --force」の使い方から、環境別(Windows/Mac/Linux)のキャッシュクリア手順、クリア後の適切な対応まで。さらにpnpm・Yarn対応、Docker・CI/CD環境でのベストプラクティスも網羅。パッケージ管理の謎のエラーに悩むNode.js開発者必見の内容です。キャッシュクリアで開発効率を向上させましょう。
開発環境・インフラ

【初心者OK】npm audit fixとは?エラーの意味・–forceの使い方・解決しないときの対処法まで徹底解説

npm audit fixの基本から応用までを丁寧に解説する完全ガイド。脆弱性チェックの仕組みや自動修正の方法、--forceによる強制更新のリスク、よくあるエラーとその対処法を具体例付きで紹介します。さらにYarnユーザー向けの代替手段や、パッケージ更新前後の影響確認方法等も詳しく解説しています。
開発環境・インフラ

npmのバージョン確認・更新のすべて|Node環境お困り解決

npm -v でバージョン確認する基本から、エラー解決、アップデート、package.json での環境統一まで実務ガイド。
開発環境・インフラ

サイトのIPアドレスの調べ方|nslookup・dig・Webツール

ドメインから IP アドレスを調べる方法。Windows は nslookup、Mac / Linux は dig の使い方、コマンドを使わない Web ツール、CDN 経由で実IPが見えない場合の注意点。
開発環境・インフラ

意外と簡単!WSL2にCentos9Streamをインストールする方法

はじめに最近CentOS9Streamを操作する必要が発生しましたがいきなり本番系で操作するのも不安なのでまずWSLにインストールして試してみようと思いました。ただUbuntuはMicrosoftStoreでボタン一つで簡単にインストールできるのに対してCentOSはMicrosoft Storeにありません…。ネット...
開発環境・インフラ

レスポンシブフォントサイズをstylusで関数化。サンプルコードはこちら

はじめにレスポンシブのサイトを作る際にフォントサイズの指定はどのようにしているでしょうか?この記事ではメディアクエリを使用せず画面幅に合わせたフォントサイズを指定するコードを紹介します。CSSではなくnode製altcssのstylusのコードになります。各要素に気軽に設定できるようにmixinになっています。styl...
開発環境・インフラ

スタイルガイドジェネレーターfractalでHandlebarsではなくNunjucksを使用する方法

はじめにサイトやWEBアプリなどの見やすいスタイルガイドを作成できるジェネレーターのひとつに「Fractal」というツールがあります。FractalFractalは何も指定しなければテンプレートエンジンに「Handlebars」を使用しますが設定次第でそれを「nunjucks」に変更することができます。今回はFract...
開発環境・インフラ

npm-scriptsでprettierが動かない!バージョンを変えると直ると思っていたら実はgitignoreが関係したという話

はじめにnpmを使用してサイト制作をする際にコード自動整形ツール「prettier」を使用しています。prettierのバージョンが3にあがってから自動整形されなくなってしまいました。バージョンのバグかと思っていましたがただの設定ミスだったというお話です。prettierをどう入れていたかnpm i -D pretti...
開発環境・インフラ

browserslistはpackage.jsonに書くか.browseslistrcに書くか

browserslistとは何か名前のとおりターゲットブラウザを設定できるツールで色々なNodeのツールで使用できます。例えばautoprefixerやbabel、postcss-preset-envなどはbrowserslistを解析してそこで設定されているブラウザを対象にした処理を行うようになっています。2022年...
開発環境・インフラ

Stylelintを利用してコードを自動整形する方法

cssを分析して間違いを指摘してくれるツールStylelint。これを使えば複数人でコードを共有していても自動的に同じ作法で書かれたコードを作ることができます。一度その仕組みを組んでしまえばあとは楽で便利ですが、導入部分が少し複雑なのでnpm-scriptsでStylelintを稼働して作法がバラバラなCSSファイルを...
開発環境・インフラ

PostCSSで入れ子を実現できるプラグイン「postcss-nesting」使用時に起きる問題と解決法

cssのポストプロセッサPostCSSは使用したい機能だけを利用してcssを加工するツールです。非常にたくさんのプラグインが存在しその種類によってはSASSの機能を再現することが可能です。SASSでは非常に使用頻度が高い入れ子表記を実現可能にするプラグインpostcss-nestingを使用時にちょっと気になる問題があ...
開発環境・インフラ

jsonファイルを利用してデータとテンプレートを分ける – npm + nunjucks + stylus で静的サイト制作を効率的にする(6)

テンプレートエンジンnunjucksの利用環境構築を紹介してきましたがテンプレートエンジンの何が便利かというと次のようなことです。ヘッダーやフッターなどのページに共通な部分を一か所にまとめることができるリストのような同じ構造の大量のコードを一か所にまとめることができる今回は2の詳細を紹介します。具体的にはjsonファイ...
開発環境・インフラ

StylusでヘルパーCSSを作成する際に便利な関数、mixin(メディアクエリ編)

sassではよくメディアクエリを設定しやすくするためmixinを使用しますがstylusでも同様にメディアクエリ用のmixinを作成すると効率が各段によくなります。今回はメディアクエリ用のmixinをstylusでどう作るか紹介します。実際に追加するコードmq(num) breakpoints = { sm: 576,...
開発環境・インフラ

webpackにbabelを導入する – npm + nunjucks + stylus で静的サイト制作を効率的にする(5)

webpackを使用してjsファイルを集束(バンドル)することができましたがJavascriptは様々な規格があるので環境によって動かない場合があります。そうならない為にひと手間加えてより確実に用意したjsコードが実行されるようにします。今までの流れは下記記事に書いてあります。npm + Nunjucks + Styl...
開発環境・インフラ

StylusでヘルパーCSSを作成する際に便利な関数、mixin(margin、padding編)

node.js製のCSSプリプロセッサstylusは変数を使用でき、またmixinという決まった処理を自動的に展開させることができる機能があるのでヘルパースタイルを効率的に作成することができます。先発のCSSプリプロセッサsassでも同様のことができますがsassの記述をそのまま持ってきても当然動かないのでstylus...
開発環境・インフラ

webpackを使用してjavascriptを集束(バンドル)する – npm + nunjucks + stylus で静的サイト制作を効率的にする(4)

前回までで次のようなことをやってきました。nunjucks でhtml生成stylus でcss生成imagemin で画像圧縮javascriptはそのままコピーして使用する想定でしたが使用量が増えてしまった時のためにwebpackを使用してバンドルする流れも残しておきます。今回はjavascriptを対象にしますが...
開発環境・インフラ

画像をコピーもしくは圧縮する – npm + nunjucks + stylus で静的サイト制作を効率的にする(3)

npm + Nunjucks + stylusを使用してフォルダの変更を監視してhtml,css,jsを再生成、browserSyncを利用してブラウザを自動リロードして確認しやすいようにしました。ただ画像ファイルの処理がないのでその処理を追加していきます。画像ファイル処理については大体2つのルートを考えます。画像は画...
開発環境・インフラ

ファイル更新を感知し更新確認を簡単にする – npm + nunjucks + stylus で静的サイト制作を効率的にする(2)

npm + Nunjucks + stylusで構成される開発環境作成手順の続きです。前回、buildコマンドでhtml,css,jsファイルをdistフォルダに吐き出す所まで行きました。今回はファイル更新を感知して自動更新されるように設定します。watchコマンドを設定する前回同様package.jsonのscrip...
開発環境・インフラ

npm + Nunjucks + Stylus で静的サイト制作を効率的にする

静的サイト制作時におすすめのタスク自動化ツール構成 npm+Nunjucks+Stylus を紹介します。各ツールの簡単な紹介Node.jsのパッケージマネージャー。Node.jsをインストールすると自動的にインストールされる。javascripで使用するテンプレートエンジン。Mozillaが開発している。Node.j...