【入門】プログラミング(HTML)の学習環境を作る。無料Google chromeなどでカンタン

プログラミングを学習します

こんにちは、いどはるです。

プログラミングの初歩を無料でカンタンに作れて、「なんかできるかも・・」っていう気持ちになりました笑。

ほぼ無料でできるプログラミング動画学習サイトドットインストールを使っていますが、HTMLの学習環境構築の流れを記事にしています。

✔️本記事の内容

  • プログラミングの初歩HTMLを学習する開発環境は、「Google chromeとAtom」で
  • プログラミングに適したフォントも導入します

Macのやり方で紹介します(Windowsでもやり方は同じかも)。

Windowsに比べてMacの方が起動が早く、直感的に操作ができます。web系企業が多く導入しているんです。すると、ネット上にMacでのプログラミング方法についての情報が手に入れやすくなるので、プログラミング学習にはMacが良いようです。

プログラミングの初歩HTMLを学習する環境は、「Google chromeとAtom」で

プログラミングにおいて、HTMLというプログラミング言語は入門に最適。画像や記事を作成することができます。

そして、学習するのに使うのは2つ。Google chromeとAtom。

Google chromeはwebページを検索したりする「ブラウザ」というものですね。作成したプログラムが反映されるかどうか、確認します。

Atomは「テキストエディタ」というもので、プログラミング言語を書くために使います

学習環境その①ブラウザ「Google chrome」

CHROMEをダウンロード

Google chromeで検索して、導入です。

学習環境その②テキストエディタ「Atom」

Atomをダウンロードします

Atomで検索して、ダウンロード。

Atomは全体的に英語で書かれています。設定で日本語に変えることもできますが、変えずに英語で学習していきます。

プログラミング学習において英語は重要。プログラミング言語が英語で記述されるためです。最新の情報は英語だし、調べて出てくる言葉も英語ということもあります。

プログラミングに適した「フォント」も導入

こちら、GithubにてRicty Dminishedというフォントを導入します。

Ricky Diminishedを導入

↑ 「RictyDiminished-Regular.ttf」を導入。レギュラー版ですね。ダウンロードして、フォントをインストール。

AtomにてRictyDiminishedを指定

Atomのメニューpreferencesを選んで、Editorメニュー→Font Family→Ricty Diminishedと記入します(つづりを間違えないように)。

Ricky Diminishedを設定

プログラミング用のフォントを導入しておくと、間違いやすい記号も見分けがつきやすくなって、ミスが減ります。

拡張子を表示させておこう

拡張子というのは、ファイルの後ろの「〜〜.pages」「〜〜.jpeg」みたいなやつ。どんな種類のファイルなのかを確認しやすくすことで、プログラミングで役に立ちます。

Fineder→環境設定→詳細設定→全てのファイル名拡張子を表示にチェックでOK。

学習環境の設定は、プログラミングの第一歩。誰でもカンタンに

冒頭でも書きましたが、これからプログラミングを始めようという人は、Macが良いようです。起動が早く、感覚的に動かせる、web企業で導入しているところが多いということが理由。

また、Macの中にWindowsをインストールして、Windowsを使うことができます(逆に、WindowsPCの中にMacの中身をインストールすることはできません。詳しくはBoot Camp)。

  • Google chrome
  • Atom
  • RictyDiminished
  • 拡張子を表示させておく

以上、大きくはこれらがポイントです。学習環境を手に入れてみましょう!では!