メインコンテンツへスキップ
見出し画像

プログラミング学習記録③

    こんにちは!
    顔文字の使い方がおばちゃん全開と娘に言われた、ちこりです*\(^0^)/*

    完全未経験の文系アラフォー女子が独学でプログラミングをどこまで学べるか!?
    学習記録3回目。

    目標はウェブサイト制作のスキルを身に付けること。
    私は基本的には、しょーごさんのブログ記事を軸に学習を進めています。

    0.前回までのあらすじ

    ・Manaさんの書籍『1冊ですべて身につくHTML&CSSとWebデザイン入門講座』で基礎学習
    ・ドットインストールの無料の講座のみ受講
    ・模写コーディング → 撃沈...orz
    ・Progateのhtml CSS講座(有料)を受講
    ・模写コーディング再挑戦! → 成長を実感〜^^
      ▼
    次は Sass と jQuery とやらを始める!

    1. Progateにて、jQueryの学習

    【2020年7月】
    jQuery(ジェイクエリ)とは、どうやらJavaScript(ジャバスクリプト)をより短く簡単に、使いやすくした書き方...みたいなもののようです。
    WEBページ上で写真をスライド表示したり、クリック一つで切り替えられるタブを作るなど、動きのあるページ作りができるみたい。

    まずはProgateのjQueryコースを1周。
    htmlやCSSとは何やら違って、グッとプログラミングらしくなってきたな!と感じます。ワクワク♪

    このコースは、先にjavaScriptコースを学んでいることが前提で作られているようです。
    javaScript未修だと、ちょっとよくわからない部分も出てきて...。
    しょーごさんのロードマップからは一時脱線になるかも?ですが、やはりここでjavaScriptコースも合わせて受講しました。

    実家に帰省中だったので家事もせず(コラ)、夜中まで集中して2日で完走。

    2. 書籍「jQuery標準デザイン講座」

    【2020年7月】
    この書籍は、実際に手を動かしてコードを打ち込み、サンプルサイトに動きを付けながら学習できます。
    また、図解がとても分かりやすく、段階的に解説してくれるので、挫折せずに進めることができました。

    画像1

    3. MacBookがやってきた

    【2020年8月】
    ここでついに、自分用のパソコンを購入!

    それまで借りていた夫のパソコン(HP製、Windows10)。
    パワーやメモリなど機能は十分でしたが、ディスプレイに不満が。
    iPhoneで見るのと色味や荒さなどが全然違っており、写真の加工などは無理って感じで...。

    プログラミングと並行してフォトショップやイラストレーターなどのデザインソフトも勉強中で、ディスプレイの綺麗なパソコンが必要と感じていました。

    コロナの定額給付金が支給されたこともあり、思い切ってMacBookに。
    ちなみにスペックは↓

    MacBook Pro 13インチ(2020年製)
    プロセッサ 2GHz クアッドコアIntel Core i5
    メモリ16GB

    ディスプレイも美しく、サクサク動いてくれて最高に満足のお買い物でした。

    ここまでは順調だったんです、ここまでは...!

    4. なぜか断捨離にハマる

    【2020年8〜9月】
    新しいパソコンを買ったことで環境を整えたくなり、家の片付け、模様替えにハマりすぎて、一回やすみ。

    なんと1ヶ月以上、断捨離に夢中になっておりました(-▽-;)
    その話はまたそのうち書かせてくださいw

    5. Sassの学習開始

    【2020年9月】
    ひとまずProgateで概要をサクッと勉強。
    Sass(サス)は、CSSをより効率的に書くための言語、とのこと。

    どうやらSassを使うと、

    ・同じセレクタを何回もコピー&ペーストせずに「入れ子」にして簡略化できる。
    ・色や余白などの「スタイルの集まり」に名前をつけておき、別の場所でもそのスタイルたちを呼び出せる。

    などなど、他にもたくさんのメリットがあります。
    使い方に慣れれば時短になるし、後から修正する時にも管理しやすそうです。

    本来はSassを使うには、コマンドライン=いわゆる「黒い画面」でむずかしい設定をする必要があります。
    ですが、VScodeの「Easy Sass」という拡張機能を使うことで、黒い画面を起動せずに簡単にSassを使うことができます。
    ここは迷わずEasy Sassを使い、サクサク学習を進めた方がいいと思います。

    ですが...私はこの時、なんだか理解ができずモヤモヤして、結局黒い画面と向き合って開発環境構築をがんばりました。
    その時に参考にした本は『ちゃんとしたプロになる HTML+CSS実践講座』です。(解説が丁寧ですごくいい本でした!)

    画像2

    環境構築をやり遂げてみて思ったことは、

    「やっぱりよくわからない!」

    でしたw
    でもいずれ勉強しなければならないことだし、黒い画面をさわってみたのは良かったと思います。

    Sassに関しては、なんとなく分かったけど、あとは実際に使って覚えるしかなさそうです!
    次はSassとjQueryを使った模写に挑戦します。

    6.その後

    【2020年10月〜】
    実はここでプログラミング学習は一時中断しています。
    それはデザインの勉強にウェイトを移していたため。

    ウェブサイト制作にはどちらも必須スキルなので、スクール等では両方をバランスよく学べるカリキュラムが組まれているものと思います。
    ここが独学のやっかいなところで、自分でうまく計画を立てて学んでいかなければいけません。

    私は計画を立てるのが下手なんですよね〜(^^;

    今日はこの学習記録を書いたのを区切りに、プログラミング学習も再開しようと思います。
    この後はデザインの学習とセットで、プログラミング学習記録も少しづつ更新していきますね。

    読んでいただき、ありがとうございます!
    それではまた〜(^o^)/



     
     
    デザインとプログラミングを独学中のアラフォー女子(一児の母)。イラストとか、勉強記録とか書きます。

    あなたへのおすすめ