デイトラのロゴ

Webアプリ開発コース初級編

WEBサイトとミニアプリを作れるようになろう

HTML・CSS基礎編
DAY 1
環境構築をしよう!

プログラミングの世界へようこそ!

Webアプリ開発コースでは

  • HTML
  • CSS
  • JavaScript
  • jQuery
  • Ruby
  • Web周辺の知識
  • SQL
  • Git・GitHub
  • Rails

といったWebサービスを作るために必要な言語を学んでいきます!

これから実際にコードを書いていくわけですが、まずは開発するための環境を整えましょう

  1. ブラウザのインストール
  2. エディタのインストール
  3. 「Hello World!」の表示

の順に進めていきます。手順に沿ってしっかりついてきてくださいね!


TIPS

01.Google Chromeをインストールする 

開発には『Google Chrome』ブラウザを使います。
もしChromeを入れてない方はこちらからインストールしてください。
Google Chromeインストール

「なんでわざわざChromeを使うの?」と思った方もいると思います。なぜChromeを開発で使うのかというと、これから行う「コーディング」という作業にはChromeの検証機能が必要不可欠だからです。

まずはじめにHTML/CSSという言語を学んでいきますが、HTML/CSSのライティング作業(これをコーディングと呼びます)に絞っても、検証画面からコードを確認したり、スマホ時の見え方を確認したりと様々な場面で使います。

コーディングするときは必ずChromeの検証を開いて確認しながら進めるべし!と覚えておいてください。

後ほど動画でも解説しますが、Chromeの検証の詳しい使い方は「Chrome 検証 使い方」「Chrome デベロッパーモード 使い方」などのキーワードで調べてみてください。

※今後も全ての解説は書かず「調べるためのキーワード」を残したレッスンがたびたび出ます。

プログラマーに最も大切な能力の一つが「ググり力 = 自己解決力」です。そうした自己解決力を磨くステップになってますので、レッスンで気になったワード・知らない言葉なども積極的に調べていきましょう!

またこれから先の開発ではChromeを使い倒すので、PCの規定ブラウザもChromeに変更しておいた方が便利です。

  • 「規定ブラウザ 変更 mac」
  • 「規定ブラウザ 変更 windows」

↑で調べて、デフォルトで開くブラウザをChromeに変更しておきましょう!

02.エディタ「VS Code」をインストールしよう

まず、コーディング作業を行うために必須の「エディタ」を用意しましょう!

Atom、Sublimeなどエディタにも種類がありますが、おすすめはMicrosoft社が開発したVisual Studio Code(VS Code)です。

機能性・軽さ・拡張性、どれをとっても圧倒的👍


VS Codeはこちらからインストールしてください↓
VS Codeインストール

VS Codeを日本語化する方法

インストール直後のVS Codeは英語設定になっているので、ひとまず日本語化しておきましょう!(英語が得意な方はそのままでも大丈夫ですw)

マーケットプレイスを選択後、「Japanese」くらいまで打てば候補の一番上にJapanese Language Packが表示されるはずです。

こちらを選択→インストールして、VS Codeを再起動してください。

再起動後、メニューバーが日本語表示になっていれば成功です!

03.「Hello World!」を表示する

初めてのコードを表示させてみましょう!

これであなたもWebデベロッパーの仲間入り!おめでとうございます!

ちなみに、動画の右下の歯車アイコンを押すと動画の速度を変えられます。速すぎて何をやっているかわからない場合は、スピードを遅くしてみてくださいね!

04.ウェブサイトが表示される仕組みを知ろう

無事に初めてのコードを表示できましたね!これから本格的にHTML/CSSについて勉強していくワケですが、現状は「なんか画面に文字が出た!」って状態だと思いますw

1日目の最後は、少しだけウェブの仕組みを勉強して終わりにしましょう

  • そもそもWebサイトとは何か
  • Webページが表示されるまでの流れ
  • Webサイト制作に必要な道具

など、基本的な事柄を初心者向けに解説した記事があるので、こちらを読んでみてください↓

05.転職に関する情報

Webエンジニアとして転職するために重要な考え方をこちらで共有してます。

  1. Webエンジニアとして知っておきたい転職の考え方
  2. Wantedlyを使って未経験可の自社開発企業に転職する方法
  3. 【転職】面接で失敗しないために準備しておくべき三つのポイント

特に①の「Webエンジニアとして知っておきたい転職の考え方」は今日から使えるテクニックなので見ておいてください。

注意してほしいのが、ここに書いてる方法に裏技はありません。基本的にまっとうに努力して成果を得るための手法です。もちろん知っているほうが楽はできますが、努力は必要です。

※個人の進路についてコンサルティングは行っていませんのでご注意ください。