プログラミング

プログラミングの環境設定をしよう!Google Chrome、Visual Studio Code、Ricty Diminishedのダウンロード方法、設定の紹介!

プログラミングの環境設定をしよう!Google Chrome、Visual Studio Code、Ricty Diminishedのダウンロード方法、設定の紹介!プログラミングでWebページの開発をしてみたいけど、環境設定の仕方が良くわからないという方がいると思います。

 

そこで今回は

  • ブラウザのGoogle Chromeのダウンロード方法
  • テキストエディタのVisual Studio Code のダウンロード方法
  • Visual Studio Code の設定
  • プログラミング用フォントのRicty Diminishedのダウンロード方法

 

の、4つについて紹介していきます。

 

プログラミングを行う上で必要な物

  1. PC
  2. ブラウザ
  3. テキストエディタ

 

ブラウザの準備

 

ブラウザとは、Webサイトを観覧するために使用するソフトのことです。

Macでは「Safari」、Windowsでは「Microsoft Edge」がインストールされていると思いますが、プログラミングでは基本的に「Google Chrome」を使用します。

 

Google Chromeのダウンロード方法

Google Chromeのダウンロード方法

 

初めにお使いのブラウザで「Chrome」と検索し、「Google Chrome ウェブブラウザ」をクリックします。

 

Google Chromeのダウンロード方法

 

クリックすると、上記のサイトが出てくるため、「Chromeをダウンロード」をクリック。

 

Google Chromeのダウンロード方法

 

ダウンロードが終了すると同意を求められるので「同意してインストール」をクリック。

 

Google Chromeのダウンロード方法

 

すると、インストール画面になり、インストールが終了するとGoogle Chromeが使えるようになります。

 

テキストエディタの準備

テキストエディタとはプログラミングを行う際に、コードを入力する際に必要となるソフトウェアです。

 

様々な無料のテキストエディタがありますが今回は「Visual Studio Code」を使用していきます。

 

Visual Studio Codeのダウンロード方法

Visual Studio Codeのダウンロード方法

 

Google Chromeを使用し「Visual Studio Code」と検索します。

 

Visual Studio Codeのダウンロード方法

 

検索すると「Visual Studio Code - Code Editing. Redefined」というサイトがでてくるためクリック。

 

Visual Studio Codeのダウンロード方法

 

クリックするとこのような画面になるため、「Download for Windows」をクリック。

 

Visual Studio Codeのダウンロード方法

 

すると、ダウンロードが開始されます。

 

Visual Studio Codeのダウンロード方法

 

ダウンロードが終了すると同意を求められるため「同意する」にチェックを入れ「次へ」。

 

Visual Studio Codeのダウンロード方法

 

その他は変更せずに「ディスクトップ上にアイコンを作成する」にチェックを入れて「次へ」。

 

Visual Studio Codeのダウンロード方法

 

この画面になったら「インストール」をクリック。

 

Visual Studio Codeのダウンロード方法

 

するとインストールが開始されます。

 

Visual Studio Codeのダウンロード方法

 

少し待つと、インストールが終了し「Visual Studio Code を実行する」にチェックを入れたまま「完了」をクリックすると、Visual Studio Codeが立ち上がります。

 

Visual Studio Codeのダウンロード方法

 

このような画面が表示されればテキストエディタのインストールは完了です。

 

テキストエディタ(Visual Studio Code)の設定

 

Visual Studio Codeの設定

 

Visual Studio Codeの設定を行うためには「File」→「Preferences」→「Settings」を選択します。

 

Visual Studio Codeの設定

 

ます、「Auto Save」を「afterDelay」にします。これによりファイル編集後自動保存するようになります。

 

Visual Studio Codeの設定

 

次に「Tab Size」を設定していきます。これは「2」にすることをお勧めします。

 

Visual Studio Codeの設定

 

「Word Wrap」はコードを自動で折り返してサイト内に表示してくれる機能です。長いコードを打つ際にも、打ったすべてのコードがみえるので「ON」にすることをおすすめします。

 

プログラミング用フォントの導入(Ricty Diminished)

プログラミング用のフォントを導入しなくてもコードを書くことは可能ですが、可能であれ導入しましょう。

 

その理由として、様々な点が上げられますが一番大きな理由として、半角のスペースと全角のスペースをみわけるためです。

 

コードを書く際、半角のスペースはよく使用します。しかし、これが全角のスペースとなるとエラーになります。

 

たくさんのコードを書いた後にどこに全角のスペースを使用してしまったを探すのは大変な労力を費やします。

ricty diminished

 

これには全角のスペース10個、半角のスペース2個を書いていますが、一目では判断することが出来ません。

 

しかし、Ricty Diminishedを使用すると

 

ricty diminished

 

このように一眼でわかるようになります。

 

インストールは決して難しくないのでぜひ導入していきましょう。

 

Ricty Diminishedのダウンロード方法

ricty diminished

 

「ricty diminished」と検索し「Ricty Diminished - GitHub」をクリック。

 

このようなサイトが開くため、下の方にある「RictyDiminished-Regular.ttf」をクリック。

 

 

ricty diminished

 

するとページが変わるため「Download」をクリック。

 

ricty diminished

 

ダウンロードが開始されます。

 

ricty diminished

 

ダウンロードが終了するとこの様になるので、「インストール」をクリック。

 

ricty diminished

 

インストールが完了したら、先ほどまで行っていたVisual Studio Code の設定画面へと行き、「Font Family」と書かれているとことに、「Ricty Diminished」と入力すれば完了です。

 

まとめ

 

今回はプログラミングの環境設定について紹介しました。30分もかからずに設定は終了するため設定の仕方がわからなくて困っているという方は、是非このサイトを参考に環境設定を行ってみてください。

 

-プログラミング

Copyright© kane blog , 2020 All Rights Reserved.