ウェブカツ プログラミング学習 6か月経過
ウェブカツでプログラミング学習(女性割引)を始めて半年。
ウェブカツ界隈、激動な半月でしたね。
私の頭もぐるぐる激動しまして、退部届を出しました。
10月23日に退部届を提出したので、退会規約により12月31日に正式退部となる予定です。
この話題は、ここでは語りません。
ウェブカツに関する不満やネガティブな意見をブログに書くと強制退部の対象になるらしいので。
( *強制退部・・・サービス即停止&タイミングによって最大2.5か月分の学費がチャージされるルール。)
ハブより強力な毒を吐きたい気分ではありますが、ルールに従ってポジティブで役に立つ話題を書きましょう。
今回は半年間プログラミングを勉強してきた私が、個人的に役に立ってるなーと思うツールや技術ブログなどを紹介したいと思います！
ついでにウェブカツ退部後に利用してみたいなと考えているプログラミング学習サービスもご紹介します。
プログラミング総学習時間
247h / 171days (Avg.1h26m / day) ➡ 279h / 187days (Avg.1h29m / day)
前回の記事はコチラ
プロフィールはコチラ
オススメ技術ブログ
HTML CSS クイックリファレンス
HTML CSSの教科書みたいなもんです
クリエイターズボックス
デザイン HTML / CSS WORDPRESS
説明も分かりやすく、サイトデザインも素敵です！めっちゃお世話になってます。
サルワカクン
デザイン HTML / CSS
とにかく分かりやすーーーい
バシャログ
スマホサイト制作 HTML / CSS JavaScript WordPress PHP gulp
情報量ハンパない
coliss
デザイン
技術というか、お得情報やツール紹介が多い
Webliker
デザイン HTML / CSS
まだ情報少ないけど、ウェブサイトそのもののUIが素晴らしくて勉強になるし、説明も分かりやすい。今後の発展に期待！
php junky
PHPに特化されているむちょこさんのブログ。
WEBST8
https://webst8.com/blog/wordpress-theme-howto-make/
WordPress オリジナルテーマの作り方をSTEP BY STEPで解説。ただしバージョンは4.9.1
オススメ便利ツール
Font awsomeだとかgoogle fontとかはみなさん使っていると思うので省略しますね。
Icooon mono
フリーアイコン配布サイトは数あれど、商用利用OK/数が豊富/jpgもpngもaiもsvgも全部対応している無料サイトはここだけかも？超利用しています。
Web色見本
配色サイトもたくさんあると思いますけど、シンプルで感覚的に使いやすいこのサイトが今のところ一番気に入ってます
ホームページのパーツジェネレーター
cssからjsまで、こんなん無料でいいんですか？と疑いたくなるほどあらゆるパーツが無料で作れる
Clippy
https://bennettfeely.com/clippy/
画像を自由な形に切り取れる(css吐きだし) 感覚的に使えて超便利！
Keyframes
こちらはアニメーションの動きをシュミレート＆css吐きだししてくれる神サイト。
Can I use
cssのどのコマンドがどのブラウザー(どのバージョン)に対応しているか教えてくれる。
チートシート系
*バージョンはご自身で確かめてください。
CSSのチートシート
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet
正規表現チートシート
https://yoshikawaweb.com/regex-cheat-sheet-for-text-editor.html
ワードプレスのチートシート
https://www.webcreatorbox.com/tech/japanese-wordpress-cheat-sheet
Boostrapデザインチートシート
https://webdesignfacts.net/entry/bootstrap-uitemplate10/
VS code ショートカットキー for win
https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
JavaScriptとかPHPなんかは使い方分からないと意味がないのでチートシートではなくリファレンスを参照するのがいいと思います。
js STUDIO
退部後に使ってみたいサービス
今後使ってみたいというより、ウェブカツやってなかったらこれやってたな、と思うサービスかな？
ドットインストール
★動画学習系★
プログラミングやってる人なら誰でも知ってるあれ。
入部前にもやっていたけど、月1000円のコスパは最強クラスなので、先端技術アップデートも含め長期的にお世話になりたい
最初苦手だった喋り方も、今や心地いいかも？と思えてきた(笑)
30daysトライアル
★ロードマップ系★
https://tokyofreelance.jp/daily-trial-map/
さすがにゼロからはやらないと思いますが、30daysトライアルの3rdまでやりきるとどのくらい力がつくのか、気になる。
かなり評判良さそうです。
X-hack勉強会
★テーマ別勉強会系★
私の住んでいる場所で開催があるかは分かりませんが機会があれば一度参加してみたい。
参加者の評判もいいし、代表の考え方に共感を覚える部分もあるので。
Teratail
★問題解決系★
これも超有名ですが、プログラミング技術に関する質問が完全無料で出来るサービス。まだ使ったことないけど、スクール出たら積極的に使ってみたい。
むしろここで初学者の質問に解答出来るくらいの力をつけたい。
Stack overflow
★問題解決系★
https://stackoverflow.com/
Teratailと同じようなサービスですが、こちらは世界規模。日本語版も盛り上がってる。
ここの本家(英語)で解答出来るくらいになったら最強。
Rails tutorial
★テキスト学習系★
Rubyまで手を出すかは決めてないですが、もしやるなら、
ProgateでRubyの基礎学んで、ここのサイト2～3周すればある程度使えるようになりそうなので、ウェブカツのRuby部は飛ばしてもいいかなと。
Free code camp
★パネル学習系？かな★
ボリュームがすごすぎるので逆に今からはやらないと思いますが、これから勉強始めよう！って方で英語は問題ない！って人ならオススメします。
口コミを見る限り、言語のカバー範囲もコンテンツの深さもありそうで、"完全無料"です。
"無料"と謳いながら結局最後は課金パターンが殆どですけど、これはほんとに完全無料みたいです。
Paiza ラーニング
★スキルチェック+動画学習系★
超有名どころですけど、プログラミングスキルチェック挑戦してみたいですねー。
書籍
いろいろ読んでみたいプログラミング関連書籍もたくさんあります。
ウェブカツ受講中は遠回りすればするほど学費が高くなっていくので書籍はスキマ時間だけに留めていたけど、退部したらゆっくり読んでいきたいです。
昭和生まれには紙が一番しっくりくるのよ(笑)
コードレビューと共同開発
「学習する」ということにおいては独学で十分だと思う反面、就職しない前提で独学を続ける上で不安な面は下記2点かなと思います。
①自分の書いたコードがいわゆる「良いコード」なのかが分からない。
②共同開発の経験がない
①に関して現状ではメンタhttps://menta.work/ が一番手軽かな、と思います。メンタ自体は先日個人情報流出問題がありましたが、メンタが売れたのでおそらく似たようなサービスが今後も増えると思います。
②は海外サイトだと共同開発が出来るサービスを数件みつけたのですが、日本語環境においては共同開発の実績を作れるようなサービスは非常に少ない状況なのかな、と思います。
じゃあ、作っちゃう？というのも一つの手かと。
共同開発って要は一緒にやる仲間がいれば出来ることですよね。
ウェブカツ中退生集めてslackグループ作れば準備完了？
むしろ「プログラミング学習者が共同開発経験が出来るサービス」をみんなで共同開発しちゃえばいいんじゃないでしょうか？(笑)
まぁ発案するのは簡単でして、実際はそこをまとめるのが大変だと思うので、みんなを引っ張れるリーダーは必要かなと思いますが。
まとめ
あとYouTubeやUdemyなんかを挙げればキリがないのですが・・・
無料～数千円でも十分学習できる方法は山ほどあるんですね。
右も左も分からない状態であれば30DAYSトライアルのようなロードマップ系をやってみて基礎力と自走力つけてから、自分に必要なプログラミングスキルをあぶり出して、ピンポイントで動画学習や書籍でスキルアップ、その後ツマってしまったらTeratileやメンターで質問しつつレベルアップしていくのがベストかなと思います。
今後の学習
正式退部となるまであと2ヶ月で何をやるべきか考えました。
全部をやるのは無理なので 、vue.jsとLaravelに集中することになるかな？と思っています。
私はバカなのでいらん一言発してしまい、年末待たずに強制退部にされるかも知れませんが。
正直今の環境でモチベーションを保つのが難しいので、そうなったらなったで、次の道に早く進めてラッキーくらいの気持ちでいようとは思っています。
たぶん凹みますけどね。実際お金は取られるんで。
最後に
人生において、自分にとっては何が一番大事なのか、どういう人間になりたいのか、
そうなる為にはどんな場所に身を置くべきなのか、
それを見つめなおすきっかけになれたのは良かったと思います。
ウェブカツ プログラミング学習 5.5か月経過
ウェブカツでプログラミング学習(女性割引)を始めて5.5か月になりました。
前回の記事はコチラ
プロフィールはコチラ
もーすぐ半年！
8月にjs上級までザーーーっと視聴して、再び入門編に戻ってきました。
php入門辺りまではスラスラ復習し、html中級/上級部で出てきたcss設計やsassなどの要素も取り入れたwebサービス第二弾mpboardを開始しています。
mpboardの構想を始めたのが9月頭なので、だいぶダラダラしすぎだね。
時にはスピード感をもって全力で取り組まなければ、、と頭で分かっているけど、「今」という時間も全力で楽しみたい！という気持ちも捨てきれず、ハッと気が付いたら旅行やら食事会やらの予定を詰め込んでしまうダメ受講生。。。
私事ですが、10月前半は、帰省をしていました。
おかげ様で勉強の方は全然はかどらなかったわけですが、
社長、フリーランサー、エンジニア、webマーケッターなどを含む十数名の友人達と会って語り、自分の考えを客観的に分析する機会を得ました。
ウェブカツに入部して半年弱、何となく雰囲気に飲まれていき、「プログラミングで稼ぐこと」や「卒業すること」が目標にすり替わっていたように思う。
でも、プログラミングは手段であって目標ではない。
正直IT業界に就職したい気持ちもない。
あくまでも自分の理想とするライフスタイルを作るために、プログラミングという手段は相性が良さそうだからやってみよう、って事だった。
それを思い出したら自分のやるべきこと、進むべき方向性は自然と見えてきた。
ここから 勉強の方向性は少し軌道修正が必要だけど、プログラミングそのものはオモシロいしどんな道を歩むとしても使えて損はしないスキルだと思うので、ひとまずウェブカツのカリキュラムはやり切りたいな。
しかし、ウェブカツ生のアウトプット力にはほんと脱帽です。特に制作時間に関しては、え？ゼロいっこ書き忘れてない？とマジで思うことの方が多く、「周りがスゴイより私がすごいセンスないのか(^-^;)」と正直ちょっと凹むこともありますけども、自分には自分にしか出来ないアプローチ方法があるはずなので、自分のやり方で自分が進みたいと思う方向に着実に進んでいくのみ！と言い聞かせてる。
プログラミング総学習時間
236.5h / 156days (Avg.1h30m / day) ➡ 247h / 171days (Avg.1h26m / day)
15日で10時間。。。後半巻き返すぞー。
前回までのプログラミング学習TODO
- Webマーケの本を読む
→7割読んだ。「Webマーケッターボーンの激闘」漫画タッチでサクサク読めるのに、中身はしっかりしていて、とてもオススメです。 - jQueryとphpの基礎を叩きこむ(ウェブカツ、progate)
→jQueryは相当使いこなせてきてる。phpはまだまだだな。 - コーポレートサイトのレスポンシブ化&多言語化
→作業が進むにつれ追加コンテンツが入ったりでまだ7割。
次回までのプログラミング学習TODO
- アウトプットmpboard(掲示板&すけじゅーる管理)終わらせる
- コーポレートサイト レスポンシブ化&多言語化
前半サボった分、後半は30時間目標！
最後に・・・
今月前半はプログラミングに触れない日の方が多いかったので、すっかり勉強癖が抜けてしまい、正直プログラミング学習へのモチベーションが下がりつつある。
後半はコードを書くことに集中してモチベーション復帰を図ってみよう。
ウェブカツ プログラミング学習 5か月経過
ウェブカツでプログラミング学習(女性割引)を始めて5か月になりました。OY(オーイエス)
女性割引の条件であるブログとTwitterはいまだに慣れませぬ。
肝心のプログラミングの方も、ぶっちゃけると、5か月も一生懸命頑張ってるのに、この程度の事も出来ないのか、と自己嫌悪に陥ることが多い日々です。
プログラミング総学習時間
201h / 142days (Avg.1h25m / day) ➡ 236.5h / 156days (Avg.1h30m / day)
※ついに目標の1日平均1時間30分達成！あとは継続あるのみ。
目次
前回の記事はコチラ
プロフィールはコチラ
山のテッペンを見に行く
ウェブカツのコンテンツはものすごいボリュームになっている。
プログラミングで年商1000万円を謳っているわけなので、覚える事が多いのは当たり前なんだけど、
ゴールが見えないのに走り続けるのってシンドクないですか？
せめて今自分が3合目なのか5合目なのかテッペンまであと少しなのか、くらいは知りたくないですか？
そして出来れば、これから進むプログラミング道がどんくらい激しいのか、知っておきたくないですか？
私はウェブサービス部のアウトプットを1回やった後、この先が見えないモヤモヤ(あと何か月くらいで"学習"という領域から抜け出せるのか?)ばかり気になってしまい、「復習しないと、アウトプットしていかないと。。。」と思いつつ、
はっ！ と気が付いたらjs上級まで動画見ていました。
ウェブカツでは各部が終わったらアウトプットしてから次の部へ、というやり方を推奨しているので、私のやり方はNGだと思います。
ですが、私個人としては、今後勉強する部のおおまかなボリュームや難易度を知ることで、どんな風にプログラミング学習を進めるか、何が大切かが見えてきたので、見ておいて良かったと感じています。
ただ、顧問も先輩も言われているように、手を動かさなければ身につかない、のは事実で。
私の場合、html上級が終わったところで一旦、gulp,sass,flocss辺りは実際にコード書いてみたのですが(死ぬほど苦労した)、その後の部活でそういう自分が苦労した部分に関してはさほど抵抗なくスッと入ってくるんですよね。
ウェブカツのカリキュラム構成は本当によく出来ていて、htmlやjsの基礎がなければウェブサービス部は理解は出来ないし、phpの基礎がなければワードプレス部は理解できない。
1つ1つの部活をしっかりと自分のものにしてから次の部の動画を見ることに意味がある。
そして理解する為には、どれだけコードを書いて、トライエラーを繰り返してきたか、に尽きる。
ですので、チートをした私が言うのも何ですが、もし先の部活を覗きに行くとしても、あくまでもボリューム感や難易度を確認して今後のプログラミング学習計画をボンヤリと作るくらいに留めておいて、「勉強」は1つ1つの部活を丁寧にやっていくがベストだと思います。
前回までのプログラミング学習TODO
- sass, flocssを駆使したアウトプットmpboardのマークアップを全て終わらせる
→終わったかと思いきや、DB設計を考えてみたら抜けコードが大量にあることが発覚。
- mpboardの機能実装の為、DBテーブル設計
→OK。 - photoshopチュートリアル動画みて、基礎を習得
→やらなかった。 - progate PHP
→やらなかった。 - ウェブカツ php/MySQL部とネットワークサーバー部の復習
→やらなかった。 - WordPressアウトプット用のコーポレートサイトのマークアップ全ページ+レスポンシブ化
→まだ途中
いつも計画の半分も出来ないので計画立てる事自体が意味あるのか疑問に思えてきた(^-^;
次回までのプログラミング学習TODO
でも一応書いておく
- Webマーケの本を読む
- jQueryとphpの基礎を叩きこむ(ウェブカツ、progate)
- コーポレートサイトのレスポンシブ化&多言語化
来月頭は実家帰省しないといけないので、ちょっと手が止まりそうです。
その分を本読んでカバーしようかと。
最後に・・・
js上級まで覗いてみて感想ですが、最後の難易度やべぇ。
たぶんだけど卒業生であっても、backbone.js、React.js、Vue.jsの概要をボヤァと掴みつつ、その中から興味ある1つないし2つ選んで集中的に勉強しているのかと。(そう思いたい)
私の場合、情報維持能力(覚えたことを覚えたままにしておく)が激しく劣化しているようなので、卒業までに短くともトータル1年はかかりそうです。
プログラミング、舐めていたよ。ごめん、もう舐めてないからもっと優しくして。
ウェブカツ プログラミング学習 4.5か月経過
ウェブカツでプログラミング学習(女性割引)を始めて4.5か月になりました。OMG(オーマイガー)
ウェブサ部で半コピペのアウトプットを1本やったあと、オブジェクト指向部からhtml/css上級までガガガーっと見て、一気に全部のアウトプットをやってしまえと企んだレイジーな私です。
そして新しいプログラミング技術が多すぎて見事にハマっています。
ajax、npm、brawserify、gulp、sass、flocss・・・・ぐるぐるぐる
ウェブサ部はボリュームこそヘビィーだけど、やることや手順が明確だった。
今回はどこから手を付けるべきのかを考えるのが大変だった。
gulpの動画もある
flocssの記事もある
sassの本もある
だけど、全部のスキルを使ってゼロから作る際のフロー全体像が掴めない。
と前置き長くなりましたが、今回は上記の新しい知識を使って掲示板的サービスを作るザックリ手順をまとめたいと思います。
(間違っていたらご指摘頂けるとありがたいです！)
プログラミング総学習時間
184h / 124days (Avg.1h29m / day) ➡ 201h / 142days (Avg.1h25m / day)
※デザインの時間は含まない
目次
- 今回使用する予定のスキル一覧
- 手順①アイディア出し
- 手順②画面設計
- 手順③環境構築
- 手順④flocssの考えを元にディレクトリ構成
- 手順⑤reset.scssやvariable.scssなどの基本設計
- 手順⑥デザインカンプを元にマークアップ+class命名
- 手順⑦DBのテーブル設計
- 手順⑧php埋め込んで機能実装
- 前回決めたプログラミング学習TODO達成度
- 次回までのプログラミング学習TODO
- 最後に・・・
前回の記事はコチラ
プロフィールはコチラ
今回使用する予定のスキル一覧
数ある記事の中でもわかりやすいと感じたものをリンク張りました。
- ajax
画面遷移を生じない非同期処理する仕組み。
https://qiita.com/hisamura333/items/e3ea6ae549eb09b7efb9
- npm
いろんな便利ライブラリが詰まったパッケージ
https://qiita.com/lelouch99v/items/05f973df9c54cec23419
- brawserify
jsライブラリ(jQueryとか)や外部ファイルを簡単に読み込んでビルド(合体)させたり、バージョンの違いを勝手に解決してくれるスゴイやつ
- gulp
scssファイルをcssファイルにコンパイル(編集)してくれたり、画像を自動圧縮してくれたりするスゴイやつ
https://www.webcreatorbox.com/tech/gulp
- sass
cssをプログラミングっぽく効率的に書けるようにした言語。変数や関数なんかも使える。
https://qiita.com/m0nch1/items/b01c966dd2273e3f6abe
https://qiita.com/cotolier_risa/items/33ca1dcd700927dd7ba0
- flocss
ぐちゃぐちゃになりがちなcssに保守性を高める目的で決められたcss設計ルールのひとつ。
https://qiita.com/super-mana-chan/items/644c6827be954c8db2c0#l-headerscss
手順①アイディア出し
なにはともあれ、どんなものを作るのか。
それを作る為にはどんな機能が必要か。(ログイン機能、掲示板機能 etc)
手順②画面設計
今回は初めて、ワイヤーフレームからプロトタイプまでadobe XDを利用して作ってみました！
こんなすげぇの無料でいいの…(@_@)っちゅーレベルですばらしいソフトです。
学習コストもめちゃ低い(動画30分～1時間くらいみれば使いこなせるレベル)ですので、超おすすめです！
ぶっちゃけデザイナー希望じゃなければphotoshop覚えなくてもいいんじゃないかと。。
1. ワイヤーフレーム(骨組み)
□とか〇使ってモノクロでざっくりとした配置を考える。
2.モックアップ(デザイン)
色や画像を入れ込む。余白なども設定する。
見た目はほぼ完成図になるように。
3.プロトタイプ(画面遷移や変化)
XDを使うと、プロトタイプまで超手軽に出来ちゃいます。
プレビュー画面でリンクをクリックすると実際にリンク先ページに飛べるので、ほぼほぼ実際のウェブサイトと同じようなカンジです。
手順③環境構築
プログラミングで一番大変なのは環境構築、というけど、なるほど、なかなかメンドクサイ。
1. npmをインストールする
package.jsonという名のパッケージ管理ファイルが勝手に生成される。
このファイルがあれば、複数人数で同じ開発環境を一瞬で作れちゃう。
そしてnpmには大量の便利ツールが詰まっているので(福袋みたいなもんかな)、そこから必要なライブラリのインストールが出来る。
https://qiita.com/hashrock/items/15f4a4961183cfbb2658
2. brawserifyをインストールする
上記npmからインストールできる。npmリンク記事参照。
3. gulpをインストールする
同じくnpmからインストールできる。
https://ics.media/entry/3290/ (この記事はだいぶ分かりやすい)
4. gulpを利用してsassをコンパイル(自動処理)出来るようにする。
同じくgulpインストールの記事リンク ↑ 参照。
ついでに画像圧縮やcssファイル圧縮なんかも出来るようにgulp.jsファイルを編集すると良いかと。
https://qiita.com/7110/items/a9ea618f9b9c2687c949
https://gulpjs.com/ 公式ドキュメントもGO
手順④flocssの考えを元にディレクトリ構成
ここ、一番ハマったとこ。
私の苦悩話はハブきますが、記事読みまくって特に参考になったリンクだけ貼ります。
https://qiita.com/super-mana-chan/items/644c6827be954c8db2c0
→一番わかりやすく簡潔にまとまっているかな
https://github.com/tacrow/flocss-demo
→概念は理解できたけど実際にファイルに何を書くんじゃ！命名どうするんじゃ！って時にデモのサンプルコードが超有り難い。
https://webnaut.jp/technology/20170407-2421/
→flocssを発展させた独自ルールですが、図解やサンプルコードがあり俯瞰して理解するのに役立った。
それで、自分が作りたいwebサイトを元にどんなファイルが必要になるかな？と洗い出してみました。。
今回は実験的にcacooのマインドマップを利用してみました。(編集が割と手間だったので、自分の頭の整理だけならExcelや手書きメモで十分かと。)
こちらを元に実際にディレクトリと空のscssファイルを作っておきました。
慣れている方ならマークアップをしながら必要なscssファイルを作成していくのかも知れませんが、初心者はまず頭の整理する為にディレクトリを先に作っちゃうことをオススメします。
手順⑤reset.scssやvariable.scssなどの基本設計
reset.scssなどはおそらく自分で書くよりも「よくあるパターン」を書き込んだファイルを拾ってきちゃうのが通常のやりかたっぽいです。
http://html5doctor.com/html-5-reset-stylesheet/
variable.scss(変数を詰め込んだファイル)も、デザイン出来た時点で内容は変わらないはずなので先に作っちゃいます。
$site-colorとか$break-pointとかね。
たぶんlayoutも最初に全部作っといた方がいいかと。
手順⑥デザインカンプを元にマークアップ+class命名
(※ちなみに私は今現在ここでツマっております)
htmlを書く際にflocssの概念と命名ルールに沿ったclass名も一緒に考えると頭パニくることが分かったので、とりあえず1ページ分のhtmlを書きだしちゃいます。
そしてルールに沿ったclass名を付与します。
で、そのclass名が該当するscssファイルにスタイルをマークアップします。
※この時gulp.watchでリアルタイムにブラウザ反映させましょー。
手順⑦DBのテーブル設計
この辺からはまたウェブサ部と同じですね。
手順⑧php埋め込んで機能実装
これも。
まだ作業途中なので全部やり切ってから再度ベターなフローを考えたいと思います。
前回決めたプログラミング学習TODO達成度
- ウェブカツhtml/css上級までの全動画を視聴
→やった(^^♪ - ウェブカツphp/MySQL部とネットワークサーバー部の復習
→やってない( ;∀;) - progateのPHPとSass
→Sassやった、PHPまだ(;^ω^) - WordPressアウトプット用のコーポレートサイトのhtmlを全ページ終わらせる
→あとちょい！(^-^;
次回までのプログラミング学習TODO
- sass, flocssを駆使したアウトプットmpboardのマークアップを全て終わらせる
- mpboardの機能実装の為、DBテーブル設計
- photoshopチュートリアル動画みて、基礎を習得
- progate PHP
- ウェブカツ php/MySQL部とネットワークサーバー部の復習
- WordPressアウトプット用のコーポレートサイトのマークアップ全ページ+レスポンシブ化
うーん、詰め込みすぎだな(^-^;
最後に・・・
最近ウェブカツから多くの卒業生が出ていて、中には幼児のかーちゃんだったり、私とプログラミング学習日数変わんない人もいて、まじリスペクト過ぎる。
私はあと半年やっても卒業できる気がしない。。(T_T)
割と学習能力高いほうかなと思っていたけど、今までがただの井の中の蛙だったことに気が付く。
でもやっぱり大海で飛び跳ねたいので、ここから更なる気合いを入れてプログラミング学習に精を出したいと思います！
ウェブカツ プログラミング学習 4か月経過
ウェブカツでプログラミング学習(女性割引)を始めて4か月になりました。
ネタが思いつかぬままブログ更新時期に入ってしまったので、プログラミング学習計画について再考&深掘ってみようと思います。
目次
前回の記事はコチラ
プロフィールはコチラ
現在の状況
html&css上級途中
※オブジェクト指向部～html&css上級までは動画を流し見しただけなので、実力的にはwebサービス部2周目レベル。
プログラミング総学習時間
163h/110days(Avg.1h29m/day)➡184h/124days(Avg.1h29m/day)
必要なプログラミング学習時間を考える
スタートラインに立つために必要なスキル
スタートラインがどこなのかっていうのは、学習目的や年齢や生活環境によって人それぞれだと思うけど、私にとってのスタートラインは、
「プログラミングの勉強をしています！」
から
「webエンジニアです！」
と自信を持って言えるようになることかな、と思う。
私が「プログラミング学習者」から「webエンジニア」になるに当たって、必要だと思うスキルのは以下。
illustorator / photoshop / XD
- 基本操作がこなせる
html / css
- 基本処理(レスポンシブ)はグーグル先生に頼らずサクサクかける。
- SassとBoostrapが使える
js
- よーく使う機能は調べず書ける。
- それ以外はグーグル先生に聞きながらサクサク書ける。
- jQuery以外のモダンフレームワークを1つ使えるようになる。
php
- 簡単なサービスがゼロから作れる。
- モダンフレームワークを1つ使えるようになる。
- 生のphpが読める。
wordpress
- WordPressのオリジナルテーマが作れる。
- 既存テーマのカスタマイズが出来る。
現在達成率20%くらいかなぁ。。。
もう少しスピードあげてかないとオバァになっちゃうね。
必要スキルを取得するまでの学習時間
本格的に学習を始める前は、プログラミングスクールの広告とかブログとか見ながら、何となく300時間くらい？？というイメージだったけど、全然甘かった。
ピチピチ20代が月給20~30万くらいで就職を目指すなら300時間もやれば十分なのかも知れないけど、自分が既にほぼオバァだって忘れてた。
4か月間プログラミングをマジメに勉強した私が思う、自分に必要な学習時間はズバリ！
800時間
本当は1000時間と言いたいところだけど、ウェブカツという良教材に出会えたので、200時間分くらいは得しているじゃないかと。
逆算して計画する
ではいつになったらスタートラインに立てるのか。
800時間 ÷ 50時間(1ヶ月の平均勉強時間) =16か月 - 現在4か月 ≒ あと1年くらい
うーーーーーん、長いわ(^-^;
さすがに長いんで、あと半年くらいやったらランサーズとかでプログラミング実践武者修行を入れてみたいなーと考えています。
前回決めたプログラミング学習TODO達成度
-
基礎復習とWordPressのアウトプットを全力で！
➡ほんとに有言不実行人間ですね。計画はころっさくっと変えて、ガンガンレッスン進めてます。
- Progateにてhtml/css、js、j-Query、PHP、Command Line、SQLをざーっと全復習(※忘れてたものはメモる)
➡html/css、js、j-Query、Command Lineまではやった - ネットワークサーバー部までのウェブカツ全動画を再視聴(※忘れてたものはメモる。読んでなかったリンクブログも読む。)
➡html/css、js、j-Queryまではやった - WordPressアウトプット用のコーポレートサイトのhtmlを全ページ終わらせる
➡全6ページ中2ページまで。最近流行っているらしいブロークングリッドレイアウトがどうしてもやりたくて、膨大な時間を費やした。
- Progateにてhtml/css、js、j-Query、PHP、Command Line、SQLをざーっと全復習(※忘れてたものはメモる)
次回までのプログラミング学習TODO
- ウェブカツhtml&css上級までの全動画を視聴
- ウェブカツphp・MySQL部とネットワークサーバー部の復習
- progateのPHPとSass
- WordPressアウトプット用のコーポレートサイトのhtmlを全ページ終わらせる
最後に・・・
今プログラミングに必死だけど、ぶっちゃけた話、人生が楽しければ何でもいーんだ。
ウェブカツ プログラミング学習 3.5か月経過
ウェブカツでプログラミング学習(女性割引)を始めて3.5か月経過。
現在やっとこWordPressに入ったばかり(しかもオブジェクト指向部飛ばして)、まだまだ道半ばにも達しておりませぬ。
プログラミングの世界は、リアル言語(英語とかね)と変わんないんじゃないかと思うほど、ディープで無限だ。
半年も頑張ればそこそこ稼げるようになるかなぁーなんて思っていた3.5か月前の自分の頭はたきたい。
目次
前回の記事はコチラ
ウェブカツ プログラミング学習 3ヶ月経過 (※webサービス部アウトプット報告)
プロフィールはコチラ
学習スケジュールはコチラ
プログラミング学習3.5か月間(※110days)でやったこと
【ウェブカツ】
- HTML・CSS部 入門
- Javascript・jQuery部 入門
- PHP・MySQL部
- ネットワークサーバー部
- Webサービス部 *第2ラウンド終了！
- Webマーケティング部
- 保険部
- PHPオブジェクト指向部 (*覗いただけ)
- WordPress部
- テスト部 (*覗いただけ)
【自主練】
- サイト模写(http://pas-pol.jp/)(途中放棄)
- HTML・CSS・JSでオリジナルサイト作成中(途中放棄)
- HTML・CSS・JSでキーワード&文字カウンター作成(完了)
- ウェブサービス部アウトプット TRIP MEMO第一弾完成！！！
- WordPressのオリジナルテーマでコーポレートサイト作成(まだhtml)
プログラミング総学習時間
139.5ｈ/95days(Avg.1h28m/day)→163h/110days(Ave.1h29m/day)
WordPress部に突入！
1周目やってみて
プログラミングのプの字も知らなかった頃から、ワードプレスって単語は耳にはしていて、何となく「超人気者」なイメージがあったので、ワードプレスは絶対に覚えたい、って思っていた。
が。 WordPress部の動画見終わって感じたのは、
「なんか物足りない。。」
ウェブサービス部の直後だからというのもあるんだろうけど、ワードプレスにはご親切にあらゆる関数が用意されていて、
ウェブサービス部のように"考えて作る"というより、"ルールに従って配置する"という印象を受けた。
ルールに従うのがあまり得意でない私は、少し窮屈に感じてしまった。
ただ、ワードプレス自体はやっぱりスゴイヤツで、ウェブカツで紹介されていないプラグインなんかも使いこなせれば、本当にカスタマイズ性も高く、素人でも気軽に扱える素晴らしいサイトが作れるポテンシャルを感じた。
なので、しっかり勉強すすめていこうと思った。
どうやって攻め落とすか
さて、あんまり盛り上がれそうもないお勉強をどうやって進めるか。
ウェブサービス部同様、"前から作りたいと思っていたもの"を作りながらインプットすることにした。
題材は宿泊施設のオフィシャルウェブサイト。
プライベートな話になるが、所属している社内にIT技術者がいないため、ウェブサイトは外注もしくはwix系で超てきとーなサイトで運営している。
単純にショボいから作り替えたい、というのもあるのだが、本当の目的は勤務時間にプログラミングに触れる時間を確保すること。
会社は外注にウン十万払わずに済む、私はコード書く時間を増やせる。最高なwin-win関係。
あわよくばその後も別の部署のサイト構築や業務アプリ制作を頼まれたりしちゃったり♡という狙いもある。
本来はさっさとプログラミングの先輩がいるIT業界に転職した方がいいのだろうけども。
WordPressのオリジナルテーマをゼロから作ることについて
オリジナルテーマをゼロからプログラミングする価値については、まだちょっと不明な部分もある。
というのも、ワードプレスは”プログラミングが分からない人でも簡単にウェブサイトが作れる”というのがウリであり、無料のテンプレートもかなり充実しているっぽい。
現に、友人が経営している会社のオシャレなサイトもワードプレスで出来ていたので話を聞いたところ、会社立ち上げの際のスキマ時間に自分で作った、とのこと。
もしかして、ウェブサイト制作依頼を受けたデザイン会社とかが、無料テーマをDLしてちょっとカスタマイズして「はい、サイト出来たよ、10万円ですー。」とかも普通に行われているのでは？と思ったり。
だとすると、レイアウトやデザインにものっすごいコダワリがない人が、ゼロからテーマを作るメリットはどのくらいあるのか、そこが気になる今日この頃。
それともワードプレスを使いこなせるようになった日には、「無料のテンプレートしょぼ！使いずらっ！」とか思うのかしら？
まぁ今は前進あるのみ。
珍しく基礎復習時間を取ることに
オリジナルテーマを作るにあたって、まずはhtmlとcssを書いていて、さすがに3か月前よりもサクサク書けるようにはなっているんだけど、
レイアウトがイメージ通りに一発で決まらなかったり、コードがグッダグダになってたり、jQueryスライダーが実装できなかったり、プログラミング云々の前に基礎のキ！が出来てなさすぎる！
ということで、ちょうどhtml&cssをガッツリ書かないといけないので、8月いっぱい限定でhtml、css、js(jQuery)、phpの基礎のキ！をやり直すことにしました。
復習嫌いなんだけどね～。。。あと16日真剣に頑張ったら、もう少し足元安定するはず！
前回決めたプログラミング学習TODO達成度
-
オブジェクト指向部 アウトプットの設計+必要素材を準備 →× 戦略変更によりしばらくお預け。でも絶対にやる。モンスター作りたいから。
-
word press部 動画全部みる →◎動画はみた。これから攻め落とす。
次回までのプログラミング学習TODO
基礎復習とWordPressのアウトプットを全力で！
- Progateにてhtml/css、js、j-Query、PHP、Command Line、SQLをざーっと全復習(※忘れてたものはメモる)
- ネットワークサーバー部までのウェブカツ全動画を再視聴(※忘れてたものはメモる。読んでなかったリンクブログも読む。)
- WordPressアウトプット用のコーポレートサイトのhtmlを全ページ終わらせる
最後に・・・
就職は必要なのかとか、インボイスどうなのよとか、卒業試験って受けた方がいいの？とか考えることはいろいろあるんだけど、
まだまだまだインプットせにゃならんことが山ほどあるんで、今はゴチャゴチャ考えずに走ることに集中しようと思います！
ウェブカツ プログラミング学習 3ヶ月経過
ウェブカツでプログラミング学習(女性割引)を始めてついに3か月！
早かったような長かったような、いや早かったな。
目次
前回の記事はコチラ
プロフィールはコチラ
プログラミング学習3か月間(※95days)でやったこと
【ウェブカツ】
- HTML・CSS部 入門
- Javascript・jQuery部 入門
- PHP・MySQL部
- ネットワークサーバー部
- Webサービス部 *第2ラウンド終了！
- Webマーケティング部
- 保険部
- PHPオブジェクト指向部 (*覗いただけ)
- テスト部 (*覗いただけ)
【自主練】
- サイト模写(http://pas-pol.jp/)(途中放棄)
- HTML・CSS・JSでオリジナルサイト作成中(放置ぎみ。。。)
- HTML・CSS・JSでキーワード&文字カウンター作成(完了)
- ウェブサービス部アウトプット TRIP MEMO第一弾完成！！！
プログラミング総学習時間
110ｈ/79days(Avg.1h23m/day)→139.5ｈ/95days(Avg.1h28m/day)
ウェブサービス部2周目完了！
全体的な感想
前回の記事でも書いたけど、1周目で何が分からないかも分からない状態で終わってしまい、なのに興味のないフリマサイトのサンプルコードをただ書き写すのがイヤで、サンプルをベースに前々から作りたかった仲間同士でシェア出来る旅メモアプリ作りにアレンジしてみました。
見た目はサンプルに近くても、中身はそこそこオリジナリティーを加えたおかげで、エラー嵐と戦う毎日だった。
エラーが何日も解決せずに「やっぱプログラミングで食うのは無理かも。。。」とモンモンすることもあったけど、1つ1つの小さな処理を書いてチェックして書いてチェックしてを繰り返せばいずれは分かるし、エラー探しをすることでコードの理解が深まることが多かった。
「エラーメッセージが私の教科書！」
みたいな感じだった。マジ。
エラー解読とデバックの使い方は相当慣れた気がする。
そして、プログラミングを勉強し始めて数か月の私が、何も理解できていない状態から半オリジナルサービスを作るのは無謀な挑戦だと思っていたけど、"自分が作りたいもの"だからこそ、スタックしても乗り越えてやる！って思えるし、実際に形が出来てくるとテンションめっちゃアガるし、やっぱりそういうのって大事！って思った。
一言でまとめれば、辛かったけど楽しかった！
挑戦してみたアレンジ
①変数名、テーブル名、カラム名などを全てオリジナルに。
→これにより、何が何とリンクしているのかの理解を深めることが出来た。
恥ずかしながら、2周目を始めた時点では、$変数( );と$変数[ ];って何が違うの？ってレベルだったんで。
ここにきて初めて、引数が何の役割をしているのか、理解した(笑)
②サンプルで言うproduct-detailsとmessage-boardのページを1つにまとめた
→1ページの中に全てのデータを引っ張ってくるのも難しかったけど、サンプルでは1対1の取引なのに対し、私がやりたかったのはユーザー全員でシェア出来るメモだったので、その仕様の違いに躓いた。
ウェブカツで作ったDBテーブルのように「掲示板」と「メッセージ」に分けず、ボード機能を1つにまとめて、users_idとcity_idとmemo_idを1つのmemoテーブル内で管理することで、シンプルにcity-infoのページにメモデータの取り込みが出来た。(うーん、うまく言葉にまとまらないな。)
③お気に入りアイコンを2つにした
→単純に「行った町」と「行きたい町」のテーブルをそれぞれ作って、それぞれのアイコンをクリックしたときに、それぞれのajaxを呼べばいいはずだけど。
「クリックする要素や探すテーブルは違えど、ほとんど同じような機能なんだから処理を1つにまとめられないかな！？」
と調子に乗ったがゆえに5時間くらい失って諦めることにした。
④なぜかレッスン動画になかった”販売履歴”にあたるトリップレコード的なページを作った
→単純にデータ読み込んで表示させるだけだったので15分でできたけど、
着手した頃は何が分からないかも分からなかった自分が、2周目の最後には
「DBからデータ引っ張ってきてforeachで回して表示させりゃいいんでしょ」
レベルにまでなれていたことに自分で感動した。
挑戦したけど出来なかった事
①検索ページで検索された町に「行った町」「行きたい町」登録数を表示
→それぞれのテーブルに登録された町の数を数える関数は作れたけども、引数で渡すべきcity_idがどうやっても取れなかった。
検索画面で表示される町やその順番がランダムで変わるため、きっとその表示された要素からid拾ってそれを元に関数に渡すんだろうとは思ったんだけど、どーにも上手くいかなかったので一旦諦めることとした。
②誰かが残したmemoにコメントをつける
→これも、コメントテーブルみたいの作ればいいのでは。と思いつつ、タイムリミットで今回は諦めた。
たぶん①も②も今のスキルでも時間かければ出来ると思うけど、コダワる事よりも先に進むことを優先します。
プログラミングの道はまだまだながーーーーい。
前回決めたプログラミング学習TODO達成度
- Webサービス部アウトプット 最後の機能まで全部実装する →やった！！
- テスト部の動画全部みる →やった。ほんと、見ただけ。こういう作業好きじゃない。。。
- 1日当たりのプログラミング勉強時間を1h30mまでに延ばす！ →おしい！！でも頑張った！
次回までのプログラミング学習TODO
一応、 スケジュール管理をベースにガツガツやっていく予定。
そろそろword press部が解禁になっているはずなので、大きい気分転換になりそう。
・オブジェクト指向部 アウトプットの設計+必要素材を準備
・word press部 動画全部みる
最後に・・・
エラーメッセージとデバック、神！
