プログラミング経験0から始め１年かけてウェブサイトを作ってみた話

この投稿ではプログラミング経験０の自分が１年かけてウェブサイトを作ってみて思ったことやその過程を書いていこうと思います。
１年前の私のようにまったくの初心者の方でこれからウェブサイトを作りたいと思っている方の参考になればと思います。

またもうすでにバリバリ開発しておられる方はあーこんな時あったなみたいな感じで読んでみてください。

背景

私は趣味でもう何年も筋トレをやっていて、ある日の急な思いつきでウェブ上にフィットネス関連のウェブサイトを作りたいと思ったのがプログラミングに興味を持ったきっかけでした。（詳細後述）

肝心のプログラミングの知識はというと私は大学でもまったくプログラミングの授業をとりませんでしたしHTMLやCSSの基礎知識もありませんでした。
しかしどうしてもこのウェブサイトを作りたいと思いとりあえずPHPの本を図書館で借りて読み始めたのがこの長い長い旅の第一歩でした。

現実の壁

今プログラミングといってもサイトを一人で作るなら色々な知識が必要になってくると思います。まずは開発環境をつくらなければなりません。そしてウェブ上ではHTML、CSSは必須です。データを取り扱うサイトならサーバーサイドの言語を覚え更にSQL、ユーザビリティーを向上させるためにJavascriptを使い最近のフロントエンドの流れにのるならウェブパックを覚えJSのコンポーネント化、スマートフォンに対応させる為にサイトのレスポンシブ化、サイトのセキュリティー、オブジェクト指向、RESTなどなど他にもまだまだあると思います。
プログラミング始める前に情報収集した段階で本当に自分１人でウェブサイトなんて作れるのかとすでに心が折れかけました。

過程

そんな中とりあえず前進しようと思い２０１６年の２月からプログラミングを始めました。最初は図書館にあったPHPやJavascriptの本を読んだのですが、すべてが新しすぎて今思えば頭に入ってこなかったように思えます。むしろPHPとJavascriptの違いがわからなかったぐらいです。
しかしとりあえずコードを書いてみようと思いCode SchoolでJavascriptとPHPのコースを受け基礎を少しだけ理解しました。

そのコースを受けた後はまだウェブサイトの仕組みやプログラミング言語の基礎中の基礎しかわからないレベルでしたが、コードを覚えるのは実際に書いてみることがいいのかと思いとりあえずもう開発をしていこうと決めました。

それで実際に開発を始めるにあたり情報を探していたところ、どこかのサイトで今は開発にフレームワークは必須だという投稿をみてPHPのフレームワークについて調べ始めました。そんな時出会ったのがPHPのフレームワークLaravelです。

LaravelとLaracastsとの出会い

Laravelは海外で人気のあるフレームワークで個人的には痒いところまで手が届き、ものすごく洗練されたフレームワークに感じます。しかし当時はもちろん何がいいのかまったくわからずとりあえずオンラインで情報を集め始めました。そこでLaracastsというサイトと運命的な出会いをしました。このサイトなのですが、Laravelのコアメンバーの一人が動画でモダンなウェブサイト開発のテクニックを教えているサイトです。
Laracasts
後々なんどこのサイトに助けられたかわかりません。サイト構築に必要な情報やデザインパターン、ベストプラクティスなどなどを月々１０００円ぐらいで学べます。

自分の中でこのサイトと出会わなければプラス１年はウェブサイトを作るのに時間がかかっていたと思っています。

テキストエディターの選択

ウェブの知識を学ぶベストなリソースを発見し早速開発スタートです。まずウェブサイト開発に取り掛かる前にやったことはテキストエディターの選択でした。オンライン上の情報をみていると、ある人種を発見しました。その名もVimmer！！

その方達の強烈なVim推しに負けLaracastsでVim入門の動画をみてMacVimをセッティングしてみました。

まあ言わずもがな当時は騙された気分でした。

その時は速攻であきらめLaracastsで今度はSublime入門の動画を見て素直にSublimeテキストを使うことに決めました。
https://laracasts.com/series/sublime-text-mastery/episodes/1
しかし後々あの方達があんなに推すのだから何かそれだけの魅力があるのかもしれないと思い我慢して一週間、１ヶ月と使っているとVimのコマンドの素晴らしさに気づくことができました。

Vimも使うようになりいまではSublimeもVintageモードでつかいその日の気分によってどちらかのエディターを使いわけています。HJKL、cw最高です

そしてLaracastsには当時の僕では絶対に一人ではできなかったであろうVimの設定を動画で教えてもらい感謝しています。

https://laracasts.com/series/vim-mastery

Laravelでの開発

テキストエディターも設定し早速開発しなきゃいけないのですがどうやって開発環境を設定するかわかりませんでした。しかしLaravelをつかっていればLaravel ValetやHomesteadを使用できるので問題ありません。知識がなくても開発環境を速攻で設定することができます。ちなみにLaracastsはLaravelの使い方を教えるサイトとして登場したのでLaravelに関する情報はそろっていますので参考にしてみてください。

Laravelで一番驚いたのがその直感的なコードです。まるで英語の文章を書くようにコードを書けるのにはびっくりしました。
例）$user = User::find(1);
abort_unless($user->can('edit', $post));
他にもLaravelには素晴らしい機能が満載で強力なValidation、DI、ORM、サービスコンテイナーなどなどがありLaravelを使っているうちにLaravelで使われている良いデザインパターンも身についていったように思います。

Vue最高

ある程度Laravelにも慣れてきて次に取り掛かったのがJavascriptです。きっかけはというとウェブサイト上で自分のコメントを投稿した後、編集したいときにブラウザーのリフレッシュなしで編集するためにAjaxを使いたいと思いVue.jsを学び始めました。なぜVueなのかというと他にもReactやらあるのですがやはりLaracastsでのVuejs入門（無料）とReactの入門をみて考査した結果Vueの方が初心者フレンドリーだと思ったからです。

• Vue入門
• React入門

Vue.jsは本当に書くのが楽しいです。当時全くの初心者の私でも簡単なコードならすぐ書けるようになったので初心者の方にはおすすめです。

HTML CSS

次はスマホでウェブサイトを綺麗に見せなきゃいけないと思いサイトのレスポンシブ化にとりかかりました。最初はFlexboxなどを使い自分で書いていたのですがあまりのセンスのなさにフレームワークを使い始めました。こんなにウェブサイトのデザインが難しいとは思いませんでした。デザインが決まったらコードにするのはできるのですがそれまでの過程に至るまですごく時間を取られており、行き詰まった時は参考になりそうなサイトを探しとりあえずデバッグツールを開いてCSSを研究したりしていました。

時は経ち

なんども書いたコードを消しては書き、書いては消し自分の納得のいくまでやっているうちに季節は変わりなんとか公開できるレベルまでになりました。ここまで来るのに何冊本を読み、何本動画を見て知識を詰め込んだかわかりません。
日に日に僕のItermはカッコよくなっていきテキストエディターのテーマは何度も変わり、作業の効率化といってショートカットキーは増えトラックパッドは自分好みに設定し最早友達などにこのマックブックを貸したら使いにくいと言われるレベルまでに気づかないうちになっていました
このような節思い当たる方必ずいるはずです。

最後に

プログラミングを経験し感じたことはプログラマーという職業は一言で言うとたいへんだなと思いました。その理由の１つとして、テクノロジーの変化に追いつこうとしないと置いてけぼりになる世界で常に流れに食らいついていくために知識を毎日得ていくことは非常に根気のいることだと思います。いまはただただリスペクトしかありません。

プログラミングはたいへんですが、その反面自分で自分の世界をウェブ上に作れる能力というものはかけがえのないもので、それこそアイデア１つで世界を変えれるものを自分の指で作り出せるなんて非常に夢のある職業だと思います。本当にあの時、気を挫くことなくプログラミング始めてよかったと今では感じます。これからもこのウェブサイトを向上させる傍、次のアイデアを現実化していきたいです。

もし１年前の僕のような立場にいるひと、たしかに１人でウェブサイトを作るとなるとかなりの知識を得ていかなければならないですが一歩一歩すすんでゆけばいずれ完成します笑

始めるときは私のたどってきた道（LaravelやVue）を選択肢の一つとして考えていただければ光栄です。

最後まで読んでくれた方どうもありがとうございました!!

そして皆様Happy Coding