現役フリーランスエンジニアが運営するテックメディア。日々の業務で得た知識を発信していきます!

  1. ツール紹介
  2. 421 view

プログラミング学習環境を整える

最終更新日:2019/01/17

development

プログラミングの勉強はまずは、HTMLやCSS、JavaScriptの勉強をするとことから始まります。
プログラミングは、手を動かさない限り出来るようにはなりません。
今回は、実際に自分でコードを入力&結果を確認出来る学習環境を整えていきましょう。

※今後、サンプルコードを実際に自分で入力する作業の事は写経と言います。

CodePenなどを利用すると、会員登録するだけで環境が整えられますが、今回はサービスに頼らない一般的な方法をご紹介します。
パソコンさえあれば基本的には問題なく進める事が出来ますが、Web業界で働くのであればMacがオススメです。

今回は、youtubeの動画を撮ってみたので、そちらも参考にしてください。

環境構築&写経・表示確認の流れ

  • GoogleChromeを標準のWebブラウザにする
  • テキストエディター(ATOM)をダウンロード
  • フォルダ、ファイルの作成
  • GoogleChromeで表示を確認

GoogleChromeを標準のWebブラウザにする

Web開発をする際に、必須となるのがGoogleChromeの検証機能です。
GoogleChromeは、InternetExplorer.Edge.FireFoxなどよりもWeb開発に向いているので標準のブラウザにしておきましょう。

GoogleChrome

テキストエディター(ATOM)をダウンロード

ATOMは無料で使えるテキストエディタで、コーディングの効率を高めてくれます。
初心者からベテランまで多くの人に愛されているエディターなので最初はATOMから始めましょう。
有料のものだとWebStormが便利ですので、就職してから使いたいなとおねだりしてみるのがオススメです。

フォルダ、ファイルの作成

デスクトップ上にフォルダを作成しましょう。
そしたらATOMでindex.htmlファイルを作成しましょう
そこに、適当な文字を記入し、command+sで保存をしてください。

GoogleChromeで表示を確認

index.htmlを右クリック。このアプリで開くでGoogleChromeで開くを選択してください。
Chromeで表示を確認してみましょう。

先ほど入力した文字が反映されているはずです。

学習環境が整ったら次はHTMLの使い方について学んでいきましょう!

動画内で言っているオススメの拡張機能等は、こちらにまとめてあるので是非ご覧になってください

The following two tabs change content below.
WINDII

WINDII

WINDII(ウィンディ)は、フリーランスエンジニアが運営するテックメディアです。 日々の業務で得た知見を、皆さんに役立つコンテンツにして発信していくので応援よろしくお願いします! また、Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。 Slackコミュニティはこちらから

ツール紹介の最近記事

  1. 自分のローカルリポジトリをgithubで管理してsourcetreeでコミットするまで

  2. Canvaが最高すぎる。使い方を完全ガイド【チュートリアルあり】

  3. Automatorを使ってワンコマンドでお洒落なターミナルを開く

  4. 記事の書き溜めにはBoostnoteがオススメ!【最強のメモ帳アプリ】

  5. プログラミング学習環境を整える

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

PAGE TOP