AI時代だからこそ、ホンモノの技術を。 プログラミング&デザインスクール「prepro(プリプロ)」のロゴ

〜現場で通用するフルスタックな解決力を手に入れる、
プログラミング&デザインスクール〜

#0|Windows編 自分のPCをプロ仕様にしよう

⚠️ preproからのお願い

このチャンネルは「修行の場」です。「コピペは原則禁止」。

自分の指でコードを打ち込み、エラーと向き合い、身体で技術を身につけていく。

一見タイパが悪いように見えて、それがジェネラリストへの一番の近道です!

〜デザインからプログラミングまで一人で開発できるジェネラリストへ〜

ICTの技術をトータルで学ぶYouTubeチャンネル「prepro -プリプロ-」へようこそ!

講師の東郷です。

第0回となる今回は、これから様々なWebアプリを開発していくための「環境構築(Mac)」を行います。
プロの現場でも使われている Google Chrome、VS Code、Docker の3つをインストールし、あなたのMacを最強の開発マシンへと進化させましょう。

それでは、一緒に最高のクリエイターを目指しましょう!

【この動画で学べること】

  • PHPプログラミングでの開発に必要な環境構築
  • 「Google Chrome(ブラウザ)」のインストール
  • 「VS Code(テキストエディタ)」のインストールとフォルダの開き方
  • 「Docker(仮想サーバー環境)」のインストールと基本的な立ち上げ方
  • 拡張子の表示・隠しファイルの表示
  • PHPの基本的な書き方のルール

【タイムスタンプ】

  1. 00:00 今回の内容説明
  2. 04:44 第0回「環境構築」スタート
  3. 04:58 「Google Chrome(ブラウザ)」のインストール
  4. 07:56 「VS Code(テキストエディタ)」のインストール
  5. 11:15 「Docker(仮想サーバー環境)」のインストール
  6. 11:58 Windowsのシステム情報の確認方法(AMD64 or ARM64)
  7. 19:02 WSLのアップデート
  8. 22:45 Dockerの準備:公式サイトからファイルをダウンロード
  9. 26:20 Dockerの起動
  10. 35:28 最初のプログラムを書いてみよう(Hello prepro!!!)
  11. 38:34 拡張子の表示・隠しファイルの表示
  12. 39:47 Dockerの停止方法とまとめ

【preproのカリキュラム方針】

preproでは、特定の言語に特化せず、Webアプリ開発の全体像を学びたい方をターゲットにしています。

本編: 15分でサクサク進むメイン講義

0.5回シリーズ: 習熟度の格差を埋め、しっかり学びたい人のための深掘り講義

この「レベル別階層構造」で、初心者から経験者まで自分のペースで学習を進めることができます。

もっと詳しく知りたい人のための
0.5回シリーズ

今回の動画は、本編第0回「自分のPCをプロ仕様にしよう」を補完する「0.5回シリーズ」です。

プログラミング効率を劇的に変えるエディタ「Visual Studio Code(VS Code)」の基本設定と、開発をスムーズに進めるためのカスタマイズ方法を丁寧に解説します。

「本編だけでは少し不安」「もっと使いやすくしたい」という方のための深掘り回です。

【この動画で学べること】

  • コーディングを快適にする設定方法
  • コードの視認性を高める設定方法
  • 英語に慣れる必要性を知る

【タイムスタンプ】

  1. 00:00 今回の内容説明
  2. 01:10 VS Codeの起動とプロジェクトフォルダの読み込み
  3. 01:52 フォントサイズの変更(Editor: Font Size)
  4. 03:13 コードの折り返し設定(Editor: Word Wrap)
  5. 04:35 空白等の表示設定(Editor: Render Whitespace)
  6. 06:30 タブ ↔ スペースの変換設定(Editor: Insert Spaces)
  7. 09:45 スペースのサイズ設定(Editor: Tab Size)
  8. 11:00 エディタを日本語化しない理由