Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
NEW
Programming

/

Programming Language

React、Vue学習のための必須知識 - FrontEnd学習環境設定およびVS Code基礎使用法

本コースは、React.jsとVue.jsフロントエンド学習に必須の開発環境設定とVS Code基礎使用法を扱う動画講義です。実習中心で環境構築から生産性を高める基本機能活用まで段階別にご案内します。

2名 が受講中です。

  • usefulit
react.js
Vue.js
VSCode

こんなことが学べます

  • ReactとVue開発のための最適な学習・開発環境構築能力習得

  • VS Codeの基本機能と設定活用による開発生産性向上

React、Vue学習のための必須知識 - FrontEnd学習環境設定およびVS Code基礎使用法

本コースは、React.jsとVue.jsフロントエンド学習に必須の開発環境設定VS Code基礎使用法を扱う動画講義です。実習中心で環境構築から生産性を高める基本機能活用まで段階別にご案内します。

講義内容

React、Vue学習のための必須知識 - FrontEnd学習環境設定およびVS Code基礎使用法 Part.1

  • フロントエンド開発初心者のための学習順序と必須インストールプログラムガイド

    • フロントエンド開発を初めて始める人のための学習ロードマップ紹介

    • HTML、CSS、JavaScript、フレームワーク(Reactなど)学習順序ガイド

    • 開発環境構築に必要な必須プログラム(Node.js、VS Codeなど)の紹介

  • Node.jsとnpmの削除・再インストール方法の実習

    • 既存のNode.jsとnpmバージョン確認方法

    • インストールされたNode.jsとnpmの削除手順

    • 最新バージョンで再インストールする過程の実習

  • VS Code インストール後の必須機能と設定を覚える

    • VS Code ダウンロードおよびインストール

    • テーマ、フォント、自動保存、コードフォーマッターなど必須設定

    • 拡張機能(Extensions)のインストールと管理方法

  • Reactインストールのための背景知識と核心用語の理解

    • Reactとは何か、その特徴について説明

    • コンポーネント、JSX、Virtual DOM、SPAなど核心用語と概念の理解

    • React インストール前に知っておくと良い開発環境関連用語整理

  • Reactプロジェクトのインストールとメイン画面実行実習

    • create-react-appまたは最新のインストール方式でプロジェクトを作成

    • プロジェクト構造と主要フォルダ/ファイルの説明

    • 開発サーバー実行後、ブラウザでメイン画面確認

  • VS Codeターミナルを活用したReactインストール方法

    • VS Code内蔵ターミナルを開く方法と基本コマンドの使用

    • Reactプロジェクト生成コマンド実行

    • インストール過程で発生する可能性のあるエラーと解決方法

React、Vue学習のための必須知識 - FrontEnd学習環境設定およびVS Code基礎使用法 Part.2

  • Live Serverのインストールと基本的な使用方法を学ぶ

    • VS Code拡張機能Live Serverのインストール方法ガイド

    • HTML/CSS/JavaScriptファイルをブラウザでリアルタイムプレビュー

    • 保存時の自動リフレッシュ機能活用法

  • VS CodeでJavaScriptコードを実行する方法の実習

    • 内蔵ターミナルを活用したNode.js基盤JSコード実行

    • VS Code拡張プログラムを利用したブラウザ環境実行方法

    • 簡単なサンプルコードを作成して実行結果を確認

  • 必須機能学習:マルチ選択、スティッキー(Sticky)、行関連機能、その他の便利機能

    • マルチ選択(Multi-cursor):複数の位置を同時に修正する方法

    • Sticky Scroll(スティッキー):スクロール時に上部にコード構造(関数名、クラス名など)を固定表示

    • 行関連機能:行のコピー、移動、削除、上下への挿入などのショートカットキーを使用

    • その他の生産性を向上させるVS Code編集機能の紹介

  • ショートカット実習による作業速度向上

    • VS Code基本ショートカットキーとよく使われるコマンドの練習

    • コード編集、ファイル探索、検索/置換などの主要作業ショートカットキー適用

    • ショートカット習得のための実習問題進行

  • カスタムHTMLテンプレートの作成と実習

受講前の参考事項

この講義では知識共有者による質問・回答は提供されません。

学習資料

part 1 - 講義資料_PDF

part 2 - 講義資料_PDF

こんな方に
おすすめです

学習対象は
誰でしょう?

  • React.js・Vue.jsを初めて学ぶか、学習環境をしっかり整えたい初級開発者

  • VS Codeの基本機能と設定を身につけて開発効率を高めたいWebベロッパー入門者

こんにちは
です。

8,256,009

受講生

6,086

受講レビュー

4.6

講座評価

244

講座

유용한 IT 강의를 통해 여러분의 성장을 돕겠습니다.

カリキュラム

全体

19件 ∙ (7時間 47分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

まだ十分な評価を受けていない講座です。
みんなの役に立つ受講レビューを書いてください!

¥8,837

usefulitの他の講座

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

似ている講座

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