この投稿ではプログラミング経験０の自分が１年かけてウェブサイトを作ってみて思ったことやその過程を書いていこうと思います。
私のように初心者の方でこれからウェブサイトを作りたいと思っている方の参考になればと思います。
背景
私は趣味でもう何年も筋トレをやっていて、ある日の思いつきでウェブ上にフィットネス関連のウェブサイトを作りたいと思ったのがきっかけです。（詳細後述）
しかし私は大学でもまったくプログラミングの授業をとりませんでしたしHTMLやCSSの基礎知識もありませんでした。
しかしどうしてもこのウェブサイトを作りたいと思いとりあえずPHPの本を図書館で借りて読み始めたのがプログラミングにのめり込んだ第一歩です。
現実の壁
今プログラミングといってもサイトを一人で作るなら色々な知識が必要になります。まずは開発環境をつくらなければなりません。そしてウェブ上ではHTML、CSSは必須です。データを取り扱うサイトならサーバーサイドの言語を覚え更にSQL、ユーザビリティーを向上させるためにJavascriptを使い最近のフロントエンドの流れになるならウェブパックを覚えJSのコンポーネント化、スマートフォンに対応させる為にサイトのレスポンシブ化、サイトのセキュリティー、オブジェクト指向、RESTなどなど他にもまだまだあり私自身も途中で何度も挫折しそうになりました。
過程
２０１６年の２月からプログラミングを始めました。最初を図書館にあったPHPやJavascriptの本を読んだのですが、すべてが新しすぎて頭に入ってこなかったように思えます。むしろPHPとJavascriptの違いがわからなかったぐらいです。
しかしとりあえずコードを書いてみようと思いCode SchoolでJavascriptとPHPのコースを受け基礎を少しだけ理解しました。
それで実際にプログラミングを始めるにあたり情報を探していたところ、どこかのサイトで今は開発にフレームワークは必須だという投稿をみてPHPのフレームワークについて調べ始めました。そんな時出会ったのがLaravelです。
LaravelとLaracastsとの出会い
Laravelは海外で人気のあるフレームワークで個人的には痒いところまで手が届きものすごく洗練されたフレームワークに感じます。しかし当時はもちろん何がいいのかまったくわからずとりあえずオンラインで情報を集め始めました。そこで運命的な出会いをしました。このウェブサイトは英語ですがモダンなウェブサイト開発のテクニックを動画で学ぶことができます。
Laracasts
後々なんどこのサイトに助けられたかわかりません。サイト構築に必要な情報やデザインパターン、ベストプラクティスなどなどを月々１０００円ぐらいで学べるのでオススメです。
テキストエディターの選択
ウェブサイトに開発に取り掛かる前にやったことはテキストエディターの選択でした。情報をみているとVimがいいということなのでLaracastsでVim入門の動画をみてMacVimをセッティングしてみたのですがまあ使いにくかったです。ここで素直にあきらめLaracastsで今度はSublime入門の動画を見て素直にSublimeテキストを使うことに決めました。
しかし後々Vimも使うようになりいまではSublimeとVimをその日の気分によって使ってます。HJKL、cw最高です
Laravelでの開発
テキストエディターも設定し早速開発しなきゃいけないのですがどうやって開発環境を設定するかわかりませんでした。しかしLaravelをつかっていればLaravel ValetやHomesteadをつかえば知識がなくても開発環境を設定できます。ちなみにLaracastsはLaravelの使い方を教えるサイトとして登場したのでLaravelに関する情報をそろっていますので参考にしてみてください。
Laravelで一番驚いたのがその直感的なコードです。まるで英語の文章を書くようにコードを書けるのにはびっくりしました。
例）User::find(1);
abort_unless($user->can('edit', $post));
他にもValidationも強力でDIやORMなどなどLaravelを選んでよかったと思いました。
Vue最高
ある程度Laravelにも慣れてきて次に取り掛かったのがJavascriptです。ウェブサイト上で自分のコメントを投稿した後編集したいときにブラウザーのリフレッシュなしで編集するためにAjaxを使いたいと思いVue.jsを学び始めました。なぜVueなのかというと他にもReactやらあるのですがやはりLaracastsでのVuejs入門（無料）をみて非常にシンプルで使いやすそうだと思ったからです。
Vue.jsは本当に書くのが楽しいです。当時全くの初心者の私でも簡単なコードならすぐ書けるようになったので初心者のかたにはおすすめです。
HTML CSS
近年スマートフォンでどこからでもインターネットにつなぐことができます。なのでスマホでウェブサイトを綺麗に見せなきゃいけないと思い次にサイトのレスポンシブ化にとりかかりました。最初はFlexboxなどを使い自分で書いていたのですがあまりのセンスのなさにフレームワークを使い始めました。こんなにウェブサイトのデザインが難しいとは思いませんでした。デザインが決まったらコードにするのはできるのですがそれまでの過程に至るまですごく時間を取られており、行き詰まった時は参考になりそうなサイトを探しとりあえずデバッグツールを開いてCSSを研究したりしていました。
時は経ち
なんども書いたコードを消しては書き、消しては書き自分の納得のいくまでやっているうちに季節は変わりなんとか公開できるまでレベルまでになりました。ここまで来るのに何冊本を読み、何本動画を見て知識を詰め込んだかわかりません。
Deploy
そしてつい最近オンラインであげたサイトがこちらです。
https://kawaritai.com
このサイトでは運動方法を動画で学ぶことができたり自分の運動プランを他のユーザーと共有したり掲示板で他のユーザーと情報交換をしたり記事を読めたりトレーナーがフィットネスのレッスンを投稿できたりなどフィットネスに関する情報を扱っております。
よかったら会員登録よろしくお願いします
最後に
プログラミングを経験してみて思ったことはプログラマーの皆様を本当にすごいと思いました。たった一つのウェブサイトを作るのに色々な知識を得なくてはいけないし、テクノロジーの変化に追いつこうとしないと置いてけぼりになる世界で常に流れに食らいついていくのは本当に大変だと思います。
しかしその反面自分で自分の世界をウェブ上に作れる能力というものをかけがえのないものだと思います。それこそアイデア１つで世界を変えれるものを自分の指で作り出せるなんて夢のある職業だと思います。本当にあの時、気を挫くことなくプログラミング初めてよかったと今では思います。これからもこのウェブサイトを向上させる傍、次のアイデアを現実化しようと思います。
最後まで読んでくれた方どうもありがとうございました!!
Happy Coding