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
400
はじめてのフロントエンド開発環境導入
Aihara Noriyoshi
March 01, 2024
Tweet
Share
More Decks by Aihara Noriyoshi
See All by Aihara Noriyoshi
JavaScriptの「知らない」が少し減る会
nori44
0
140
コーディングのお供 Google Chrome 開発者ツールを使いこなそう!
nori44
0
480
macOS / Windows パソコン作業効率化を考えよう!
nori44
0
180
Other Decks in Programming
See All in Programming
Amazon Neptuneで始める初めてのグラフDB ー グラフDBを使う意味を考える ー
satoshi256kbyte
2
250
Prolog入門
qnighy
4
990
Android開発以外のAndroid開発経験の活かしどころ
konifar
2
690
Ruby Parser progress report 2024
yui_knk
2
220
Rubyとクリエイティブコーディングの輪の広がり / The Growing Circle of Ruby and Creative Coding
chobishiba
1
260
Rubyのobject_id
qnighy
6
1.3k
Our Websites Need a Lifestyle Change, Not a Diet
ryantownsend
0
130
エラーレスポンス設計から考える、0→1開発におけるGraphQLへの向き合い方
bicstone
5
1.5k
【TID2024】模擬講義:プログラマと一緒にゲームをデザインしてみよう!
akatsukigames_tech
0
570
実践!難読化ガイド
mitchan
0
120
[DroidKaigi 2024] Android ViewからJetpack Composeへ 〜Jetpack Compose移行のすゝめ〜 / From Android View to Jetpack Compose: A Guide to Migration
syarihu
1
260
Architecture Decision Record (ADR)
nearme_tech
PRO
1
670
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
Navigating Team Friction
lara
183
13k
We Have a Design System, Now What?
morganepeng
48
7.1k
Facilitating Awesome Meetings
lara
49
5.9k
Raft: Consensus for Rubyists
vanstee
135
6.5k
Typedesign – Prime Four
hannesfritz
39
2.3k
Documentation Writing (for coders)
carmenintech
65
4.3k
Fireside Chat
paigeccino
31
2.9k
Designing the Hi-DPI Web
ddemaree
278
34k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
109
6.9k
Unsuck your backbone
ammeep
667
57k
Ruby is Unlike a Banana
tanoku
96
11k
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