こんにちは やはです。
こちらの記事は私が勉強しているプログラミングHTMLとCSSを順序立てて勉強する
記事です。
この記事のシリーズを順番に学んでいくことで、私と同じくらいのスキルを身に着け
できると思います。ただ私はそんなスキルのレベルが高いわけではなく、むしろ勉強
を始めたばかりでどちらかというと低レベルのプログラミングを行なっているため
あくまで始め方や勉強の仕方がわからない方を対象にした内容です。
なので自身で勉強している方達には
「こんな内容もあったな」
みたいに思い出に浸る程度の記事にしかなりませんので、ここを読むくらいなら
自分で違う分野を勉強した方がいいです。時間の無駄だと思います。
「全くわからないからとりあえず誰かと同じやり方で」
「自分だけだとやる気が出ないからブログと同じペースで」
と言った方達のためのブログにしたいと思っていますので、そういった方達はぜひ
参考にしてください。
この章では始める前に準備段階と最終的な目標ということで大まかに３つの説明をしていきます。
- 目標設定
- 使用する参考書
- 使用する環境
といった具合になっています。それでは１つずつ進めていきましょう
- 目標設定
プログラミングで一番大切なのは目標設定です。何事もそうだとは思います。
「難しい事を頑張って勉強して覚えたのに、何に使えるの？」
これではせっかく覚えた物が無駄になりますし、頭にもなかなか貼りません。
さらにいうと、先の見えないマラソンをしているようなものなのでモチベーション
も上がりません、いつ終わるかわからない物をずっと続けるは嫌ですよね？
なので私のブログでの最終目標は「ホームページ」を作る。
これを目標に掲げていこうと思います。
「これにより「頑張れば最低でも自分でホームページが作れる」
くらいのモチベーションは保つ事ができます。
もちろん自分で目標を考えて学ぶことが一番なのですが、もし学びたいけど
何をしたいかわからないという方がいれば、私が掲げた目標を私と一緒に目指して
もらいたいと思います。
- 勉強に使った参考書
私はこの参考書を使って勉強を行いました。
もちろん参考書がなくてもブログの内容だけで理解していただけるように努力をする
のですが、ブログで内容を読みながら参考書で補足といった具合により早く知識を
深めることができると思います。ぜひ余裕がある方はこのテキストをご購入ください。
- 使用する環境
次に使用する環境となります。実はプログラミング（コードを書く）際にはテキスト
と呼ばれる物が必要になります。
テキストというものはいわゆるメモ帳です。パソコンやケータイをお持ちの方は見た
ことあると思います。標準で入っているアプリですからね。
勘の鋭い方はわかるかと思います。そうです、実はすでにプログラミングを行う環境
は出来上がっているんです。皆さんが思っている難しい環境設定はすでに出来上がっ
ているわけなんですね。
ですがたくさんのテキストソフトがあります、それはなぜでしょう？
実はメモ帳はプログラミングを行うには少し不便がところがあります。これはプログ
ラミングに慣れてきたら実際にメモ帳を使って試してみてください。なるほどなって
思うところがあります。
前置きが長くなりました、使用して欲しい環境はGoogleが提供している
「Visual Studio Code」（VSC）です。
こちらも私が使用しているため推奨します。他にもたくさんのソフトがあるので
慣れてきたら自分にあった物を探してみてください。
ちなみにこちらのソフトは無料なので、安心して導入してもらえます。
上記はgoogleで検索した結果となります。赤く囲ったところからダウンロード
できますのでそちらをクリックしてください。
こういった画面に変わります。無料アカウント等書いてありますが無視してかまい
ません。次に「今すぐ無料ダウンロードする」を押してください。
こちらになりますね。ここからは自身で使われているOSの環境によって変わります。
私はMacを使用していますので、同じOSを使われている方は右型のりんごを押して
ください。Windowsの方は左側の４つの四角ですね。「自分のOSがわからない」
という方は自分の設定やプロパティから調べることができます。余程のことがなけれ
ばわからないことがないと思います。
さらにWindowsの方は「bit」という物が出てきています。これはお使いの環境によっ
て違いますので今一度確認をお願いします。
こちらも使用環境から確認ができますが、私はMacなので残念ながら画面を写して
お伝えができます。なので自身でお調べいただく形となっているのですが
「Windows bit 確認」
などで調べると今までの先人の方が丁寧に記載してくれています。
そちらを参考にしながら確認を行なっていってください。実はプログラミングにおい
て調べるというのはとても大事なことなので、調べるのに慣れておくといいですよ。
確認できましたらダウンロード→インストールを行なってください。Windowsの方は
「User Installar」○bit
を押してください。下の.zipは無視して一番上のボタンです。
ダウンロード→パソコンに選んだデータをいれる。
インストール→選んだデータを展開する。
小包みをもらう事をダウンロード、その小包みを広げる事はインストール
くらいの感覚でいいと思います。最初から難しく考えるとどんどん大変になります。
さて、インストールまでが終わりましたら自分のデスクトップにVSCのアイコンが
出てきてると思います。
雑ですみません。こういうアイコンです。ぜひクリックしてください。
おめでとうございます。これでソフトの導入は完成です。次は設定です。
私の画面と比べて見るとわかると思いますが、皆様の画面は英語表記になっていませ
んか？VSCはデフォルトとして英語表記になっています。
プログラミングの勉強をしたいのに英語まで・・・ってなるとうんざりなのでまずは
日本語表記に変えましょう。
こちらを押します
こちらの画面になります。この画面はVSCコードを使いやすくするためにプラグイン
つまり拡張機能をつけて自分が仕事をしやすい環境にするための場所になります。
なので、日本語表記もプラグインの１つとなります。
まだ皆様は１つとして拡張機能を導入していないと思います。今後は自分にあった
プラグインを見つけていきどんどん自分のやりやすい環境に変えていってください。
それでは赤く囲んだ場所に「Japanese」と入力してください。
ずらっと出てきます、わかりにくいですね英語だと
とりあえずは赤く囲った「Japanese Language~~」で大丈夫です。
右隣に地球儀が出てきて緑字でインストールと書かれています。こちらを押して
インストールを行なってください。
右下に英語で書かれた物が出てきました。簡単にいうと
「反映させるには再起動いるよー」
って事です。
なので青枠内の「Restart Now」を押してください。これで再度VSCが立ちあがっ
た時には日本語に変わっているはず。聞きながらなのでとても簡単だと思います。
それでは今の要領でもう１つプラグインをしてみましょう。
内容は「Open In Browser」
です。もし忘れてしまったら上記の画像と説明を見直しながら導入してください。
こちらはプログラミングでコードを打ち込んだ際に画面ではどういう物が見えるか
というのを確認するための物です。使い方は実際にコードを書いた際にお伝え
します。とても便利な機能なので入れておいてください。
ここまででVisualStudioCode（VSC）が終わりました。お疲れ様でした。
今日のまとめ
- 目標設定
- 使用する参考書
- 使用する環境
今日は上記３つを目的として活動していきました。簡単でしたか？
プログラミングというものはハードルがとても高いイメージがあります。
自分で勉強しようにも何がわからないのかわからない、といった状況に陥りがちです
私のブログでプログラミングの足掛かりにしてもらえると嬉しいです。
私はブログのレベルを
皆さんはプログラミングのレベルを
記事を追うごとに一緒にステップアップできれば嬉しいです。
お疲れ様でした。 やはでした！