はじめてのフロントエンド開発環境導入

Transcript

1. はじめてのフロントエンド開発環境導入 Beans College 月イチ勉強会 [2月]
2. コンテンツ Ws イントロダクショ% 4s CLI（コマンドラインインターフェイスT gs npm, node.j" fs パッケージを実行するに s 他の人が構築した開発環境を利用す Ås おまけ
3. ÆÈ イントロダクション フロントエンドの環境構築を一緒にやってみましょう！ 一発でうまくいかない場合もあるかと思いますので、その場合は個別対応します。 アーカイブ視聴の方も、登校日にご質問ください。
4. ÆÈ イントロダクション 何のためのに開発環境を作るのか 他のプログラミング言語では、そもそも「開発環境構築が必須」！ フロントエンドがむしろ特殊。開発環境は「目的」があります。 z 大量の画面を扱うための技術を使いた— z 開発中は単なるCSSやJSではなく便利な記述方式を使いた— z 実際のブラウザで見られる形式に変換してほし— z ブラウザで見られるものと開発中のものが同時に動いていてほし— z 複数人の環境を同じものにして効率化を図りたい
5.  CLI（コマンドラインインターフェイス） CLIって何？ ひとことで言えば、コマンド操作でPCを動かす方法。対義語はGUI。 環境構築のためには必ず使います。基本的な使い方を知っておくとよいです。 w 「 」などの記述があったらそれはコマンドラインの話。$は入力しな“ w 「Visual Studio Code」から使え‘ w 基本的なコマンドは以下のリンクから $ npm install CLI とは何ですか? (コマンドラインインターフェイス) https://aws.amazon.com/jp/what-is/cli/
6.  CLI（コマンドラインインターフェイス） Visual Studio CodeからCLIを使おう 右上の「パネルの切り替え」から、下部にパネルを表示させる
7. È npm, node.js npm, node.jsって何？ フロントエンド開発環境を用意するときに必要な「パッケージ」をインストールするための仕組 みが「npm」。パッケージは「アプリ」だと思ってOK。 npmはnode.jsで作られているので、まずはnode.jsをインストールします。 そもそもnpmからわからない https://zenn.dev/antez/articles/a9d9d12178b7b2
8. È npm, node.js nvm, node.js, npmをインストール node.jsはバージョンがたくさんあって、開発現場によって「v11を使っている」「v14でないと 動かない」なんてことが発生しがち。 プロジェクトごとにバージョンを切り替えたい。そんな目的のためのツールが「nvm」。 「npm」はまた別物だが、npmはnode.jsのインストールと同時にインストールされます。 nvm(Node Version Manager)を使ってNode.jsをインストールする手順 https://qiita.com/ffggss/items/94f1c4c5d311db2ec71a nvm-windows の導入と簡単な操作をやってみた https://qiita.com/akipon0821/items/eaeffe79221cfcd4d258
9. È npm, node.js プロジェクトの初期設定 $ npm init initialization（初期化）をするとpackage.jsonが生成され、そこに情報を記入していきます。 また、npmパッケージを使うときの流れとしては以下のとおりです。 ~… どんな技術・仕様にするのかを決めp x… 何のパッケージが必要なのかを調べp t… 「 」の初期設定をすp s… 必要なパッケージをインストールする $ npm init
10.  パッケージを実行するには npm scripts プロジェクトの初期設定のあと、パッケージをインストールしました。それらのパッケージを動 かすための設定をする必要があり、その技術の一つが「npm scripts」です。 npm scriptsは、package.jsonの中に「scripts」コマンドを記述しておきます。それらを「 」で実行します。 npm run XXXXX npm scripts以外にも、gulp、webpackなどで実行することもあります。
11.  他の人が構築した開発環境を利用する データをダウンロードする 2024-02_開発環境導入 https://drive.google.com/drive/folders/1ZJGD2XzkQOQVPkIh0DQgeKVD-14x_Xyh 実際の現場ではGitリポジトリからCloneします。
 Git運用の場合はnode_modules（とdist）は「.gitignore」で退避します。 フォルダ（ディレクトリ）は、管理しやすい場所に置いておきましょう。 相原の場合は「works」フォルダの中にプロジェクトごとに管理しています。
12.  他の人が構築した開発環境を利用する npmインストール npm i 「readme.md」に利用方法が書いてあるので、まずはそちらを確認します（mdはマークダウン 記法のファイル）
13.  他の人が構築した開発環境を利用する 実行する 「readme.md」の記述に従って、コマンドを実行します。 中断は「 」 ※Mac, Winどちらもコントロール Ctrl (control) + C
14. ÄÂ おまけ 他の開発環境 相原が使ったことがある技術：webpack、Docker、gulp.js
 近い将来に使われるかもしれない技術：Vite, Svelte 「いっぱいあるのでまとめてほしい」はちょっと違う。たとえば「コンビニがたくさんあるから まとめてほしい」だと、１社しかないと特徴なくなってしまって悲しいことと一緒。 ReactやVeu.js, Astro：これらは「開発環境」というより「パッケージのまとまり」。 次のステップとして学んでいくとよいです。
15. ÄÂ おまけ 他の言語の開発環境 WordPress開発環境：Local, Dockerが主流。Vagrant(VCCW), XAMPP, MAMP Ruby on Rails：npmみたいなものが「gem」、package.jsonが「gem.file」 PHP：npmみたいなものが「Composer」
16. アンケートのご協力をお願いいたします！ https://forms.gle/Fa96TqUMJPRGRPLg7