初心者もちのプログラミング奮闘記11 ~ウェブカツ入部から5.5ヶ月~

ウェブカツの女性割引部員になってから、5.5ヶ月が経ちました!

この半月は、プログラミング共同開発プロジェクトではワイヤーフレーム作り、ウェブカツではJavaScriptjQueryの上級に手を付けました!

 

1、学習内容

 ・プログラミング共同開発プロジェクト「ワイヤーフレーム作成」

 ・ウェブカツ「JavaScriptjQuery 上級」

 ・自作サイトのプログラミングMach-codeの「バグ修正、日本語表記」

 

2.感想

 プログラミング共同開発プロジェクトは、いよいよデザイナーさんにデザインを考えていただくフェーズに入りました!

 まずは、前回までに作成した画面遷移図から、デザイナーさんにデザインしていただく画面を絞り込み、みんなで分担してワイヤーフレームを作成しました。

 いろいろなサイトを参考にして、見やすく使いやすい画面、プログラミングしやすい画面にするにはどうしたらいいか考えながら、「Adobe XD」というアプリを使って、作成しました。

 「Adobe XD」は、いまだに使い方がよく分かっておらず、一つのワイヤーフレームを作成するのに1日かかったり、全体のサイズを変更するやり方がわからず、初めからやり直したりとかなり時間がかかってしまいました。。

 今後も使っていくようなので、開発で使うアプリの使い方も習得していきたいです!

 

 JavaScriptjQueryについては、上級でいよいよJavaScriptワイヤーフレームについて学びました。

 「jQuery」と「backbone」と「React」と「Vue」の4種類で、ToDoリストをプログラミングしました。

 同じ目的のプログラミングでも、ワイヤーフレームが違うと、コードの量や書き方がかなりかわることに驚きました。

 まだまだ、JavaScriptワイヤーフレームを学び始めたばかりなので、jQueryでプログラミングした方が簡単じゃないか、、と感じてしまいます><

 が、「Vue」については、直感的でわかりやすく、これは使いこなせたら、かなり就職でも有利になりそうだ!と思い、ウェブカツで参考として紹介されていた

「基礎から学ぶ Vue.js」という本を買いました!➡リンク

今日から、本で「Vue」のプログラミングを学び、JavaScript上級のアウトプットは、「Vue」を使ったサイトにしたいと思います!

 

 

プログラミングを学べるウェブカツ!!へのリンク(https://wabukatu.com

 

 

初心者もちのプログラミング奮闘記10 ~ウェブカツ入部から5ヶ月~

ウェブカツの女性割引部員になってから、5ヶ月が経ちました!

ウェブカツの共同開発を進めながら、旦那さんと作成してたサイトが完成しました☆

 

1、学習内容

 ・自作サイトのプログラミングMach-codeの「レスポンシブ対応」

 ・共同開発「制作サイトのプログラミング機能の洗い出し(再提出)」

 ・共同開発「制作サイトの画面遷移図」

 ・ウェブカツ「営業部」「企業部」

 

2.感想

 ついに完成しました~!自作サイトです♪

よかったら使ってみてください~^^

Match-code

~駆け出しプログラマー・デザイナーのためのサービス~

一人ではできないチーム開発をMatch-codeなら

初めてのチーム開発プログラミングをここで

match-code.herokuapp.com

 SSLにも対応させました!これからもプログラミングを見直して、より使いやすく改良していきたいです!

 

 

 さて、ウェブカツの共同開発プロジェクトも進んでおります。

プロジェクトのみんなで、電話会議しながら、試行錯誤して作成してます!

提案書も初めて作りましたので、こんな風に事業は動いていくのだな~と勉強になりました!

 提案をするには、相手の要望をくみ取ること、問題と解決策を考え、理由とともに提案をすること、これが大切であると学びました。

 今回作成するサービスは、ユーザー側と企業側で目的が異なり、ページ遷移図もページの中身もユーザー目線と企業目線の2つをプログラミングしなければならないので、今まで自分で作成してきたサイトからかなりレベルが上がっております。

 また、メッセージ機能を導入する予定なので、それに伴って必要となる「通知機能」や、「既読・未読管理機能」もプログラミングするため、難しそうです。

 調べながら、仲間と協力して、一生懸命頑張りたいと思います!はやくプログラミングを書きたいです♪

 提案書を作る中で、ウェブカツのなかにある「営業部」と「企業部」を学習しました!私は、コミュニケーションが苦手なので、この部から学んだ事を生かせるように、日ごろの会社での会話でも気を付けていきたいと思います。

 この半月は、ウェブカツのプログラミングの勉強のほうがあまり進んでいませんでした><

10月は、プログラミングであるJavaScriptjQuery上級を進めていきたいと思います♪

 

プログラミングを学べるウェブカツ!!へのリンク(https://wabukatu.com

 

 

 

 

初心者もちのプログラミング奮闘記9 ~ウェブカツ入部から4.5ヶ月~

ウェブカツの女性割引部員になってから、4.5ヶ月が経ちました!

ウェブカツの共同開発プロジェクトに入れてもらい、それにむけてlaravel部の受講を開始しました!

 

1.学習内容

 ・Laravel部 Lesson16まで

 ・共同開発「プログラミング機能の洗い出しと提案」

 

 2.感想

 Laravel部を開始しました~!この部は、私がウェブカツに入った後に開講された部で、また手を付けていなかったのですが、使う機会がやってきましたので、学習することにしました。Laravel部のLesson17からは、JavaScriptフレームワークであるVue.jsというプログラミングの説明がされています。とりあえず、Veu.jsはJavaScript上級を学んだあとに進めようと思い、Laravel部はLesson16でいったん終了としました。

 というのも、やりたいことはたくさんあって、JavaScript中級、HTML中級・上級のアウトプット用のプログラミングサイトも作っていかないといけないのですがこのたび、ウェブカツさんが、生徒同士で共同でサイト開発を経験できるプロジェクトを立ててくださいまして、それに参加させていただけることになり、アウトプットのプログラミングと、共同開発の作業を並行して進めていっている次第であります。

 まず、Laravel部についてですが、説明はとても分かりやすく感じました。環境構築からプログラミングを始めるのですが、お手本はMac、私の環境はWindowでしたが、HTML上級によりコマンド操作に対する耐性がついてまして、きちんと構築できました。

 ログイン・ログアウト、バリデーションそのほかたくさんのプログラミング機能が、簡単にかけてしまうLaravelさんとBladeさんにはびっくりです!こんなのLaravelでサイト作成したほうが作業コストも、サイトの安全性?も断然よくなると思います。マスター出来たら、今後はLaravelでプログラミングしていきたいです!

 共同開発については、少人数でグループを組み、3ヶ月程度で一つのサイトをプログラミングする内容です。機能の洗い出しや提案をグループで話し合いながら決めていくのですが、一人またはそばにいる旦那さんと作成するのとは違い、コミュニケーションをしっかりとって方向性をしっかり立てていかないと、すれ違いが起きてしまう点が、難しいなと感じました。

 同じグループのメンバーは年も近く、プログラミング経験年数も近いため、相談しやすくてよかったです。共同開発のサイトは、世に出るサイトになるそうなので、一生懸命頑張ります!

 

 

プログラミングを学べるウェブカツ!!へのリンク(https://wabukatu.com

 

初心者もちのプログラミング奮闘記8 ~ウェブカツ入部から4ヶ月~

ウェブカツの女性割引部員になってから、4ヶ月が経ちました!

ここ半月は一番プログラミングのレッスンが進んだかもしれません~~

 

1.学習内容

 ・JavaScriptjQuery中級 Lesson23~最後まで

 ・HTML・CSS中級、上級 最後まで

 

2.感想

 上記プログラミングの部をとりあえず一周したところです。

 JavaScriptjQuery中級はレッスンが33もあり、プログラミングの内容が盛りだくさんでした!コマンド操作でファイルを移動したり、関数を実行したりを学びました。MACとWindowでコマンドの指令の仕方が少し違うことも勉強になりました!

 そういえば、前回の日記でjQueryJavaScriptのみで実装すると言ってましたが、画像スライダーのレッスンで今の私では無理だと思い、jQueryでプログラミングしました。

 JavaScriptについては、まだまだ理解できていないプログラミングがたくさんあるため、1冊本を買いました!JavaScript 本格入門」という本です!この本はレビューで評価も高かったため、じっくり読んでいきたいと思います。

 HTML・CSSは、中級~上級まで一気に進めました!新しいCSCCというCSSの書き方を学びましたが、とても見やすい手法で感動しました!自分で作るサイトは今後、SCSSで書いていこうと思います。

 また、レスポンシブに対応させる方法も学びました。私の職場は、パソコンとスマホCSSファイルを分ける方法でレスポンシブされていますが、@media screenを使って同じファイルに書いていく方法のほうが見やすくていいなあ~と感じました。

 そして、CSS設計という、CSSを指定する際のクラス名の書き方や、スタイルの指定の方法も学びました。いろんなページで使いまわせる、再利用しやすい書き方でプログラミングしていきたいと思います。

 さて、一気に3つの部をトントンと進めてきましたが、いよいよこれから学んだプログラミングのアウトプットに入ります!JavaScriptで学んだドロップダウンメニューや画像スライダー、CSSで書くアニメーションやレスポンシブも取り入れて、使いやすいサービスになるようにプログラミングしていきたいと思います!

 明日から少しパソコンが使えない状況になるので、少し早めの日記報告となりました。JavaScriptのプログラミングの本でも読んで過ごします~~

 

プログラミングを学べるウェブカツ!!へのリンク(https://wabukatu.com

 

 

初心者もちのプログラミング奮闘記7 ~ウェブカツ入部から3.5ヶ月~

ウェブカツの女性割引部員に入部して、3.5ヶ月が経ちました~

は、はやいいいい。。

今回もこの半月のプログラミング生活を振り返っていきたいと思います!

 

1.学習内容

 ・共同自作サイト完成

 ・WordPress

 ・JavaScriptjQuery部 中級 Lesson1~Lesson22

 

2.感想

 自作サイトが完成しました~♪一からサイトを作るのは、表示する文の内容やデザインも考えないといけないので大変でした。デザインを考えてくれる人が欲しいなあ~。。

 そしてついに!ウェブカツに入部して3ヶ月が経ったので、今まで見れなかったプログラミングのレッスンが一気に解放されました~!!JavaScriptjQueryの中級上級、HTM・CSSの中級上級などです。うれしい~

 お仕事にウェブカツで学んだプログラミングを反映したいため、WordPress部はさっと一通り見て、現在はJavaScriptjQuery中級を学んでいます。私の職場は、jQueryを使わずJavaScriptでしかコードを書かないので、ウェブカツで学ぶ内容も、jQueryの部分はJavaScriptで実装しています

 まずはLesson22まででJavaScriptについての知識を学びました。PHPと似ている点もあったので、ここで一度整理ができてよかったです。変数の基本型と参照型はなんとなく理解できましたが、コードを扱っていくうちにさらに理解を深めていけたらなと思いました。プロトタイプについては、ちょっと理解が追い付けませんでした>< クラスを使えば継承は簡単なのに、それが実装されていなかったころの書き方は頭がこんがらがりました。私の職場は古いコードの書き方なので、絶対プロトタイプが使われてると思います。。;;

 これからはプルダウンメニューや画像スライドなど実際に動きを付けて学んでいくみたいなので、頑張ります!

 いまは、仕事のある日は1日2時間、休みの日は5時間を目安にちょこちょことプログラミングのお勉強を頑張っています。未経験からプログラミングのお仕事を始めたので、お仕事中はほぼお勉強の時間になっていますが、、

 お仕事では、言われた業務を行うにはどういうプログラミングコードを書いたらいいか調べるなかで、新しい発見がたくさんあります。まだ調べながらで時間がかかってしまいますが、「こういうコードあったよな~⇒調べる」をたくさん繰り返し、調べなくても頭の中から引き出せるように頑張ります!

 

プログラミングを学べるウェブカツ!!へのリンク(https://wabukatu.com

初心者もちのプログラミング奮闘記6 ~ウェブカツ入部から3ヶ月~

ウェブカツの女性割引部員に入部して、3ヶ月が経とうとしてます~

この半月のプログラミング生活を振り返っていきたいと思います!

 

1.学習内容

 ・ウェブカツのオブジェクト指向

 ・ProgateのPHPⅡ~Ⅳ

 ・GitやGitHubの勉強 ←中断。。

 ・旦那さんと共同でサイト構築 ←作業中♪

 

2.感想

 前回はウェブカツWEBサービス部のアウトプットまで終わったところでした。次の部はオブジェクト指向部です。オブジェクト指向は、プログラミングの本で読んだり、Progateで学んだりしていたので、動画も、なるほどなるほどと確認しながら進めました。

 一通りウェブカツのオブジェクト指向部を見終わった後、プログラミングが学べるProgateというサイトでオブジェクト指向を扱っているレッスンをして、もう一度復習しました。

 そのあと、本当はウェブカツで学んだオブジェクト指向を使ったプログラミングで料理サイトを作ろうと考えていたのですが、旦那さんからウェブサービスを一緒に作ってみないかと誘われたので、一緒に作ることにしました

 一緒に作るにあたって、ファイルを共有するため、GitとGitHubの勉強を始めたのですが、ちょっと難しく、とりあえずファイル共有に必要最低限のことだけ教えてもらい、初めての共同プログラミングが始まりました。

 プログラミング環境が、旦那さんはMac、私はWindowsなので、画像の色の見え方や全体のバランスなど比較しながらやってます。

 旦那さんはデータベース関係やPHP、私は見た目(HTMLやCSSjQuery)で分担!!

 。。。の予定でしたが( ノД`)シクシク…実は、私はこの半月でプログラミング関係の仕事を始めたのですが、仕事場で解決できなかったことを、家に帰ってからウェブカツの内容をまとめたノートやネットを見ながらプログラミングコードを考え、次の日仕事場で実践するような方法をとっており、なかなか共同サイトの作成に十分に関わることができていません><旦那9割私1割程度でしょうか。。。

 お仕事も、勉強もどちらも頑張っていきたいと思います!

 

 話は変わりますが、私が職場で扱っているのはHTML、CSSJavaScriptjQueryが主です。8月3日にはウェブカツの女性割引部員になって4か月目です。そのため、これらについてのウェブカツレッスンが一気に解放されます!すごく楽しみです。

 お仕事はまだまだ慣れませんが、プログラミング超初心者なのに雇っていただけたので、毎日のウェブカツでの勉強を積み重ね、成長していきたいと思います。

 

プログラミングを学べるウェブカツ!!へのリンク(https://wabukatu.com

 

 

初心者もちのプログラミング奮闘記5 ~ウェブカツ入部から2ヶ月半~

ウェブカツの女性部員に入部して、2ヶ月半が経ちました!!

今回の半月は、自分でプログラミングした時間・量は一番多かったです!

それでは、その成果を書いていきたいと思います。

 

1.学習内容

 ウェブカツのWEBサービス部を見返しながら、自作サイトを作成しました。

 ウェブカツのWEBサービス部は、レッスンの量も内容も多く、1周するだけでは理解が浅かったため、2周目をしていました。

 ウェブカツのWEBサービス部2周目は、一緒にプログラミングを書き、手を動かしながらやろうと思い、自作サイト作ることにしました。

 1つのサイトのプログラミングを書くのに、2週間もかかって大変でしたが、理解・知識は1周見終わった時点よりも、かなり深まったと思います!

 これが私が作ったサイトです↓↓(デプロイできていないため、動画です><)

https://twitter.com/mochi1224_mochi/status/1150727401652932608?s=20

 

2.感想

 プログラミングコードを書き、自作サイトを作るのは、とっても楽しかったです!自分が好きなようにサイトが作れるので、そのせいがあるかもしれません。

 初めに、ワイヤーフレームを作成し、次に、ワイヤーフレームをみながら、HTMLとCSSだけである程度のブラウザのデザインをプログラミングしました。そのあとに、PHPでバリデーションチェックやDBからデータを持ってきたり、データを挿入したりするコード、JavaScriptjQueryで画像の切り替えや、お気に入り登録などをプログラミングしました。

 サイトを作成する際、手順としては、

  作りたい機能のウェブカツの動画を1度みる

 ⇒自分でコードを書いてみる

 ⇒ウェブカツのお手本コードをみて自分が書いたコードでおかしい部分があったら修正する

といった順番で進めていきました。

 0からプログラミングを作るのは、やっぱり難しく、初めの方はウェブカツの動画やお手本コードを何度もカンニングしながら進めていましたが、最後の方は、ウェブカツのお手本コードをみなくても、自分で考えて関数を作ったり、画面に表示させたり、自分のやりたいプログラミングを組むことができました。

 自作サイトを作成して、PHP/MySQLについて理解が深まったので、忘れないうちにノートにしっかりまとめたいと思います。

 正直、ページングや画像をドラッグ&ドロップで表示させたりする初心者にとって、コードが長く難しく感じる部分は、まだウェブカツのお手本コードを見ないと作成できません。

 そういうプログラミングを、現場でも使えるようになるために、ノートに記し、いつでも見返すことができるようにしていきたいです!

 さて、明日からはウェブカツのオブジェクト指向部に進んでいきたいと思います~

 

3.おまけ

 作ったサイトを旦那さんに見てもらいました~

 旦那『いろんな色を使いすぎ。まるで見ずらいデザインの代表作品。』

 

 うわ~ん( ノД`)シクシク…

 シンプルかつ使いやすいサイトを目指して頑張ります><

 

プログラミングを学べるウェブカツ!!へのリンク(https://wabukatu.com