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
780
はじめてのフロントエンド開発環境導入
Aihara Noriyoshi
March 01, 2024
Tweet
Share
More Decks by Aihara Noriyoshi
See All by Aihara Noriyoshi
Webページ表示高速化 入門
nori44
0
39
JavaScriptの「知らない」が少し減る会
nori44
0
190
コーディングのお供 Google Chrome 開発者ツールを使いこなそう!
nori44
0
860
macOS / Windows パソコン作業効率化を考えよう!
nori44
0
210
Other Decks in Programming
See All in Programming
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
820
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
220
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
900
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
640
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
760
Hack Claude Code with Claude Code
choplin
4
2.1k
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
2.1k
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
1
130
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
87
29k
ニーリーにおけるプロダクトエンジニア
nealle
0
840
Featured
See All Featured
Producing Creativity
orderedlist
PRO
346
40k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Building an army of robots
kneath
306
45k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
GraphQLとの向き合い方2022年版
quramy
49
14k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Rails Girls Zürich Keynote
gr2m
95
14k
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