Railsのバックエンドに加え、ビルドツール、タスクランナーなどで構築するフロントエンド開発環境は目紛しく変わってきました。覚えたかと思えばその技術は廃れ新たな技術が生み出されるので「フロントエンド疲れ」と言う言葉があるほどです。Node.jsで作る開発環境ここ数年は、Node.jsベースでエコシステムを作り上げるフロントエンド開発環境に移り変わってきました。Node.jsは元来サーバサイドで動くJavaScriptで、インストールすると抱き合わせでnpmというパッケージ管理ツールが一緒にインストールされます。そのnpmの中はweb開発を強力にサポートするありとあらゆるパッケージでフロントエンドのエコシステムが作られているのです。モジュールバンドラーこのnpmからフロントエンドの開発環境で必要なツールが網羅されているwebpackというパッケージを導入することができます。webページを構築する事ができます。webページにはUIを形作るために拡張子cssの複数のスタイルシートファイルが読み込まれます。写真・ロゴマーク・アイコンなどの画像、時には動画も読み込まれます。インタラクションをつけるためにはjsが読み込まれます。それらwebページに添付される全ての読み込みファイルをたった一つのjsファイルにバンドルしてしまうのがこのモジュールバンドラーwebpackなのです。cssのプリプロセッサ今日ではスタイルシートコーディングの効率化のため、sassというcssのプリプロセッサを使うのが主流です。GrantやGulpと言ったビルドツールやタスクランナーの時代はまずsassで書いたスタイルをcssにコンパイルして使用していました。webpackを使えばその作業もすっ飛ばしてたった1つのjsファイルの中に全てのモジュールをバンドルしてしまう事ができるのです。バンドラーを使うのか偏に表示スピードを上げるためです。表示スピードはwebサービスの命です。動作がもっさりしたwebサービスはすぐにユーザーに逃げられてしまいます。表示スピードは速ければ速いほどいいわけです。読み込まれるファイルは少なければ少ないほど表示スピードは速くなります。その読み込まれるファイルは軽ければ軽いほど表示スピードは速くなります。base64に画像を変換するバンドラーを使うと画像もbase64のコードに変換する事ができます。base64とはファイルのバイナリデータを6bitずつ取り出し(足りない分は0を追加する)、6ビットとAscii文字の変換表を用いて4文字ずつ(4文字に満たない場合は=を追加する)にした文字列です。重さは画像よりも37%重くなるのですが、インラインイメージ(単体の画像ファイルではなくHTMLやCSSのソースコード内に文字列化されたデータを埋め込む事)にできるので読み込まれる画像ファイルをなくす事ができます。結果表示スピードは格段に上がる訳です。webpackによるフロントエンド開発環境を学ぶ事ができます。フロントエンド開発者のための学びのフローは、html→css→emmt→js→linux→webpack→sassになります。初心者であればwebpackを使ったsassのフロントエンド開発環境を学ぶまでの前提スキルを学ぶのに70時間から100時間(人によって違います)掛かると考えてください。詳しくは無料体験セミナーで講師に直接お聞きください。(土日祝定休)Akrosでは、受講生と一緒に成長したい仲間を募集していますWEB制作会社が作ったWEBデザイナー育成スクールAkros。