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
650
はじめてのフロントエンド開発環境導入
Aihara Noriyoshi
March 01, 2024
Tweet
Share
More Decks by Aihara Noriyoshi
See All by Aihara Noriyoshi
Webページ表示高速化 入門
nori44
0
2
JavaScriptの「知らない」が少し減る会
nori44
0
170
コーディングのお供 Google Chrome 開発者ツールを使いこなそう!
nori44
0
670
macOS / Windows パソコン作業効率化を考えよう!
nori44
0
200
Other Decks in Programming
See All in Programming
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
270
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
240
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
730
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
1
170
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
180
『品質』という言葉が嫌いな理由
korimu
0
160
Lottieアニメーションをカスタマイズしてみた
tahia910
0
120
時計仕掛けのCompose
mkeeda
1
280
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
480
Amazon Bedrock Multi Agentsを試してきた
tm2
1
280
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
7
2.5k
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
360
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
35
1.6k
How STYLIGHT went responsive
nonsquared
98
5.3k
Building Applications with DynamoDB
mza
93
6.2k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Making Projects Easy
brettharned
116
6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Six Lessons from altMBA
skipperchong
27
3.6k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
We Have a Design System, Now What?
morganepeng
51
7.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
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