webエンジニアになる為にどんなwebサイト・アプリを作ったらいいか？

webエンジニアを目指してプログラミングを学習し始めたあなたへ。

転職時にアピールするために、実務でも使う技術を練習するためにはどんなwebサイト・アプリを作ればいいかを考えてみました。

必要な機能を定義する

まずどんなwebアプリでもほぼ必須な機能を盛り込むことを意識します。以下のような感じ。

アカウント登録機能

どんなwebアプリでもアカウント登録は必須級ですね。

できればツイッターやgoogleアカウントを利用するOAuth認証にも手を出したいところですが、最初は混乱すると思うのでシンプルなものでいいです。

メールアドレスをパスワードを入力してユーザー登録完了、これくらいのものでいいでしょう。

データベースを利用したインプット（入力）

ユーザーが何かしら入力を行い、そのデータをデータベースに格納して保存。といった処理はこれまたどのwebアプリでも必須級です。

ツイッターのつぶやき、facebookやインスタの投稿など全てユーザーの入力したものはデータベースで管理されています。

はじめてにおすすめなのはただテキストを入力するだけのツイッターのような感じの機能ですね。

インプットされたデータのアウトプット（表示）

ただ入力する機能を作っただけでは意味がないので、入力されたデータを表示する、見せる仕組みも必要になります。

フォローしたユーザーのつぶやきが見られるタイムライン、フォローしているユーザーのページで投稿一覧が見られるなどそんな感じです。

最初としてはフォロー機能が少し敷居が高いかもしれませんので、自分を含め該当ユーザーのページにいくとその投稿一覧が見られるみたいな機能でいいかなと思います。

CRUD一式の機能

データベースにかかわる言葉なのですが、CRUDというものがあります。それぞれ詳しくは以下の通り。

データベースに対する操作のことなのですが、作成・読み込み・更新・削除のことになります。この一連の機能は作っておくと一通り経験できるので良いと思います。

ユーザーの投稿をデータベースに登録することで作成はクリア、投稿を取得して表示することで読み込みもクリアです。

あとはログインしているユーザーが自分の投稿の更新・削除ができるようにすればOKでしょう。

どんなwebアプリを作るかを画面設計から考えてみる

最低限押さえておくべき機能は上記の通り、次にそれらを含むどんなwebアプリを作るか？ということですが、ざっくり画面で考えてみるとイメージしやすくなると思います。

今回は簡単に以下のような感じで考えてみました。

まだまだ決めきることはないです、ざっくり決めたら今度もざっくり画面で考えてみます。

【画面1】

【画面2】

一つ目の画像がトップページのイメージで、トップページは全ユーザーの投稿、ユーザーページはそのユーザーの投稿ということでほぼ同じ画面で流用可能です。

二つ目の画像がアカウント登録の画面、ログイン画面も入力内容は同じなのでこれも流用して使います。

こうやって画面を考えながらどこをクリックするとどのページへ行くか、遷移図なんかも考えておくとだんだんサイトのイメージがつかめてくると思いますのでやってみてください。

ちょっとだけオリジナリティを出す

自由にテキストを投稿できるwebアプリは既にツイッターがありますので、ちょっとだけオリジナリティを出してみましょう。

例えばですがこんな感じ。

これを上記のサイトに当てはめて作成していきます。

この内容にしたのは投稿の際に追加で「ダイエット」「美味しいもの紹介」などのカテゴリやタグ付けすることで後々投稿を検索したりちょっとした拡張性が見込めるかなと思ったからです。

あなたの思い付きでなんでもいいので少しオリジナリティを出しておけばOKです。

まとめ

これくらいの機能のサイトが作れればひとまず入り口としてはOKですし、このサイトをベースに拡張していくことでより本格的な技能も習得可能です。

とはいえ頭の中で考えるだけではプログラミングは上達しませんので、次回以降はこのサイトを実際に作っていく工程を記事にしようかと思います。

ぜひ参考にしてみて下さい。