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
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
5
3.8k
チームリードになって変わったこと
isaka1022
0
190
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
770
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
4
1.3k
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
120
Introduction to kotlinx.rpc
arawn
0
630
【PHP】破壊的バージョンアップと戦った話〜決断と説得
satoshi256kbyte
0
120
[JAWS-UG横浜 #79] re:Invent 2024 の DB アップデートは Multi-Region!
maroon1st
1
140
Writing documentation can be fun with plugin system
okuramasafumi
0
120
SwiftUI Viewの責務分離
elmetal
PRO
0
150
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
130
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.1k
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Docker and Python
trallard
44
3.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
Building Applications with DynamoDB
mza
93
6.2k
Building Your Own Lightsaber
phodgson
104
6.2k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
310
Speed Design
sergeychernyshev
25
780
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
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