プログラミング初心者がウェブカツ学習【進捗報告 8.0ヶ月】：WEBサ部 途中の巻 (No.16)
初めまして、momoです。
ツイッター（@momokatusan）です。
プログラミング初心者がウェブカツ学習で、在宅フリーランスを目指すブログです。
MacBookも初心者、WordPressも初心者、そしてプログラミングも初心者、全てが初心者ですがどこまでできるか試してみたいと思います。
受講から8.0ヶ月経ったのでブログをアップします。
はじめに
ウェブカツって何？という方に私がプログラミング学習に選んだ【ウェブカツ】についてお知らせします。
※女性割引は2019年10月末で終了しました。
ウェブカツとは
ウェブカツとはオンラインのプログラミングスクールです。
無料で仮入部もできます。
プログラミング初心者でも勉強ができるカリキュラムになっています。
しかし想像以上にハードです。
補足や過去の質問にヒントや新しい方法が書いてあるので、必ず目を通した方が良いです。
またアウトプット(OP)と復習がとても大切です。
気になる方は私のブログで今までの学習報告があります。
参考に見てみてください。
【最近の学習報告】↓
【過去の学習報告】↓
進捗報告（2020/5/16〜5/31）
進捗報告です。
プログラミングのウェブカツ学習をまとめてみました。
実績
| 期間 | 2020/5/16〜5/31 |
| 時間（合計）：ウェブカツ | 7.5（151.0） |
| 時間（合計）：補足 | 20.0（264.5） |
| 所属 | WEBサービス部（L9）
WordPress部（L5） |
今までの学習した部活（プログラミング言語）
- HTML・CSS部 入門 ←済
- javascript・jQuery部 入門 ←済
- PHP・MySQL部 ←済
- ネットワーク・サーバー部 ←済
- （WEBサービス部）途中
- （PHPオブジェクト指向部）未
- WordPress部 ←今ここ
残り16部活
振り返り
半月経つのは早いですね。
やっとWEBサービス部のLesson9に戻ってきました。
やっぱり一からプログラミングコードを書かないと、どこがどこだかわからなくなるので、一からコードを書くことにしました。
そしてWEBサービス部はまだ途中なのですが、急遽、ホームページ製作のお手伝いをすることになったので、先にWordPressを勉強してから、またWEBサービス部に戻りたいと思います。
学んだこと
CSSを全て確認する方法
HTMLは開発ツール（F12）で確認できるのですが、CSSは選択箇所しか確認できなくて、何か方法があるか探したところ「W3C」というものを発見しました。
これでCSSを全て確認できるので便利ですね。
ずっと前から気になっていたことがわかった。
CSSのコードを一部ではなく一気に全て見る方法。
開発ツールでは一部だけしか表示出来なかったけれど、「W3C」を使えば全て表示される。
VS Code内で連携の設定もできるみたい✨https://t.co/RzIH7mPg7A
— もも🍑プログラミング練習中 (@momokatusan) May 16, 2020
やっとできた✨
MacでVS Codeの拡張機能「W3C Validation」を入れられた。JRE入れてそのパス調べて(optionキー押す)、VS Codeの「settings.json」にパス追記したらできた。ポイントはJREのインストールを画像上にしたらできた。違い不明。ただしファンの音が鳴るのなぜ😅https://t.co/kRuWCFlHew pic.twitter.com/dCBMHt3uCe— もも🍑プログラミング練習中 (@momokatusan) May 17, 2020
ファイルフルパス確認
Macでファイルパスっていつもどこで探すのか迷ってしまうのですが「option」を使うことで簡単に確認できます。
【Macでファイルのパス名を探す方法】
ファイルで右クリック → optionキー → パス名をコピー
Macでファイルフルパスを簡単にコピーする方法 https://t.co/LzyxXKJtXs @D_Boxzさんから
— もも🍑プログラミング練習中 (@momokatusan) May 27, 2020
ファイル転送ツール
私はWordPressでファイルを転送する時に「FileZilla」を使っていますが「Cyberduck」や「Transmit5」がもっと便利なようです。
今度機会があれば使ってみたいと思います。
FileZilla → Cyberduck → Transmit5
が使いやすいみたい。
今度使おう✨【初心者向け】Cyberduck（サイバーダック）の使い方 | TechAcademyマガジン https://t.co/VWGoty5YCl @techacademyより
— もも🍑プログラミング練習中 (@momokatusan) May 19, 2020
VS Code（ショートカットキー）
やっぱりショートカットキーを覚えて効率的にプログラミングコードを書く作業をしたいですよね。（時短に繋げたい）
これは日々使って慣れるしかないですね。
【VS Code（Mac）】
・cmd + shift + F（全ファイル検索）
・cmd + shift + J（絞込検索）
・ctl ＋ A（カーソル前）
・ctl ＋ E（カーソル後）
・opt + ↑↓（カーソル行↑↓移動）
・cmd + Enter（カーソル行↓行挿入）
・cmd + shift + Enter（カーソル行↑行挿入）
・cmd + shift ＋ K（行削除）— もも🍑プログラミング練習中 (@momokatusan) May 21, 2020
【←↓↑↓】
キーボード日本語入力
・zh（←）
・zj（↓）
・zk（↑）
・zl（→）いい覚え方ありませんか？
— もも🍑プログラミング練習中 (@momokatusan) May 21, 2020
デバック
PHPと言えばデバック。
変数に何が入っているか調べるには「var_dump」+「pre」が縦に並んでくれるので見やすいです。
またデバックとの戦い。。。
【デバックの方法（PHP）】
「var_dump」+「pre」は「print_r」より結果が見やすい
①「var_dump」縦
echo "<pre>";
var_dump($key);
echo "</pre>";②「print_r」横
print_r($key);・$str＝string型＝文字列型（文字数）
・$key＝email, pass, pass_re
・pre=preformatted text#ウェブカツ pic.twitter.com/UvvkWlrAk4— もも🍑プログラミング練習中 (@momokatusan) May 24, 2020
Notion
必要な情報を管理するツールです。
情報が沢山で整理しきれない時に教えていただきました。
真っ白なページで自由にレイアウトできるので思っていた以上に便利です。
プログラミングコードを管理したいのなら「Boostnote」がお薦めのようです。
今度覚えていたら使ってみよう。
【Notion】
Notionを使ってみたよ✨
（必要な情報を管理できるツール）daisukeさん(@daisuke80001)に教えていただき、これとっても便利☺️
そしてこちらの動画がとてもわかりやすい！
Notionの使い方徹底解説！Notionの魅力と基本的な使い方を解説【前編】 https://t.co/xQXUvabP8P @YouTubeより pic.twitter.com/s0knkUzgZ8
— もも🍑プログラミング練習中 (@momokatusan) May 29, 2020
アウトプット
商品詳細画面
WEBサービス部の商品詳細画面。
クラス名があり過ぎてどこがどこだがわからなくなったので背景色をつけてみました。
出来上がってみたらデザインが。。。
気にしないでください。
今朝の問題点解決✨
1. ヘッダーとフッターの幅＝フッターのwidthコメントアウト（これちょっとよくわからない）
2. 画像サイズ違い＝元画像による
3. panel-title有無＝class名間違いとりあえず次に進む🏃♀️ pic.twitter.com/bhwgHfhjcy
— もも🍑プログラミング練習中 (@momokatusan) May 20, 2020
ユーザー登録画面
これはまだMYSQLと関連付いていません。
また今度仕上げていきます。
【236日目】
今日: 0.0h ［補: 2.0h］
合計: 143.5h ［補:258.5.h］
WEBサ部 L9 復習ユーザー登録の下地を作成したから明日はphpでDBと関数のコードを書く。ひたすらコードを書く。#ウェブカツ #ウェブカツ女性割引#フリーランス#プログラミング初心者#駆け出しエンジニアと繋がりた6 pic.twitter.com/LJCapJndDF
— もも🍑プログラミング練習中 (@momokatusan) May 22, 2020
WordPress テーマ作成
WordPressのテーマ作成です。
WordPress独自のタグがあることを知りました。
まだ全部学習していませんがテーマの仕組みがわかって面白いです。
このブログもWordPressですが、事前に触っていて良かったなと思いました。
【242日目】
今日: 1.0h ［補: 0.0h］
合計: 145.0h ［補:264.5h］
WordPress部 L3WPでテンプレート作成中。
index.php、style.css、screenshot.jpgがあればできる。
面白い✨#ウェブカツ #ウェブカツ女性割引#フリーランス#プログラミング初心者#駆け出しエンジニアと繋がりたい pic.twitter.com/OvvKZZaeFJ— もも🍑プログラミング練習中 (@momokatusan) May 26, 2020
お役立ちサイト
お役立ちサイトはこちら→ フリーランス
便利機能（ショートカットキーなど）
ショートカットキーやパソコンの便利機能などをまとめました。
さいごに
この半月はエラーと戦っていた感じです。
次回はどのようなエラーと出会うかな。
（エラーは成長するチャンスっていうけれどできれば出会いたくないな）
そして2週間あればWordPress部は終わるかな。
WEBサービス部が気になるので早く戻りたいと思います。
おまけ
Mac
Macを購入するならどれがお薦めか投票で聞いてみました。
「Mac book pro 13インチ」がお薦めのようですね。
外に持ち出すことが多い人には良さそうですね。
プログラミングをやるのにMacのどれがお薦めですか？
基本は家ですが、外に持ち出すこともあるかな。それだとbookかな。
サイズはやっぱり大きい方が見やすいかな。— もも🍑プログラミング練習中 (@momokatusan) May 18, 2020
Mac（PTA割引）
MacがPTA割引で買えるそうです。
PTAをされている時がお得に買うチャンスですね。
Adobe CCは残念ながらPTA割引はなさそうでした。
adobe ccを購入予定です。
PTA役員で割引購入できると聞きました。
購入された方います？またMacもPTA役員割引があるらしい。
知らなかった👀https://t.co/69Ub4b27nc
— もも🍑プログラミング練習中 (@momokatusan) May 18, 2020
それではまた。
半月後にお会いしましょう。
