【初心者向け】プログラミング学習【やることリスト】
こんにちは。
ララといいます。
「プログラミング学習の始め方」について調べてみると、あまり重要ではない情報が多いことに気づきました。
例えばこういうのです。
「そもそもプログラミングとは～」
「独学で挫折しないためには～」
これではいつまでも「プログラミング学習」は始まりません。
この記事では、「やること」のみ解説していきます。
以下が、やることリストです。
ProgateのHTML ＆ CSS初級コース
まずは「プロゲート」というサイトで学習していきます。
このサイトは、プログラミング学習サイトです。
プロゲートはこちら
画面右上に会員登録ボタンがありますので、会員登録を行ってください。
次にコースを選択します。
色んなコースがありますが、まずはHTML ＆ CSSコースを選択してください。
プログラミングの基礎になるコースです。
HTML ＆ CSSコースは初級、中級、上級があります。
学習するのは初級だけでいいです。
HTML ＆ CSSコースの中級、上級は有料会員専用です。
月額1000円ほどかかります。
ここで有料会員になると、HTML ＆ CSSコース以外のコースに手を出したくなります。
すると、プログラミング学習がごちゃごちゃしてきます。
この時点での有料会員登録はあまりおすすめしません。
まず「やること」は、プロゲートのHTML ＆ CSS初級コースを2周こなすことです。
それを終えたら、どんどん次のステップに進んでいきます。
Google Chromeのインストール
次はプログラミング用の「ブラウザ」をインストールしていきます。
「ブラウザ」が何なのかはわからなくても大丈夫なので安心してください。
まぁ簡単に言えばプログラミングに使う道具のひとつです。
以下のサイトにアクセスします。
「Chromeをダウンロード」というボタンを押します。無料です。
ダウンロードされた「ChromeSetup.exe」というファイルを実行してください。
あとは画面に従ってインストールします。
そんなに時間はかからないと思います。
インストールした後も特に設定などは必要ありません。
これで「ブラウザ」が用意できました。
デスクトップにGoogle Chromeのアイコンができてると思うので、そこからいつでも起動できます。
Visual Studio Code（VScode）のインストール
次に「エディタ」を用意します。
「エディタ」の意味もわからなくて大丈夫です。
まぁ簡単に言えばプログラミングに使う道具のひとつです。
「ブラウザ」と同じですね。
まずはダウンロードサイトにアクセスします。大丈夫です、無料です。
Windowsのパソコンをお使いの方は、「Windows」のボタンを押してください。
Macをお使いなら、「Mac」のボタンです。
Setupファイルがダウンロードされるので、実行すると次の画面が出ます。
「同意する」を選んで「次へ」をクリックします。
「デスクトップ上にアイコンを作成する」のみにチェックを入れて「次へ」をクリックします。
そのまま「インストール」をクリックするとインストールが始まります。
このウインドウが表示されたら「完了」をクリックします。
このような画面が開きます。
「Welcome」と書かれたタブは✖ボタンで閉じていいです。
左端の方にある「Extensions」と呼ばれるボタンをクリックして、入力欄に「live server」と入力してください。
矢印で示してるように、「Live Server」というものが表示されるので、緑色の「Install」ボタンをクリックしてください。
インストールが完了すると、画面のように「Install」ボタンが歯車マークになります。
デスクトップ上に「html_lesson」という名前のフォルダを作ってください。
VScodeに戻ります。
左上の「Explore」と呼ばれるボタンをクリックし、「Open Folder」をクリックします。
先ほどデスクトップ上に作った「html_lesson」というフォルダを選択してください。
すると、このような画面になったと思います。
赤丸で囲んであるところをクリックしてください。
「index.html」と入力してEnterキーを押してください。
「index.html」という名前でタブが追加されました。
「Welcome」というタブは使わないので、閉じていいです。
同じ要領で、「stylesheet.css」というファイルも作ってみてください。
「index.html」に次のようにコードを書いてみてください。
書いたらキーボードの「”Ctrl” + “s”」で保存します。
左にある「index.html」を右クリックし、「Open with Live Server」をクリックしてください。
Google Chromeが起動して、このように表示されれば成功です。
これは一般公開されているわけではないので安心してください。
あなただけにしか見れないページです。
「Hello, World!」という文字を3つにしてみましょう。
するとGoogle Chromeで、自動的にこのような表示に変わっていると思います。
Google Chromeを閉じてしまった方は、再度VScodeの「index.html」を右クリックして「Open with Live Server」をクリックしてください。
あとはプロゲートのHTML ＆CSS初級コースで作ったサイトを、今回インストールした「Google Chrome」と「Visual Studio Code（VScode）」を使って作ってみてください。
プロゲートのHTML ＆CSS初級コースでは、「index.html」と「stylesheet.css」にコードを入力していきましたよね？
あれと同じコードをVScodeの「index.html」と「stylesheet.css」に入力していけばいいだけです。
書籍で学習
「Google Chrome」と「Visual Studio Code（VScode）」を使って、プロゲートのHTML ＆ CSS初級コースのサイトが作れるようになったら、いったんプロゲートは卒業でいいです。
書籍を使った学習に進みましょう。
おすすめの書籍はこちらです。
プロゲートで習ってないことが、色々出てくるので最初は戸惑うかもしれません。
でも、「やること」はとにかく「コードを書くこと」です。
この書籍はとても丁寧です。
書いてある通りにコードを書いていけば、一つのサイトが完成します。
多分、途中でエラーが発生して上手くサイトが表示されないことがあると思います。
プログラミング上級者でもエラーは発生するようです。
何が理由でエラーが発生しているのか、自分のコードの中から探してください。
これがきついんですが、この時が一番プログラミングが上達している瞬間だそうです。
「コードの意味を覚えること」よりも「サイトを完成させること」を優先させてください。
最後に
僕はプログラミング学習を1年以上続けてきました。
今思えば色々無駄なことをしました…
そんな失敗をもとに、今回この記事を書きました。
この記事の内容的には、1ヶ月もあれば実行可能かと思います。
試行錯誤は必要ですが、無駄と分かっていることはやらなくていいんじゃないですかね。
というわけで今回は以上です。
ここまで読んでいただいてありがとうございました。