【作業工程フル公開】エンジニアが30万円案件の制作過程を公開

現役Webエンジニアが30万円案件を開発する過程をフル公開します。
ただ作業するだけでなく、どういう手順で開発するかのポイントも解説しています。
この動画を見ていただければ、Webエンジニアがどのように開発しているのか、実際の様子がわかると思います。
00:00:00 30万円の案件
00:02:10 制作手順
00:08:06 テーブル設計
00:13:39 環境構築
00:22:39 実装開始（URL収集）
00:54:11 求人情報のスクレイピング
01:24:32 CSV出力
01:38:18 まとめ
■独学で自走できるエンジニアになるためのプログラミング学習サービス
dokugaku-engineer.com/
■UdemyでAWSやGitの入門講座を販売中
linktr.ee/yamaura
■プロフィール
山浦 清透（やまうらきよと）
Web系エンジニア
1987年生まれ、福岡県出身。京都大学大学院卒。
2014年に未経験からエンジニアに転向し、既存サービスの運営、新規事業の立ち上げ等を経験。プログラミングの修得に四苦八苦してきた経験から、開発現場で使えるエンジニアリング知識を発信。Udemy受講者数6万人。

[@bon-chan8799]

実際に開発される過程を見ることが出来たので、おおまかなイメージをつかむことができました。ありがとうございます

[@shanghai_kenichi]

凄く分かりやすいと感じました。私自身、現在はプロゲートで勉強中の身ですが、活用するにあたっての実感が増してとてもモチベーションが上がりました、素晴らしい動画を有難うございます！

[@gomagura]

プログラミングの過程をこうして動画に残してもらえるのは大変ありがたいです！！

[@mitsunoriito]

とても参考になります。ありがとうございます！！ 声もとても聞きやすいですし、内容も何をやっているのかを理解しやすかったです。

[@user-ci4yf5kp1p]

模写するだけでめっちゃ勉強になります……！作業の合間に解説があるのもありがたい……！

[@m1lkey214]

ためになりすぎます！😭 現在大学生なのですが、とてもためになりました！！！

[@cr110tetsumaru]

過程紹介はどんな仕事でも 重要だと思います ♪ すごい！

[@user-cv7om4sk7b]

工程フル公開、ありがたいです！ じっくり見させてもらいます

[@KiyotoUniv]

おー嬉しいです！長いですけど是非ぜひご覧ください〜😊

[@kh-on8xv]

先輩が近くにいない独学者にとって、本当にこういう動画ありがたいです！ありがとうございます！！

[@KiyotoUniv]

身近にいないとイメージしづらいですよね💦よかったですー！

[@user-mz7gr1nb9m]

全くの未経験ですが動画を見て作成する過程を観れてとても参考になりました！ これからプログラミングを学ぼうとしてるので実際の作業を観れてイメージできてとても良かったです！

[@pupu8708]

いま就活中でIT系を考えているのですが、仕事内容が具体的に想像できないこともあるのですごく参考になります！

[@user-gu3fr7ff2x]

すごく分かりやすかったてす。特に、トラブル対応が参考になりました。今後も似たような企画お待ちしてます。

[@xy8066]

玄人さんが飛ばすような部分が初心者には重要だったりします。一部の人にとってはかなり需要のあるものだと思いました。

[@fusa5]

フロントエンドやってます。KZbinの動画で一番勉強になりました。ありがとうございます。

[@keidong4675]

この動画はいきなりコードから始めるのではなく、簡単ではあるものの要件定義や設計から行っているのは良いと思います。

[@HAIZUhuwa]

えっ普通じゃないのか？PGだけでしょコードカキカキだけは

[@user-lb4lw3bw8u]

@@HAIZUhuwa動画で一連の過程を載せてくれる人は少ないんだよ。

[@user-kt3xy6mn2t]

こういうのが見たかったです！ まさにフリーランスになったらこうやって案件取りたいなぁって想っていた内容なのでとても参考になります！

[@tnk1608]

個人開発の案件気になってたので大変タメになりました！ ありがとうございます！

[@maxi2042]

すごい。参考になります。 配信していただきありがとうございます。

[@yuuttana1223]

凡ミスシーンなどもあって、とてもリアリティがありました。だいたいこういうのは説明無しの早送り動画になっていることが多いので、やってることも分かって面白かったです。動画見てるとあっという間に時間が経ってました。

[@KiyotoUniv]

途中詰まっちゃいましたね😅基本こんな感じで開発進めてますー！

[@user-sz4oh7fv5s]

高校生です。将来エンジニアになりたいので、実際の開発の流れや制作途中の考えていることなどが分かりとても参考になりました。

[@user-jf6el7rz3l]

素晴らしい動画です。 いつもありがとうございます。

[@KiyotoUniv]

嬉しいお言葉です...！

[@SAMURAI_JAPAN.]

IT未経験からWebエンジニア目指して日々勉強している身としては、大変有難い動画でした！！ 現在PHPを勉強しておりますが、顧客の要望から実際どのようにプログラムを書いて、DBとどのようにリンクさせるかなど全く想像できなかったので、実際のエンジニアさんの制作過程が見られて大変参考になりました。しかも、工程ひとつひとつに解説を交えながら作業をしていただけていたので理解しやすかったです。 プログラムを作り上げる一つの事例として、今後じっくり動画を視聴して学ばせていただきます。 今後も同じように制作過程の動画をアップしていただけることを期待しております。ありがとうございました！

[@user-lh8de5ee3f]

めちゃくちゃめっちゃくちゃ参考になる

[@12-389]

素人ですが、説明がとても分かりやすいです。 頭のいい方は、説明が丁寧ですよね。

[@user-xl9wg4eq1o]

丁寧に解説しながら、実務を遂行できる。 怒る奴らは飽きるぐらい見ましたが、IT業界で初めて見ました…

[@pd173]

こうゆうのってdockerとか設定ファイルの書き換えとか環境構築が一番ハマるとこだから、動画内で「気にしないで大丈夫」と言ってる箇所がとても重要。

[@nyaopi5838]

別次元の話しすぎて全く理解できなくて睡眠導入音声になりました。ありがとうございます。

[@user-ji4or5kt5k]

まじで勉強なりました！ ありがとうございます！ チャンネル登録しました

[@user-mm4bz7es8o]

こんな割のいい案件を受注できるかどうかも重要ですよね フリーランスは結構人脈も大事

[@user-ss8xq4ci3v]

これは、神動画です！ ありがとうございます！

[@KiyotoUniv]

嬉しいお言葉です！＾＾

[@user-jj6gt5lh7f]

もう怖くないGItではお世話になっております🙇‍♂️ それほどスキルがないので内容はよくわかりませんが ここまで分かりやすい画面で説明してる人は他に無いでしょうね！✨

[@maxi2042]

初見ですが、実務がわかりやすいです。

[@user-io5gz2kc1r]

素晴らしいです！

[@KiyotoUniv]

ありがとうございますー！

[@user-ci2kd4be5g]

エンジニアに興味を持って辿り着きました！ めちゃくちゃ良かったです！！どんな案件で何をしてどのくらい納品なのか。価格もあって最後でした！！

[@yamcha0327]

TwitterやUdemyも素晴らしいのにこんな実際の実装まで、、、 めちゃくちゃ勉強になります！

[@KiyotoUniv]

うおー嬉しい！作ってよかったですー！

[@fxxku.]

めちゃくちゃわかりやすかったです！

[@user-ft3nv5my8x]

将来フリーランスを目指している2年目エンジニアです。めちゃくちゃ為になりました。今後もこういった仕事を実際に進める上での動画を上げてくださると嬉しいです。応援しております。

[@KiyotoUniv]

実際の仕事に関わる動画、今後も作っていきます！

[@kamiichie]

今のご年齢はいくつですか

[@user-uz6fg5fg2h]

ちょうど数日前からLaravel勉強してて、「実際どういうふうに使うんだろ」って思ってたので食い入るように見てしまいました笑 ドキュメントの参照から、途中での動作テスト、エラーの解決、全体の組み立てなどめちゃめちゃ勉強になりました！ 今後も実際の開発フル公開、ぜひお願いします！！

[@KiyotoUniv]

たいきさんLaravelも学習されてるんですね！ 嬉しいですー！また企画します！

[@nada-qb7fl]

小5ですがプログラムはじめました。参考になりました。マネしてみたら時間はかかりましたができました。ありがとうございます。

[@Rey-pd4gc]

かっこよすぎ

[@basil_283]

マジなら末恐ろしいな。今の時代いなくはないから普通に恐怖。

[@makiware2430]

全く知識ないけどなんか楽しくて見入ってしまった笑 プログラミング勉強してみようかな…

[@yukirin9037]

みたことある名前だなぁと思ったらudemy受講してました。この動画同様にとてもわかりやすい講義で重宝してます。

[@KiyotoUniv]

おぉUdemyを！どうもありがとうございます〜KZbinもよろしくお願いします！

[@user-gr9vq5su7q]

まだ見途中だけどめっちゃ参考になります！

[@user-xl3lt6pe3l]

めっちゃ参考になる…

[@masamasa8996]

初めまして初見です。 とても実践的でこれからフリーを目指す自分にはとても参考になる動画でした。 1時間以上の動画全然苦にならずあっといまに終わってしまい、明日時間のある時に同じように実装できるか構築してみようと思います。お仕事案件、シリーズ化ならないかな…とても面白かった。 登録させて頂きました！他の動画も視聴させていただきます。引き出し増やしたい。

[@t.a2851]

20年以上ゲームプログラマをやっていますが、同じエンジニアの分野でも畑が違うとここまでわからないのかと衝撃を受けますね。 年々高度な技術を求められるようになってきているので、医者のように細かくカテゴリー分けされて専門技術に特化していくのかなと思います。 実際Webエンジニアという仕事がどのような事をやっているのか詳しくは知らなかったので興味深い動画でした。

[@KiyotoUniv]

エンジニアって一言でいっても本当全然違いますよねー！

[@darkyositake]

ありがとう

[@haruyukitanaka9215]

案件の難易度、規模感、進め方がわからなくて案件に応募できなかった私にとって最高の情報です。ありがとうございます。 聞いたことある声だと思ったらUdemy講師の方だった。AWS講座でお世話になってます。

[@KiyotoUniv]

おぉAWSも！どうもありがとうございますー！

[@Socrate2]

横からすいません。 それはまず時給で働いたほうが良いと思う。 見積もりが出せるということは、全てを予測し、把握できているという事なので、仕事をこなすために必要な能力の100% + 管理能力があるということを意味します。 大概の場合、PJ進行に伴って様々な要求がユーザから出て来て規模が無限に膨らんで行きますが、それを常時修正/調整しながら、喧嘩せず、不満を生じさせず、時間/予算内でゴールに走り込まねばなりません。(というのがPJMの仕事)

[@ss941]

勉強になります。また同じ企画お願いします。

[@KiyotoUniv]

おー嬉しいです！また企画してみます！

[@user-qp8rq1ev1o]

自分には全く関係のない仕事してますが、作業が楽にできるのはこういったエンジニアの方がいるから出来るのですね。 日本の技術は凄い！

[@user-xk1ij7py2i]

これ見ると専門性が非常に高い仕事なんだなとわかりますね しかも作るものによって言語変わるし、新しい言語が出るスピードも非常に早くて学習コストが高いという。 日本のエンジニアが過小評価されてるって意味がわかりますね

[@user-pl5yp4sb6p]

あなたはすごいです！

[@aronbass4]

見入ってしまって90分があっという間に感じました。 とても参考になり面白かったです！ JSのフレームワークとかも見てみたいです！

[@KiyotoUniv]

嬉しいですー！ JSフレームワークですね、検討してみます！

[@user-kp5in3we8z]

面白い動画でした。 また納品までの過程の動画も見てみたいです。 出来上がったコードやデータベースをどのように客先に納品しているのか？みたいな 一概に答えは無いでしょうが、そういうのも解説があるとこれからのエンジニアを目指す人に影響与えれるかなと思いました。

[@10A.Official.YT.account]

求めてたやつや。感謝

[@KiyotoUniv]

嬉しいお言葉！＾＾

[@user-el3oe5tx2e]

知識がすごい。経験値が凄まじそう

[@Bizthefrenchie]

ありがたい！！

[@yo46piano]

今まで非IT企業でしか働いたことがなく、ググってコードを見つけて書いてます。 「このやり方は邪道だよな。。。」と卑下していたのですが 実際にプロの方も、同じような書き方をしていたのですごく励みになります。

[@junilee3963]

神動画！！

[@Francis_UD]

とっても一目瞭然分かりやすく解説しています！ 拝見させていただきます。先輩お疲れ様です。(^.^)

[@rockonjapan]

面白かったです

[@shuchan51513]

無料で見れるのすごいわ、、テスターだけど開発したいからありがたい

[@user-ox1ic7bo5n]

初見ですが声が凄く良い声だと思いました

[@sox9887]

よくいる情報商材屋上がりのエンジニアチャンネルとは違いますね。 コーティングの仕方がリアルです。

[@harami9747]

組み込み系が専門ですが、お互い慣れが必要かなーと思いました。 一方で慣れればお互いの領域で仕事できそうな感じもしますし、今後IOTの流れで継ぎ目みたいな仕事も増えそうなので、エンジニア同士尊敬しあいながら高めあいたいですね！

[@haraoki4434]

参考になりました。。簡単でよいのでテストも数件でいいので、いれて頂けるとよかったです。

[@youshe9121]

大企業にいるとフリーランスの人とかがどうやって仕事してんのか全く分からんかったから勉強になった。

[@user-to3hl9oc2i]

普通にかっこよすぎ！ 憧れる職業です。

[@The-HERNIA]

ほとんどのエンジニアが土方落ちするけどね…

[@ssm6j]

フェッチできた瞬間ってうれしいですよね☺

[@momomaro5608]

専門外ですが、エラー出て直してるところリアルで面白いです。 原因分からなかったら地獄ですね

[@wsns5389]

ありがとう！

[@momomaro5608]

てか、やっぱり技術持ってる人はかっこいい。

[@user-rx2sd5qn9k]

プロの仕事を　垣間見た。 やっぱり　プロは　すごい。

[@user-wp2kj3hz8e]

まじかっこいいです😂

[@user-lj9ck6ni8l]

楽しいです。先月までcsとして働いていて今、仕事探しをしてます。たまたま動画にでたきて、ずっと見てしまってます。

[@kk-vo6xh]

最高です

[@sdocero96]

今の学生は夏休みとかにプログラミングかじっとくだけでもすごい有利になるかもしれません。 私は20代で誰でも知ってるような大手の電気系の開発部門にいますが、意外と部署にプログラミングできる人がいないので結構重宝されてます。もちろんソフト系の部署はバリバリプログラミングできる人ばっかりですが、畑違いの部署で"機電が専門でプログラミングもできる人"になると、単純作業の自動化など結構その人にしかできない仕事が回ってきて個性が出せるのでいいアピールになります。日本政府と同じで昔ながらの日本企業ってIT化進んでないです笑 特にIT部門に頼むほどではないけど、自動化が望ましい煩雑な通常業務って結構溢れてます。

[@runba]

クローリングを学ぼうと思ってたので、後学のための勉強になりました。

[@murano8520]

オススメにでてきたので、初めてみました。web開発全く知らないvbaしかしらんおじさんですが、1:09:30 頃に出てくるエラーなんかは素人だと半日以上かかりそうなやつに秒で問題を解決してるのが（笑）冒頭の文字化けしないようにとかもサラッとやってたりしててかっこよかったです。個人的には、開発環境のことなのかもしれないけど、コードのスニペット？でしょうか、あんなテンポよくコーディングしてみたいので、そのあたりの手ほどき動画あるといいなぁと思います。たくさん動画アップされているようですので、勉強させてもらいますね。こんな動画上げてくれてありがとう、なんかやってみたくなりました〜

[@KiyotoUniv]

ありがとうございますー！是非ぜひトライしてみてください＾＾プログラミング楽しいですよ〜。 コーディングはVisual Studio Codeの補完機能ですね。こちらも検討してみますね。

[@stoic6086]

もう20年くらい前中学生の頃、ガラケーを買ってもらって一生懸命自分のブログのホームページ作ってたの懐かしい。 流行ってたよね。

[@kozukaeleven9040]

山浦さん相変わらずすごいですね☺ この案件をDockerを使って開発やってみて欲しいです！

[@user-kw9kn7gj8f]

私自身は全くこういうことに縁がないけど、エンジニアの友人たちがどういうことしてるのかを知れてすごい面白かったです。

[@KiyotoUniv]

よかったですー！＾＾

[@applqpak234]

自分がそのものには興味を持っていないけれど友人がしているから最低限で調べてみるのがすごいだと思います！

[@taichimorimoto748]

すごい勉強になります！ もしできたら、フロントエンド編も観たいです！

[@KiyotoUniv]

フロントエンド編ですね！検討してみますね＾＾

[@animyugen5646]

8割ぐらいまるでわからないので（・・・ｗ 掴めるようにならなきゃ！ってモチベーションになりました！

[@KiyotoUniv]

PHPやLaravelのこと知らないと分からないとこ多いですよね💦開発の流れやアプローチの仕方だけ参考にしていただけますと…！

[@user-gf9wi5gu5x]

書け易そう！php を勉強したくなった。

[@MaxMach555]

はじめての人にとってとても参考になると思いますね。通常の企業では、なかなか公開しないノウハウともいえる部分もあるのですが、属人化するよりは、こういった定型プロセスを学べるような新しいアプローチが良いのだと思いました。(^^♪

[@MRiguana99]

日ごろC# で自社の業務アプリ作ってるけど、Web関連の知識が弱すぎるんで参考になりました PHPは全く見た事が無かったのでTable構成とかCSV出力とかが全く違うのも面白かったです

[@whitecool]

phpは、多少わかりますが、ここまで細かく知らないので参考になりました。 何回か経験がないとここまで早く実装はできないでしょうね。

[@KM-sl9qw]

IT実務している方々にとって、この作業は普通レベルですよね。さらに強者が強烈な実務をこなしているのが凄い。私は介護２０年全く無縁なんで、動画の楽しいだけです。

[@quart95]

同じような仕事・案件があれば、ラッキーかもしれない。しかし、同じような仕事はなくなってしまうのが通常で、いつも新規技術を勉強する羽目になる。できる技術者には、難しい仕事が割り当てられるから、できる技術者は、さらに技術が磨かれていく。

[@GuCcI-tp4hb]

地方で独学エンジニアをやっている身としてはすごく勉強になります！

[@KiyotoUniv]

おぉ独学されてらっしゃるんですね！嬉しいですー！

[@user-hr6gh9us4s]

とても面白い内容だと思いました。 ありがとうございます。 ログイン後ページのスクレイピングが知りたいのですが、動画作ってもらえませんか。

[@user-or3gg3rg2e]

こういうのを待ってました！ そして、tシャツもvueと好感が高いです！！

[@KiyotoUniv]

よかったですー！そしてVueに気付いてくださってありがとうございます！＾＾

[@adventurecraftsman1470]

Reactが良いなぁ…………

[@syk-kp2mu]

今プロゲートでお勉強中なので目玉飛び出るかと思いました、、すごい、、

[@sonzaika]

とても為になる動画だと思います。 各プロセスをもっと詳細に、かつ、なぜそのように考えるのか？考える必要があるのかを 更に詳しくしていただければ、有料講座として購入したいです。 質問なのですが、動画ではソース納品が前提として進められてますが、 実際でも顧客が同じようにコマンドを叩いてプログラムを実行ことになるんでしょうか？ 顧客自身がコマンドに関する知識が必要かなぁと思いました。

[@KiyotoUniv]

顧客と相談する形になりますー。今回の場合は案件の内容に元々そのように記載されてました〜。

[@user-ze6wp7dh7v]

是非今後、Rails案件も見てみたいです！

[@KiyotoUniv]

Railsですね！検討してみます！

[@user-si1nh7nz2n]

おすすめに出てきたので見ました。プログラミングとか一切やったことないので、ほぼ何やってるか分からなかったけど、なんかカッコよくて少し憧れます（小並感）

[@user-qk5vm1lh9f]

1:21:58　こういう部分がリアルで参考になります 「コピペしてるから動くやろ」みたいな感覚でいるとこういう部分に気付かない事が多いので、 ちゃんとなんで元のデータが動いているかを考える力を身に着けようって思えました

[@typing-master]

最後の方のCSV書き込み周りの例外処理、try-catch で書くほうが良さそうですね。

[@user-gu1oc8ep9w]

1:18:46〜の予想通りに動作しないときの一つ一つの検証手順が参考になる

[@mizuchin36]

すごくわかりやすかったです！イメージできました。やはり公式ドキュメントを読むのがいいですよね。 もし、もう少し大きな案件で実装を他の人にもお願いしたりする場合、設計や実装の基盤を作ってから渡すような形をとるでしょうか？その人のレベル感にもよると思いますが。 そのあたりの考え方や作業内容を解説をしていただけると嬉しいです！ありがとうございます。

[@Maharo5630]

30万円案件クラスでも丁寧な仕事してますね、とても良いことです