JavaScriptとSCSSそれぞれを別ファイルにコンパイルする方法(Windows)

JavaScriptとSCSSそれぞれを別ファイルにコンパイルする方法(Windows)

Html、JavaScriptとSCSSを使ってWebサイト制作を行っている人へ

webpackでjsをバンドルするとき、SCSS(CSS)も一緒に挿入される設定をしてることが多いのではないかな?

私の場合、一緒にせず、JSはJSのみでファイルにバンドル、SCSSはCSSファイルにして別ファイルに書き出して運用することが多いです。

私と同じようにJSファイルとCSSファイルを分けて運用しようと思っているが、どうするの?
と思ってこのページにたどり着いた人は是非下記の内容をご活用ください。

私の備忘録としてブログに残しておきます。

JSの設定→SCSSの設定、の順に進めていきます。

今回はWindows11で解説してます。またnpmコマンドで進めていますので、yarnコマンドご使用の場合は置き換えてください。(2022年7月現在)

Node.jsがインストール済みが前提です

まだの人は先にNode.jsをインストールください
hidemitsu.com/blog/418.html

まずは、制作用のフォルダを作成します

JS環境を作成

VSCodeエディターのターミナルで進めていきます

先ほど作成したフォルダ(js-basic)に移動します

package.jsonを作成

npmのパッケージ情報を記述するpackage.jsonファイルが作成されます

関連パッケージのインストール



webpack:webpack 本体。複数のファイルを一つにバンドルする
webpack-cli:webpack のコマンドラインツール
webpack-dev-server:開発用のwebサーバー

srcフォルダとJSファイル2つ作成

フォルダ作成:js-basic > src

ファイル1作成:js-basic > src > index.js

ファイル2作成:js-basic > src > world.js


ソースコードは下記からコピってください↓

webpack.config.jsを作成する

package.jsonのscriptsで囲まれた部分を修正する

mode development:コードの圧縮行わない、–mode production:コードの圧縮行う

JSの環境設定は完了です

とりあえず、お疲れ様です(^^)

コンパイルを実行します

下記にバンドルされたbuild.jsが作成されていたら、とりあえずは成功です。

フォルダ作成:js-basic > dist

ファイル1作成:js-basic > dist > build.js

つづいてhtmlファイルを作成します

最低限のコードで作成!

ファイル作成:js-basic > dist > index.html

ここではローカルサーバーを立ち上げる

JSの修正が即ページに反映されます。

JSのみの設定はここで完了です

お疲れ様でした。(^^)

SCSS(CSS)環境を作成

ここからが、知りたいところですよね。
進めますね。

srcフォルダ配下にSCSSファイルを作成

フォルダ作成:js-basic > scss

ファイル作成:js-basic > scss > index.scss


↓分かりやすいようにbodyの色を変数を使って赤にするだけのコードです。

Babel関連パッケージのインストール(ES5への変換が必要ない場合はここは不要)

IEが廃止となったためここは不要


SCSSローダーをインストール


CSSを別ファイルとして書き出すプラグインをインストール



「dependencies」セッションに「”mini-css-extract-plugin”: “^X.X.X”,」が追加されます
※Nodeバージョンによって、「X」の値は変更されます

webpack.config.jsをSCSSに対応(下記ですべてを上書き)


「dist/js/bundle.js」、「dist/css/style.css」としたい場合は下記2か所を修正

index.jsをSCSSに対応(下記ですべてを上書き)


index.htmlをCSSに対応(下記ですべてを上書き)



JS+SCSSの環境設定は完了です

お疲れ様でした(^^)

コンパイルを実行します


ローカルサーバーを立ち上げる

JS、SCSSの修正が即ページに反映されます。

これで完了です

お疲れ様でした。(^^)

補足

ファイルを共有する場合、「node_modules」は共有せず、個人で「npm i」コマンドでインストールする↓

最後に

今回は、webpackでjsとSCSS(CSS)を別ファイルにそれぞれ出力する方法を記載しました。
webpackは、なかなか設定が複雑で、技術もすぐに新しくなるので、検索して、出てきた記事でそのまま設定しても動作しいないということも、まれにあります。
まずは、一つずつ確実に設定をしていきましょう。

今回のファイル一式をGitHubにアップしておきましたので、初期ファイルとしてご活用ください。
https://github.com/hideT-web/webpack_study.git

最後まで、ご覧いただきありがとうございました。
それでは、またね(^^)/

TypeScript環境設定(windows)

TypeScript環境設定(windows)

今回は、TypeScript環境構築について記載していきます。是非覗いていってください(^^)v

Windows11+VSCodeエディターを使ってTypeScript環境を構築しました。
※コードを書くのもVSCodeエディターを使っています。

私自身が次回設定する際のメモとして、記載した内容なので、私が分かればというゆる~い内容です。

もし、分かりにくかったら、ほかの人もTypeScriptの環境設定記事は公開してますので、
そちらで、お願いします。

早速始めます(^^)v

まずはNodeインストールします

こちらの記事公開時の推奨版の最新は「16.15.0」です。インストールのタイミングでのバージョンをご使用ください。
※推奨版=安定稼働版ということになりますのでおすすめです。

Node.js推奨版を①ダウンロード後、②インストールします

インストーラを起動すると下記が表示されますので「Next」ボタンをクリックします

以下、順にインストールを進めます









「Install」ボタンをクリックします




下記が表示されたらインストールは無事に完了です。

コマンドプロンプトで確認してみましょう。

Nodeのバージョンを確認します。

ついでにNPMのバージョンも確認します。


Nodeバージョン:16.15.0
npmバージョン:8.5.5
※バージョンは定期的に更新されますので、インストール時点での最新(推奨版)で進めてください

つづいて、TypeScript本体をPCにインストールする

コマンドプロンプトからTypeScriptをインストールします

コマンドプロンプトでTypeScriptのバージョンを確認してみましょう。


バージョン:4.6.4と表示されました。正常にインストールが完了しています。

それでは、プロジェクト環境にTypeScriptを設定する(新プロジェクト最初に行う)

ここからはVSCode(Visual Studio Code)を使って設定を進めます

ご自身が開発でお使いのフォルダを開いてください

ここでは、「MyProjects」フォルダで作業を進めます。

「MyProjects」フォルダの直下に「ts-basic」フォルダを作成します



つづいて、ターミナルを開きます

「MyProjects」フォルダから作業フォルダ(ここでは「ts-basic」)に移動します。

フォルダ移動(例)
「cd ts-basic」もしくは「cd D:\Web制作\MyProjects\ts-basic」

初期化を行います。

↓npmのパッケージ情報を記述するpackage.jsonというファイルが作成されました

関連パッケージのインストール

typescript … typescriptからJavascriptに変換するためのもの
ts-loader … webpack 経由で .ts ファイルをトランスパイルする
webpack … webpack 本体。複数のファイルを一つにバンドルする
webpack-cli … webpack のコマンドラインツール
webpack-dev-server … 開発用のwebサーバー

↓node_module一式とpackage-lock.jsonが作成されました

webpackの設定ファイルを作成します。

「webpack.config.js」という名称でファイルを作成します。


package.jsonを環境に合わせた設定を行う

※先ほどインストールした関連パッケージも追加されていますね

mode development:コードの圧縮行わない、–mode production:コードの圧縮行う

TypeScript設定ファイルを作成します。


↓「tsconfig.json」という名称でファイルを作成されます。

ここまでで、開発環境の作成は完了です。

おつかれさまでした。

最後に

WindowsでTypeScriptの開発環境作成と最低限の設定を完了しました。
私自身のメモとして書き留めたため、分かりにくい記述等があったかも知れませんが、他のサイトを検索するなどして解決お願いします。

一応、TypeScriptの開発構築が完了したということで、
「Hello World」をブラウザに表示するような簡単なスクリプトを作って動作を確認してみてください。

下記が、「スクリプトとブラウザ表示を連動させるコマンド」と「ビルドして、実際のJSファイルを作成する」コマンドです。
npm start
npm run build

最後までご覧いただきありがとうございます。それでは、またね(^^)/

MacでWindowsの共有フォルダを使用

MacでWindowsの共有フォルダを使用

Macbook AirとWindowsでフォルダを共有して使おう!!

今回は、WindowsPCにフォルダを作って、そこをMacPCからでもファイルを保存したり、取り出したりできるようにしようね!ってことです。

設定は簡単!!

MacbookとWindowsが同じLANに存在しているという前提で進めます。

※自宅内のWi-fiに接続している、もしくは会社内の同じLANで接続しているPC同士ということです。

Windowsの作業

Windows11を使用しての解説です。

ここからは、管理者権限(administrator)を持っているユーザでログインしている作業を行う必要があります。

1.エクスプローラーから共有フォルダを作成します

D:ドライブの直下に「wm-dir」というフォルダを作成します。
MacとWindowsでフォルダ共有

ここでは、「Dドライブ」を使用していますが、「Cドライブ」でも問題ございません。
フォルダ名もお好みの名称で作成ください。

便宜上、D:ドライブの直下に「wm-dir」で解説を進めますので、変更された場合は、置き換えて読み進めてください。

2.「wm-dir」フォルダを共有フォルダに設定します

「wm-dir」フォルダ上で、右クリックしてプロパティを選択します。

プロパティが開いたら「共有(S)」ボタンをクリックします。

Windowsフォルダ共有設定

① 「共有」タブを開く
② 「共有(S)」ボタンをクリック

ネットワークアクセス(下記)が開くのでユーザ追加+権限設定を行います。

共有設定 ネットワークアクセス
①共有を許可する相手を選ぶ
すでに自分のアカウントはアクセスを許可されています。
もし、すべてのアカウントにアクセス許可を与える場合は「Everyone」を選びます(セキュリティー的にはヤメた方が良い)。
②アカウントにアクセス許可を与える
「読み取りだけ」を可能にするか、「読み取りも書き込みも」できるようにするかを選択します。
③「共有」ボタンをクリックする。

ネットワークの検索とファイル共有(下記)が開いたら「いいえ・・・」を選択します。

ネットワークの検索とファイル共有

※注意:必ず「いいえ・・・」を選択くださいね。「はい」を選択すると、全世界からアクセスされる危険があります。

「wm-dir」フォルダが共有になりました。

フォルダ共有

①設定が有効になったので「終了」ボタンをクリックする

3.Macでの確認用に「wm-dir」フォルダにテキストファイルを保存しておきます

Macbookから共有フォルダ確認用

ファイル名はお好みでOKです。
ここでは「test.txt」として保存しておきます。

4.MacからWindowsの「wm-dir」フォルダに接続するため、IPアドレス(プライベート)を確認します

スタートボタンからコマンドプロンプトを開く

コマンドプロンプトに命令を打ち込む

①「ipconfig」と打って、Enterキーを押下

②「IPv4アドレス」と記載されている「192.168.XX.XX」をメモする

5.Windowsの作業終了

おつかれさまでした。

Macbookの作業

M1 MacBook Air(2020)を使用しての解説です。

ここからは、設定というより、Windowsの「wm-dir」フォルダに接続する手順という認識の方が正しいですね(笑)。

1.FinderをDock(ドック)から開きます

Finderアイコン

2.上メニューから「移動」→「サーバへ接続」を選択します。

3.「サーバへ接続」ダイアログが開きますWindowsへの接続情報を入力します。


①「smb://」を前につけて、先程メモしておいたWindowsのIPアドレス(プライベート)を入力する
※ smb://192.168.○.○

②「接続」ボタンをクリックする

4.「ログイン」ダイアログが開きますWindowsのユーザ情報を入力します。


①Windowsで共有情報を設定した「ユーザ名」と「パスワード」を入力する

②「接続」ボタンをクリックする

5.「マウントする・・・」ダイアログ(下記)が開きますので共有フォルダを選択します。


①Windowsで設定した共有フォルダ名「wm-dir」が表示されるので選択する。

②「OK」ボタンを選択する。

6.Windowsで設定した共有フォルダに接続完了


①Windows側で保存したテキストファイルが確認できました。

7.Macから共有フォルダに画像を保存します

Macbookから共有フォルダに保存

8.Windowsから共有フォルダの画像を確認できました。


※Macbookから保存した場合、隠しファイル的な不要ファイルが別途追加されるがそこはスルーでお願いします。

まとめ

MacbookとWindowsを両方使用している場合、自宅内で同じWi-Fi(LAN)を使用して相互にファイルのやり取りが可能になりました。

WindowsからMacbookに乗り換えた場合は、動画や画像の編集ソフトが片方のPCにあって、データをいちいちスティックメモリーを使用して移動させるなど、煩わしいです。実は私がその状態でした。同じような煩わしさを抱えている方がいらっしゃるのではないかと思い、備忘録として記事にしてみました?手順書かな?(笑)

もちろん、WindowsからMacbookだけでなく、ipadなどでも共有ができるので、是非、私と同じ煩わしさを感じている場合は、設定してもらえると幸いです。

たとえ、1人の方にでも良かったと思ってもらえると、私は、今回の記事を書いて良かったと思えます。

では、またどこかで・・・