ここではプログラミングの学習に必要なツールをセットアップを紹介していきます。
環境構築って初心者の方は絶対に悩むところですよね。今回は最初から最後までセットアップ方法を紹介していきます。この記事通りにセットアップすればとりあえず問題なくプログラミング学習が始められるはずです。
たった今、『Mac PCを買ってきたよ』ってな人に向けて書いていきますので、必要な部分だけ読み進めてください。
✔︎この記事の内容
- ブラウザの準備
- テキストエディタの準備
- テキストエディタの拡張機能の導入
ブラウザの準備
そもそもブラウザって何?って人もいるかと思います。ブラウザとはWebに接続するために用いられるソフトウェアです。Google ChromeとかFirefoxとかbingとかinternetExplorerとかのことですね。大体、この中のどれかを使ったことがあるかと思います。
ここではGoogle Chromeを紹介します。理由は簡単で世界的にシェアが広く、豊富な拡張機能が揃っているからです。
✔︎ここからGoogle Chromeをインストールしよう
Google Chrome公式サイトから「Chromeをダウンロード」をクリックしましょう。その後、ダウンロードしたファイルを開くと自動的にインストールが始まります。
テキストエディタの準備
テキストエディタとは、文章を作成、編集するためのソフトウェアです。テキストエディタには様々な種類があり、単純な文章を作成するのに適したもの、メモ書きに適したもの、コードを書くのに適したものなどさまざまです。
ここではVSCodeというテキストエディタを紹介します。理由は無料で利用できるテキストエディタの中で最も人気のエディタであるということ。人気なだけでなく、プログラミング開発に特化しているからです。
✔︎VSCodeをダウンロードしよう
VSCodeダウンロードページはこちらから。ダウンロードが終わったらファイルを開いてみましょう。その後、自分のアプリケーションファイルにドラッグ&ドロップします。
✔︎VSCodeを起動してみよう
もしも、「このソフトウェアは使用できません」という画面が表示されたら、システム環境設定を開いて、「セキュリティーとプライバシー」をクリックしてみましょう。
一般というところの下部に「”VSCodeは開発元が確認できないため、使用がブロックされました”」と出ている場合は「このまま開く」をクリックするとOKです。
テキストエディタの拡張機能の導入
テキストエディタは拡張機能を簡単に加えることができます。基本的な拡張機能を導入しましょう。
追加する拡張機能は以下のとおり。
✔︎Japanese Language Pack for Visual Studio Code
日本語表記にします。
✔︎HTML Snippets
HTMLタグ、CSSタグの入力を補完してくれます。
✔︎Ruby
Rubyの構文をチェックし、間違った箇所を指摘してくれます。
✔︎zenkaku
全角スペースを知らせてくれます。
✔︎Code Spell Checker
コードのスペルをチェックしてくれます。
これらの拡張機能を導入しましょう。 導入方法は以下のGIFを参考にしましょう。
僕はすでにインストールしているものだったのでアンインストールと表示されていますが、VSCodeをダウンロードしたばかりではインストールと表示されます。上記したプラグインを導入しましょう。
テキストエディタのカスタマイズ
拡張機能以外にも設定しておいた方がいいものがあるので紹介しておきます。
✔︎オートセーブ機能の導入
以下のGIF画像の通りに設定しましょう。
VSCodeのサイドバーより、「管理(下部の歯車マーク)」→ 「設定」の順に選択(直前の作業に続けて行う方は、この操作の必要はありません)
オートセーブの設定で「onFocusChange」を選択
これで必要な準備物は整いました。次はアプリケーション開発をするために必要な環境構築を行うための記事を書いていきますのでご覧になってください。それではさようなら。
コメント