Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
BEST
Programming

/

Front-end

フロントエンド開発環境の理解と実践 (webpack, babel, eslint..)

すでに構築済みの開発環境を理解できます。 最初から自分で開発環境を構築できます。

  • jeonghwan
Node.js
Webpack
Babel
ESLint

学習した受講者のレビュー

こんなことが学べます

  • モジュールシステムを使って開発環境を自動化する方法(Webpack)

  • 最新のJavaScript構文を使用する環境を作る(Babel)

  • 同僚と協調する開発環境の構築 (ESLint, Prettier)

Webパック、バーベル、リントなどのフロントエンド技術を理解し、実務に適用してください。

「ウェブパックはチームで一人だけ扱うと分かればいい?」

もしその一人がチームを離れたらどうなるでしょうか?たぶんあなたはその一人になるべきかもしれません。
開発チームに皆さん一人であれば、Webパックの構成は避けられません。

開発環境の構成だけは私の手で直接扱ってくれる知っていたらどうでしょうか?
少なくとも他の人が作成した構成(例えば、create-react-appやvue-cliで作ったコード)を読んで理解できる程度になれば、はるかに自信を持って働くことができるでしょう。

Webパックを含むバーベル、リント、プレティアなどのフロントエンド開発環境を自動化し、生成性を高めるツールを習得できる講義を作成しました。
これにより、より生産的に働くことができることを期待します。

📝どんなことを学びますか?

#Node.js
Node.jsは、フロントエンド開発環境を構築するための基盤となる技術です。ほとんどのツールがNode.jsベースで動作するためです。さらに、一連の開発プロセスを自動化する上で大きな役割を果たしています。フロントエンド開発中のNode.jsの役割を理解することができます。
#Webpack
モジュールベースの開発を可能にするのがウェブパックです。同じ役割を果たす代替品が登場しましたが、まだ最も一般的なのはWebパックです。 Webパックの動作原理を覗き込んで理解した後、直接開発環境を構成し、ローダーを直接実装することもできます。
#Babel+SASS
ECMAScirpt+、Typescriptなどの高レベルのプログラミング言語や、React.js、Vue.jsなどのフレームワークを使用して開発するときに必要なのがバーベルです。もちろん、バーベルなしで開発できますが、誰がそのように開発しますか?開発生産性のためには、バーベルの助けを借りてください。バーベルの原理を理解し、自分で試して、プロジェクトに最適な環境を作成する方法を学びます。
# Prettier+ESLint
コーディングコンベンションによる議論はとても疲れていますか?ツールの助けを借りれば、もっと簡単にコーディングスタイルを合わせることができるでしょう。さらに、自動化ツールを開発手順に追加すると、一貫したコードを継続的に維持できます。

🧰あらかじめインストールしてください

VSCodeを使用していますが、通常使用するエディタやIDEがある場合は、それを使用してもかまいません。
練習進行のためにGitをインストールしてください。フェイクフックを使用するクラスもありますので、v2.3.0バージョン以上をお使いください。

🙋🏻‍♂️講義に関する予想される質問

Q. この講義を始めるきっかけを紹介してください。
A. フロントエンド技術がとても速いとはいえ、それでも一度はまとめてみたかったです。 Webパックから始めて働きながらよく使う開発ツールマニュアルを一つずつ読んでみて、ブログにまとめた内容が「フロントエンド開発環境の理解(全5編)」です。その後、昨年2019年のTアカデミーでこのテーマでセミナーを開いたが、意外と私のように必要な方が多かったです。反応が大丈夫で内容をさらに補強してInflearnにオンライン講義を開設しました。

Q.この講義だけの特別な利点がありますか?
A. 開発環境というテーマが実習しにくいかもしれません。マニュアルだけを読んで通り過ぎるにはよく分からないからです。そこで、各理論授業ごとに小さな実習を準備しました(実習リポジトリ: lecture-frontend-dev-env )。以前の講義の「実習UI開発で学んでみる純粋なjavascriptとVueJS開発」で取り上げたコードに基づいて、ここに開発環境を構成するように段階別に実習課題を準備しました。一つ一つ解いてみると、いつの間にか開発環境を構成することが手につくことができるように。

Q. このレッスンでどんなことができますか?
A. 現在、皆さんが開発しているプロジェクトの開発環境を理解できるでしょう。必要に応じてカスタマイズして生産性を高めることもできます。今プロジェクトを開始する段階ですか?では、好みに合わせて直接開発環境を飾ることもできます。

他の講義を見る

堅牢なJSソフトウェアの作成
テスト主導開発、JavaScriptデザインパターンを学ぶ
実習UI開発で学ぶ純粋なjavascriptとVueJS開発
Vue.JS基盤、MVC/MVVMアーキテクチャ、コンポーネント開発
テスト主導開発(TDD)で作るNodeJS APIサーバー
NodeJS基礎、ExpressJS基礎、Rest APIサーバーの開発
トレロ開発で学ぶ
Vuejs, Vuex, Vue-Router フロントエンド実戦技術

トレロに沿って作る
Vue.js、Vuex、Vue-Router本番の技術学習

こんな方に
おすすめです

学習対象は
誰でしょう?

  • あらかじめ設定された環境でのみ開発していたため、webpackやBabelの設定は全く分かりません。

  • Webpackは使ったことはあるけど、どんな仕組みで動いているのか知りたいです。

  • 一貫したコーディング規約を維持したいのですが、チームで作業しているとなかなかうまくいきません。

前提知識、
必要でしょうか?

  • 基本的なフロントエンド開発経験が必要です。(JavaScript、HTML、CSS)

こんにちは
です。

13,748

受講生

855

受講レビュー

585

回答

4.8

講座評価

9

講座

👋🏼 안녕하세요 인프런에서 강의하는 김정환입니다.

수업 중 궁금한 사항은 질문 사항에 올려주세요.
매일 한 번씩 확인하고 답변 드리겠습니다.

カリキュラム

全体

39件 ∙ (5時間 2分)

講座掲載日: 
最終更新日: 

受講レビュー

全体

208件

4.9

208件の受講レビュー

  • eonsang님의 프로필 이미지
    eonsang

    受講レビュー 2

    平均評価 5.0

    5

    100% 受講後に作成

    受講坪 まずご覧の方、お早めにお買い求めください。

    • jeonghwan
      知識共有者

      受講していただきありがとうございます。

  • gbobey님의 프로필 이미지
    gbobey

    受講レビュー 24

    平均評価 5.0

    5

    100% 受講後に作成

    先行してライフコーディングwebpack講義を聞いて来れば多くの役に立つと思います。基本的にJavaScript、npm、package.jsonが何であるかを知っていなければ、講義の進行がスムーズになるようです。 最初はただ従っても無理はないでしょうが、後に行くほど難しくなることがあります。 通常設定ファイル、ローダー、プラグインが何か例のいくつか見せる講義は多かったのですが、こうしてWebパックについて1-10まで見せる講義はなかったようです。最近、モジュールモジュールですが、正確にモジュールの概念が何であるかがわかり、多くを得た時間でした。 良い講義ありがとうございます。

    • youmeeeee1159님의 프로필 이미지
      youmeeeee1159

      受講レビュー 8

      平均評価 4.9

      5

      100% 受講後に作成

      私はウェブパックを本当に曖昧に使っていましたが、ウェブパックを理解するのに本当に大きな助けになりました。ウェブパックを書いてはいますが、何がどのように戻るのか、まだ感がない。より楽しくて、夜明け遅くまで見るほど興味深く見ました。 Webパックの深化まで先に見てまだバーベル、リントは見られませんが、残りの講義もよく見ます!良い講義を作ってくれてありがとう。 :Dキム・ジョンファンの講義は信じています...

      • jeonghwan
        知識共有者

        働いてみると、Webパックを少しずつ触りながら使いますが、これはうまくいきませんでした。ドキュメントを見ながら一つずつわかりながら整理するので、もう少し自信ができるようです。似たような状況で助けてくれてとても嬉しいです。

    • chataehyeon3874님의 프로필 이미지
      chataehyeon3874

      受講レビュー 1

      平均評価 5.0

      5

      18% 受講後に作成

      どんどん知っていたものがこのじっくりとまとめられていますよㅠㅠあまり幸せです!

      • jeonghwan
        知識共有者

        そう言ってくれてありがとう。今後も自分で必要な部分を知っていただきたいです。

    • gidgns19951552님의 프로필 이미지
      gidgns19951552

      受講レビュー 6

      平均評価 5.0

      5

      31% 受講後に作成

      フロントエンド開発者です。 ただバンドルしてトランスパイラーをどうやって帰るのかを正しく知りたいと思いました。 バーベルでプラグインを説明するのに感心しました... その間、プラグインを一度も見ていないプリセットを使用するだけで、思ったことなくしたので、講義よりも、なぜ私はそのように毎日すべてを追加するのですか? プリセットの動作原理を説明しようとする前に、毎日そのように教えてくれたので、プリセットがなぜ必要なのか、どのようにバーベルが戻るのか理解するのにとても役に立ちました〜! フロントエンド開発 夢見ている方 いざ会社 いらっしゃると各自の会社のガイドやよく使うコード集のようなものがあって事実上スターターで開発する場合ほとんどありません。 だから川のぜひ聞いてみてください〜! webpack、vite、gulpなどのバンドリングも多すぎるが、そのようなものがなぜ必要なのか本当によく教えてくれると思います。私に与えて、実務でたくさん役立つことを教えてください。ありがとうございます〜! ああ、先生も、もし基本スターターのようにセットする、そんなことも講義を追加していただければ本当に面白いと思います~!

      • jeonghwan
        知識共有者

        この授業を開発環境を理解するのに役立ったのは幸いです。良いフィードバックありがとうございます。

    ¥8,256

    jeonghwanの他の講座

    知識共有者の他の講座を見てみましょう!

    似ている講座

    同じ分野の他の講座を見てみましょう!