npmを使ったフロントエンド環境構築[フロントエンドをこねる会 Vol.1]

こんにちは、ディレクターの荻野です。

Konel社内では今年から外部講師を招き定期的に勉強会を開催しています。1月から開始し、現在はWebのフロントエンド開発に関する勉強会を3回実施しています。今後はバックエンド編、電子工作編などテーマのバリエーションも増やしていく予定です。

今回の記事では勉強会の第1回目の内容にあたる、npmを使った環境構築手法を紹介したいと思います。

フロントエンド環境構築

1. なぜ環境構築が必要なのか
2. 開発環境の準備

- node.js(nodebrew)のインストール
- npmを使ったプロジェクト管理
- npmを使ったおすすめの開発環境・モジュールの紹介（詳細は次回以降）
  - scss:cssのコーディング簡易化 & ファイル分割管理
  - autoprefixer:ベンダープレフィックス付与の自動化
  - babel:jsのES2015(以降)への対応
  - minify:ファイル圧縮
  - browsersync:ブラウザの自動リロード & 外部機器でのアクセス
  - webpack:jsのモジュール管理(ファイル分割・依存関係解決)

次回以降は各モジュールの詳細な設定方法や使い方を勉強していきます。

内容の詳細はこちらに記載していますので興味がありましたらぜひお読みください。
https://github.com/zap-mueda/frontend-env/wiki/フロントエンド環境

＊Konelでは色々なジャンルで定期的に勉強会を実施しております。
外部の方でも大歓迎ですのですので参加したいという方はお気軽にメールかfacebookで私までご連絡ください。

Facebook : https://www.facebook.com/oginoyasu

Twitter : https://twitter.com/ogiyasu

Email : yasuhiro.ogino@konel.jp