Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
はじめてのフロントエンド開発環境導入
Search
Aihara Noriyoshi
March 01, 2024
Programming
0
520
はじめてのフロントエンド開発環境導入
Aihara Noriyoshi
March 01, 2024
Tweet
Share
More Decks by Aihara Noriyoshi
See All by Aihara Noriyoshi
JavaScriptの「知らない」が少し減る会
nori44
0
160
コーディングのお供 Google Chrome 開発者ツールを使いこなそう!
nori44
0
560
macOS / Windows パソコン作業効率化を考えよう!
nori44
0
190
Other Decks in Programming
See All in Programming
AWS Lambdaから始まった Serverlessの「熱」とキャリアパス / It started with AWS Lambda Serverless “fever” and career path
seike460
PRO
1
260
Amazon Qを使ってIaCを触ろう!
maruto
0
420
subpath importsで始めるモック生活
10tera
0
330
初めてDefinitelyTypedにPRを出した話
syumai
0
430
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
260
Quine, Polyglot, 良いコード
qnighy
4
650
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
480
リアーキテクチャxDDD 1年間の取り組みと進化
hsawaji
1
220
見せてあげますよ、「本物のLaravel批判」ってやつを。
77web
7
7.8k
Creating a Free Video Ad Network on the Edge
mizoguchicoji
0
120
Hotwire or React? ~アフタートーク・本編に含めなかった話~ / Hotwire or React? after talk
harunatsujita
1
120
Jakarta EE meets AI
ivargrimstad
0
330
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
65
4.4k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
A Tale of Four Properties
chriscoyier
156
23k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
506
140k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Practical Orchestrator
shlominoach
186
10k
Designing Experiences People Love
moore
138
23k
Building Adaptive Systems
keathley
38
2.3k
Transcript
はじめてのフロントエンド開発環境導入 Beans College 月イチ勉強会 [2月]
コンテンツ Ws イントロダクショ% 4s CLI(コマンドラインインターフェイスT gs npm, node.j" fs パッケージを実行するに
s 他の人が構築した開発環境を利用す Ås おまけ
ÆÈ イントロダクション フロントエンドの環境構築を一緒にやってみましょう! 一発でうまくいかない場合もあるかと思いますので、その場合は個別対応します。 アーカイブ視聴の方も、登校日にご質問ください。
ÆÈ イントロダクション 何のためのに開発環境を作るのか 他のプログラミング言語では、そもそも「開発環境構築が必須」! フロントエンドがむしろ特殊。開発環境は「目的」があります。 z 大量の画面を扱うための技術を使いた z 開発中は単なるCSSやJSではなく便利な記述方式を使いた z
実際のブラウザで見られる形式に変換してほし z ブラウザで見られるものと開発中のものが同時に動いていてほし z 複数人の環境を同じものにして効率化を図りたい
CLI(コマンドラインインターフェイス) CLIって何? ひとことで言えば、コマンド操作でPCを動かす方法。対義語はGUI。 環境構築のためには必ず使います。基本的な使い方を知っておくとよいです。 w 「 」などの記述があったらそれはコマンドラインの話。$は入力しな w 「Visual
Studio Code」から使え w 基本的なコマンドは以下のリンクから $ npm install CLI とは何ですか? (コマンドラインインターフェイス) https://aws.amazon.com/jp/what-is/cli/
CLI(コマンドラインインターフェイス) Visual Studio CodeからCLIを使おう 右上の「パネルの切り替え」から、下部にパネルを表示させる
È npm, node.js npm, node.jsって何? フロントエンド開発環境を用意するときに必要な「パッケージ」をインストールするための仕組 みが「npm」。パッケージは「アプリ」だと思ってOK。 npmはnode.jsで作られているので、まずはnode.jsをインストールします。 そもそもnpmからわからない https://zenn.dev/antez/articles/a9d9d12178b7b2
È 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
È npm, node.js プロジェクトの初期設定 $ npm init initialization(初期化)をするとpackage.jsonが生成され、そこに情報を記入していきます。 また、npmパッケージを使うときの流れとしては以下のとおりです。 ~
どんな技術・仕様にするのかを決めp x 何のパッケージが必要なのかを調べp t 「 」の初期設定をすp s 必要なパッケージをインストールする $ npm init
パッケージを実行するには npm scripts プロジェクトの初期設定のあと、パッケージをインストールしました。それらのパッケージを動 かすための設定をする必要があり、その技術の一つが「npm scripts」です。 npm scriptsは、package.jsonの中に「scripts」コマンドを記述しておきます。それらを「 」で実行します。
npm run XXXXX npm scripts以外にも、gulp、webpackなどで実行することもあります。
他の人が構築した開発環境を利用する データをダウンロードする 2024-02_開発環境導入 https://drive.google.com/drive/folders/1ZJGD2XzkQOQVPkIh0DQgeKVD-14x_Xyh 実際の現場ではGitリポジトリからCloneします。 Git運用の場合はnode_modules(とdist)は「.gitignore」で退避します。 フォルダ(ディレクトリ)は、管理しやすい場所に置いておきましょう。 相原の場合は「works」フォルダの中にプロジェクトごとに管理しています。
他の人が構築した開発環境を利用する npmインストール npm i 「readme.md」に利用方法が書いてあるので、まずはそちらを確認します(mdはマークダウン 記法のファイル)
他の人が構築した開発環境を利用する 実行する 「readme.md」の記述に従って、コマンドを実行します。 中断は「 」 ※Mac, Winどちらもコントロール Ctrl (control)
+ C
ÄÂ おまけ 他の開発環境 相原が使ったことがある技術:webpack、Docker、gulp.js 近い将来に使われるかもしれない技術:Vite, Svelte 「いっぱいあるのでまとめてほしい」はちょっと違う。たとえば「コンビニがたくさんあるから まとめてほしい」だと、1社しかないと特徴なくなってしまって悲しいことと一緒。 ReactやVeu.js, Astro:これらは「開発環境」というより「パッケージのまとまり」。
次のステップとして学んでいくとよいです。
ÄÂ おまけ 他の言語の開発環境 WordPress開発環境:Local, Dockerが主流。Vagrant(VCCW), XAMPP, MAMP Ruby on Rails:npmみたいなものが「gem」、package.jsonが「gem.file」
PHP:npmみたいなものが「Composer」
アンケートのご協力をお願いいたします! https://forms.gle/Fa96TqUMJPRGRPLg7