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

そんな悩みを持っている方に、お役に立つと思います。

近年、プログラミングはさらに需要が高まってきていており、プログラマーに転職する人も年々増えているようです。

いきなりの転職はハードルが高いから、まずはプログラミングをかじってみよう！という方も多いはず。

今回は、そんな独学でプログラミングを始めようと思っている方に、プログラミングを学習するにあたって最低限抑えておきたい知識や準備について、僕が経験したことを踏まえてお伝えします。

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

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

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

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

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

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

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

この テキストエディタは非常に優秀で、コードを書くときに使う「タグ」に対してショートカット機能を使って効率的にコードを書いていくことができる のでとても便利。

ひとまずは便利なツールで、使い勝手がいいと覚えておけばOKです。

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

Visual Studio Code

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

Atom

URL: https://atom.io/ 

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

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

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

HTMLファイル

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

（Macユーザーは ⌘キー ＋ Nボタン でサクッと作成可）

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

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

CSSファイル

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

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

Imageフォルダ

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

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

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

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

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

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

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