【初心者向け】独学でプログラミングを始めるのにまずやるべき必要なこと

f:id:takatucker:20200331234406p:plain

f:id:takatucker:20200331222602p:plain
悩んでいる人

独学でプログラミングを始めてみたいけど
まず何をしたらいいかわからないなぁ。

 

そんなお悩みに答えていきます。

 

本記事の内容

  • 初心者がプログラミング(今回はWeb制作)を始めるための準備
  • コードを書き始めるための環境構築の方法がわかる

 

目次

プログラミングを始めるためにパソコンを用意する

f:id:takatucker:20200401074058p:plain

プログラミングを始めるにはまずパソコンを用意する必要があります。これがないと何もできないですからね。

 

パソコンには大きく分けてWindowsMacがありますが、正直なところ好みもあるので個人的に使いやすいほうでOKです。ちなみに僕はMacbookを使用してます。

 

また、パソコンのスペック(性能)については良いものに越したことはないですが、こちらも最低限のスペックがあれば十分です。

  

プログラミングで使うテキストエディタをダウンロードする

f:id:takatucker:20200402131152p:plain

プログラミングでコードを書くときに欠かせないのが、テキストエディタ と呼ばれるもの。

 

f:id:takatucker:20200331222602p:plain
悩んでいる人

メモアプリやワード、エクセルなどを使うんじゃだめなの?

 

20170418151102
タカ

ダメってことはないけど、テキストエディタはショートカットや改行がスムーズにできたり、コード内の決まりごとや定型文に自動で色がつくので見やすくて便利なんです。

 

この テキストエディタ は非常に優秀で、コードを書くときに頻繁に使う「タグ」に対してショートカット機能を使って 効率的にコードを書いていくことができる のでとても便利。ひとまずは便利なツールで使い勝手がいいと覚えておけばいいです。

 

今回は、たくさんあるテキストエディタの中から無料で使えるおすすめを2つ紹介します。下記のURLに飛べばダウンロード先が見つかるはずので、好きな方を使ってみましょう。

Visual Studio Code

f:id:takatucker:20200401213018p:plain

URL: https://code.visualstudio.com/

 

Atom

f:id:takatucker:20200401213044p:plain

URL: https://atom.io/
 

ちなみに僕自身はVisual Studio Codeを使ってます。理由は、Atomに比べて起動や終了時のタイムラグが少なくサクサク動くので、今のところストレスなく使うことができています。

 

プログラミングの基礎となるHTML・CSSファイル、imageフォルダを用意する

テキストエディタをダウンロードしたら、早速HTML・CSSファイルをそれぞれ作成してみます。(今回は例として、Macのパソコンを使ってVisual Studio Codeで作成する方法を紹介します!) 

 

20170418151102
タカ

事前にパソコン内にプログラミング専用のフォルダを作成しておくと便利ですね。

 

HTMLファイル

まずは、2本指クリック(Windowsユーザーは右クリック)で上記のウィンドウを開き、『 New File 』を選択。すると、Untitles-1 というファイルが作成されます。

Macユーザーは ⌘キー + Nボタン でサクッと作成可)

f:id:takatucker:20200402212255p:plain

 

次に、File から Save を選択すると右側のウィンドウが開くので、名前を index.html に変更して保存する。これで、このファイルがhtml拡張子のファイルであると認識することができるようになります。

f:id:takatucker:20200402214325p:plain

 

htmlファイルが作成できたら、下記のテンプレートコードをVisual Studio Codeのindex.htmlの中に入力しましょう!(コピペ可)

See the Pen bGdJYbE by タカ (@TakaTucker) on CodePen.

 

CSSファイル

CSSファイルの作成も、先ほどのhtmlファイルの作成方法と同様のやり方で新しいファイルを作成します。保存時には名前を stylesheet.css に変更しましょう。

CSSファイルができたら、下記のテンプレートコードをVisual Studio Codeのstylesheet.cssの中に入力しましょう!(コピペ可)

See the Pen bGdJYbE by タカ (@TakaTucker) on CodePen.

 

Imageフォルダ

画像を保存しておくためにImageフォルダを作成します。

すでにプログラミングフォルダを作成している場合は、そのフォルダ内で2本指クリック(Windowsユーザーは右クリック)で新規フォルダを選択。フォルダ名をImageに変更します。たったこれだけ!

f:id:takatucker:20200404070511p:plain

Web制作のプロジェクトごとに使う画像をこのImageフォルダに入れておくといった具合です。

 

 

以上で、Web制作を始めるための最低限の準備ができました。

これでいつでもHTMLとCSSのコードを書いてWeb制作を始めていくことができます。

 

もし、コードを書きすすめていくうちにわからないことが出てきたら、まずはググって自分で解決する努力をしてみましょう。今は有益な情報が多くあるのできっと探している答えが見つかるはず!

 

ググってみたけどわからない場合は、SNSやメンターというサービスを使って誰か相談できる相手を見つけてみるのもひとつです。

 

▼関連記事▼ 

よかったらシェアしてね!
目次
閉じる