ウェブカツでプログラミング学習!半年で作ったもの色々まとめ

プログラミング勉強

こんにちは。ウェブカツ!女性割引にてプログラミング学習中のみや***です。

今回の記事は今までの総まとめ的な感じで、アウトプットとして作ったものをまとめてみようと思います。

これからプログラミングを学習したいけど、どのスクールがいいのかな?と悩んでる方に、

プログラミングが全くの未経験からでも、ウェブカツに入ったらこんなことができるようになるよ〜という一例をお伝えできればいいなーと思います。

ウェブカツで作ったものたち

ウェブカツの受講を始めてからもう7ヶ月ほど経ちます。

時系列としては新しいものから並べてゆくので、後半だんだんしょぼくなってきますが、

それも成長の証ということで・・・

Vue.jsのアウトプット Vueでエバーノート風

JSのフレームワークであるVue.jsのアウトプット1つめ。シンプルな掲示板。


backboneとReactは撃沈・・・。

「わかりやすい」と言われているVueだけでもなんとか理解したくて、頑張りました(それでも難しい)!

そしてVueでもうひとつアウトプット。

↓はエバーノート風メモ。

こんなの作ってみたいなーと思ってたのです。

適当にメモをほうり込めてタイトルをつけられて、

自動保存で保存忘れナシ!!というのがいい感じではないでしょうか。

個人的に、「メモが未登録の時」のふわふわした吹き出しが出て来る仕様が気に入ってます。

もっと可愛くできるとさらにいいのですが^^;

 

Vueが楽しくてもっと触りたい気持ちもあるんですが、

じゃあこれを生のJSやjQueryで書けるのか?と言われると、

???です。

調べて時間かけたらできるんだろうけど、Vueはあくまでフレームワークなわけですし、

フレームワークか素の言語か、今はどちらに比重をおくべきなのかよくわかりません。

ただ、ウェブカツでこうやってJSフレームワークを3つも触るってことは、

フレームワークもとても大事なのは間違いないとは思うのですが・・・うーん。

PHP・JSを使ったシンプル掲示板

私のウェブカツ人生で一番みなさんの反応が大きかった「ネガティブ掲示板」。

あまり考えずとりあえず作ってみてアップしてしまったので細かいところがアレなのですが、

作っててとーっても楽しかったやつです。

ベースの掲示板機能をPHPで、バリデーションはHTML5やJSで行なっています。

こーゆー小さい動くものって作るのほんとに楽しいし、出来上がったときがほんと〜に嬉しい。

プログラミング、楽しい〜!を感じさせてくれる掲示板でした。

当面はサーバーにあげておくので、良かったらなにかネガティブを置いていってくださいね!

ネガティブ掲示板Hakidame

PHPで辞書風サイト

これを作ったのはすでにかなり昔のような気が・・・

ウェブサービス部のアウトプットとして作ったデータ型サイトをもう一度ちゃんと作りなおしたくて、イチからやり直したやつです。


中身(辞書データ)が主役のサイトなので面白みには欠けますが、

一応ちゃんとユーザー登録・退会機能も付いてます。

これもJSもりもり使ったので、いっぱい悩んだけど楽しかったです。

 

また、同じ辞書サイトに、辞書だけじゃなくてツールとしても使える機能も欲しいなと思って


こんな、学習のためのちょっとした動くものも作ってみました。

AjaxとPHP


Ajaxなるものを覚えて何か作ってみたくって、Ajax使用の小さなツールを作ってみました。

自分の誕生曜日を知ることができます。

→誕生曜日を知ろう!

今見たらCSSが全く可愛くないですが、とにかくAjaxの

「なんかすごくプログラミングっぽい感じ」

がかっこよくて、これを実装してうまく行った時は小躍りして喜びました。

 FLOCCS・Sassのアウトプットサイト

次は、HTML・CSS上級部のアウトプットとして作成したSass/FLOCCSを使用したサイト作成。


FLOCCSを使うにあたり、コードを書く前に色々考え必要があって(FLOCCSでなくてもそうか・・・)、

共通化できるパーツは?とか、もろもろ()を整理するのは結構大変なのです。

でも、実際にサイトを作ってみて、「FLOCCSの考え方で組み立てると便利なんだ」というのは実感できました!Sassも便利!

HTML・CSSはプログラミング言語じゃなくてマークアップ言語だと言いますが、gulp回してる時点でもうプログラミング感がすごいです。私だけ??

ただ、しばらく使わないでいると見事に忘却の彼方へ・・・泣

今後のためにもしっかり身に付けたいです。

ウェブカツの講義動画で出てくるサンプルサイトもすごく可愛くて、HTML/CSS部上級は結構好きでした。

ワードプレスのテンプレート


ワードプレス部のアウトプットとして作ったテンプレート・・・今改めて見ると、ぜんぜん可愛くないですね 笑

まぁ生徒募集用のサイトなので可愛くなくてもいいんですが、センスのなさを感じます。

私のプログラミング学習欲の根源であるワードプレスなのに、なんだかうまくできなくてしんどかったアウトプットな記憶があります。

ちゃんとワードプレスを理解したくてカスタマイズの本まで買ったのに、結局ネットで調べた情報だけでこのアウトプットに必要なカスタマイズができたので、複雑でした。

ワードプレスともっと仲良くなりたい〜〜

オブジェクト指向部のアウトプットゲーム

このあたりになってくるともう季節も夏なので、ワンシーズン昔の作品です。

きのこ育成ゲーム・・・

ツイッターではHerokuに上げたリンクを貼りましたが、

Herokuがよくわからなくて結局自分のサーバーに上げるほうが楽でした。

ゲーム!きのこちゃん

シュールな雰囲気が漂ってはいますが、ぜひ一度きのこちゃんを成長させてあげてください。

よく腐ったり枯れたりしてゲームオーバーになるのでお気をつけください。

 

オブジェクト指向、難しいよ・・・

ウェブサアウトプットの1つめ

先ほどの辞書サイトの元である、最初に作ったWebサービス部のアウトプットがこちらです。

今見るとこちらの方が色合いも可愛いし、字も読みやすいかも。しれない。どうだろう・・・。

この1つめを作った時はまだPHPそんなに好きじゃなかった気がします。1つの関数ごとに、1つの機能ごとに、息も絶え絶えで作ってたかもです 笑

そしてしばらく触らないと、また忘却の彼方へ・・・

PHPの10文字掲示板

PHP部のアウトプットとして作った最初の掲示板がこちら。

5月だから、もう半年前!!


先ほど挙げたネガティブ掲示板と比べると・・・

なんとも初々しい感がすごいですね。

プログラミング学習初期のころなので、これでももう一生懸命。

PHP以前に中央寄せするだけでも「えーっと・・・(゚o゚;;」だったと思います。成長したな〜!!

JS・jQueryの動くやつ

この辺りにがほんとに最初のアウトプット作品??かもです。

押したらランダムに変化。

よく考えたら今でも何も見ずにこのコード書けって言われたらできないなぁ・・・

調べてできればそれでいいのかな。

 


こちらもランダム表示系。

これも手持ちのワードプレスサイトに組み込みたくて作ってみたやつです。

ウェブカツの学習に忙しくて未だに組み込めていませんが、落ち着いたらちゃんとしたいな〜(って思ったまま放置してるサイトが複数・・・)。

まとめ

ということでオチもなく、作ったものを並べてみました。

ググりながら、唸りながらでもせっかくここまでできるようになったのだから、モノにしたい!!!

これからも頑張ろう〜

 

ウェブカツ入部後、初の記事はこんな感じです↓

 

ウェブカツでプログラミング学習!選んだ理由と、2週間たった感想を。
ウェブカツでプログラミングを勉強して2週間経ちました!ざっくりした感想や、気になることなどをシェアします。

 

タイトルとURLをコピーしました