Re:ゼロから始めるSNS作り生活（一週間目＋α）

☆どんな記事？☆

プログラミング初心者が、イチからSNSサイトを構築する過程を記録したもの。
誰かに「勉強の状況はどう？」と訊かれたときに提示できるよう、Qiitaの記事として投稿しています。

☆前置きや前提☆

完成品のイメージ

• コンセプトは「勉強記録をポストしたり、問題を出しあったりできるSNS」
• 自分の勉強記録をポストし、閲覧できる
• 友人の勉強記録に対し、コメントやミニクイズを投稿できる（本記事では未実装）
• 自分と似た目標を持つユーザーを検索し、フォローできる（本記事では未実装）
• フォローしている人の勉強記録を一覧表示する「タイムライン」もある（本記事では未実装）
• 当然レスポンシブデザイン（本記事では未実装）

制作の目的

• プログラミング技術の向上
• あわよくば友人にこのSNSを使ってもらいたい

これまでの経験や知識

• WordPressで構築されたサイトの調整経験
  （2年弱従事していたため、HTML・CSS・PHPとも基礎はわかっていたつもり）
  （通信をはじめバックグラウンドの知識はゼロ）
• 大昔にイチからサイトを構築した経験
  （HTMLしか使用していない化石のようなサイトのみ）
• JavaScriptとSQL：1年ほど前にProgateで一応学んだだけで、ほぼ忘却
• DBの知識：応用情報技術者の合格ラインにギリギリ触れられる程度

☆日記☆

1日目（5月27日）

• 13時ごろ、大先輩に「アウトプットしろ！」と言われて、SNS作りを決意
• Visual Studio Codeの設定（なぜかインストールは済んでいた）
• XAMPPのインストールと設定
• 登録＆ログイン画面、ヘッダ、サイドバーのフロントエンドを制作
• 忘れていたHTMLやCSSのもろもろを適宜復習

2日目（5月28日）

• phpMyAdminの設定
• PDOについて学習
• ナンチャッテE-R図づくり
• ユーザー登録機能の実装
  （IDまたはメールアドレスが重複している場合は登録できないように調整）
• そのユーザー情報をDBにinsertできるように

3日目（5月29日）

• セッションについて学習
• セッション変数が消えてしまう現象に6時間くらい悩む
  （実際は消えたわけではなかった）
  （詳細は https://qiita.com/I-know-way/items/ca95ca1c0447dcc1a19d ）
• ともあれ無事にログイン機能を実装

4日目（5月30日）

• プロフィール画像の登録・表示・変更機能を実装
• Twitterのように、デフォルトで仮のプロフィール画像が設定されるように

5日目（5月31日）

• 勉強記録の登録機能を実装
• 勉強記録の一覧表示機能を実装

6日目（6月1日）

• アカウント情報（IDやメアドやパスワードなど）の変更機能を実装
  【ハマったドツボ】
  window.promptでユーザーが入力した値を、別ページ（PHP）で処理したい
  → JavaScriptのXMLHttpRequestを用いれば、別ページにPOST変数として値を送れる？
  → 送れない！　なんで！？
  （詳細は https://qiita.com/I-know-way/questions/207ba2104ff7a349d00e ）
  → 送れてはいた。しかしlocation.hrefで画面遷移してしまうと、その送信した値を確認できないらしい
  → GET通信のクエリを使って値を送ることにした

7日目（6月2日）

• PHPもSQLも使えるサーバー選びで一日が溶けた → 結局xreaに決定
• コードの見栄えや変数の命名法がひどいことに気づき、全体調整
  （画面に表示するphpファイルとDBを操作するphpファイルを分ける等）

8日目（6月3日）

• 各ファイルをアップロード
• アップ後もローカル環境と同様の挙動になるよう調整
  【ハマったドツボ】
  500エラー発生
  → ヒアドキュメントの終わり部分の前に、不要なスペースが残ってた
  → 解消したが、まだ500エラーが出ている
  → ホストかユーザー名かパスワードが変なのか？
  → サーバーの管理画面と超にらめっこ
  → https://kahoo.blog/php-pdo-check-mysql-connection-code/ を発見
  → 接続自体はできていることを確認。問題はそれ以外か……
  → session_start();を各ページに書いていなかったことに気づく
  （ローカルの場合、各ページにsession_start();を書くとSession already started - ignoring session_startとか何とか怒られるため、あえて書いていなかった）
  → session_start();を書いたら解決！
• 登録フォームにメールアドレスや英数字のバリデーションを設定
• 友人に依頼し、ありがたくもデバッグしてもらえることに

9日目（6月4日）

• ご指摘いただいたバグや懸念点の解消
  1.バリデーションに合わないデータを入力できてしまう問題
  2.プロフィール画像に画像ファイル以外をアップできてしまう問題
  3.何を入力したら良いかわかりにくい欄がある問題
  4.不要な非null制約が存在する問題
  5.アップロードファイルのサイズ制限が存在しない問題
• アカウント削除機能の実装

来週実装したい機能など

• 勉強記録やコメントに画像を貼付する機能
• 勉強記録の編集・削除機能（つまりCRUDのUとD）
• 友人の勉強記録に対し、コメントやミニクイズを投稿する機能
• 自分と似た目標を持つユーザーを検索し、フォローする機能
• フォローしている人の勉強記録を一覧表示する「タイムライン」機能
• レスポンシブデザイン化

いずれ行いたいこと

• よりセキュアに
• 全体的なデザインのブラッシュアップ
• androidアプリ化