【Webアプリの例を具体的に紹介】Djangoポートフォリオの作り方を解説
1. 今回の記事の内容
こんにちは、ぎーたかです。
Django学習の1つの登竜門に”ポートフォリオ作成”があります。
いざポートフォリオ作成に取り組む際、多くの初学者が以下の様な悩みを抱えるのではないでしょうか。
■初学者のポートフォリオ作成に関する悩み
・構想中のポートフォリオに、どんな機能が必要か分からない
・作れる/作れない機能の分別や、作り方の考案を自分でできない
・そもそも作りたいポートフォリオのアイデアが思いつかない
こうした悩みも、ポートフォリオの概要・作成する機能さえ誰かに示してもらえば解決する、と筆者は考えています。その後は諦めずに作成を進めれば、次第にポートフォリオの完成も見えてくることでしょう。
筆者もDjangoを使った初めてのポートフォリオ作成の際は、「どんなジャンルのサービスを作ろう...」「どんな機能を作ればいいんだろう...」と同じ悩みを抱えていました。
幸運にも共同開発者を見つけ、互いに意見を交わして作成方針・必要機能について決定する体制を整えてからは、作成作業自体は独力で推進できていました。実際、方針・作業内容さえ決まってしまえば、作成自体は難しくなかったのです。
だからこの記事では、上で述べた初学者の悩みを解決すべく、作成するポートフォリオの参考にできる様なWebアプリの例を2つ紹介します。
各アプリの必要機能についても、読者の皆さんの作成作業への落とし込みの一助になる様、筆者の考えで作成すべき機能を分解して説明します。
つまりこの記事を読めば、ポートフォリオ作成の方針が決まらず悩む読者の皆さんも、ポートフォリオ完成に向けた一歩を踏み出せる様になります！ぜひ最後まで読んでいってください！
それでは実際に紹介していきましょう！
2. サンプルアプリの紹介Ⅰ ~ブログサイト~
■概要の紹介
サービスのイメージはWordPress・Amebaブログの様な、個人・法人による記事投稿サイトです。
投稿内容は、好きな題材で問題ないです。
ポートフォリオの活用目的にもよりますが、あくまで技術力のアピール（サービス作成や公開に関する技術）のためなら、記事の内容はあまり重要ではないです。記事の内容よりも、サービスの機能の作り込みにパワーを振りましょう。
最悪、ネットで調べて得た情報を、いくつか自分の表現でまとめ直して載せておくだけで十分なので、筆者は学習系のジャンルをオススメします。学習系のまとめサイトは、既にカテゴリ分け等の体系化がなされていることが多いので、活用しやすいでしょう。
一応、参考になるサイトの例を紹介しておきます。”バズ部”というサイトですが、記事の書き方などコンテンツマーケティングの発信をしているサイトです。このサービスの記事は、読み物としても参考になります。自分の勉強もできて一石二鳥な気持ちで参考にしてみてはいかがでしょうか。
ブログサイトは、シンプルな機能で構成できるので、初学者用のポートフォリオとしては打って付けかと思います。ちなみに、筆者が初めて手がけたポートフォリオはブログサイトのタイプに近いです。
それでは、必要機能・作業について筆者の分析を示していきます。
■必要機能・作業の分析
今回の記事では、Webアプリ毎に筆者の考える必要な機能を紹介します。
紹介の中では、作成へのとっつきやすさの都合、機能を2種類に分類して紹介します。
種類の1つは、最低限必要な”マスト機能”。紹介するWebアプリを運用する上で欠けてはならない機能を取り上げます。
もう一方は、あればなお良い”ウォント機能”。なくてもWebアプリとしては成立しますが、作れればポートフォリオとして技術アピールになる機能を取り上げます。
まずは実装必須、かつ難易度もそれほど高くないマスト機能に取り組んでいただき、さらに余力がある読者の方はウォント機能まで取り組んでいただけると良いかと思います。
それでは、ブログサイトのマスト機能から早速説明していきましょう！
2.1 マスト機能・作成方法 ~ブログサイト~
■記事の投稿・閲覧機能
ポートフォリオの肝になる記事投稿・閲覧の機能です。
マスト機能となるのは、ブログサイトではこの機能のみです。
最小単位の機能まで分割すると、以下が必要になります。
①記事の投稿機能
②投稿記事の一覧ページ表示機能
③投稿記事の閲覧ページ表示機能
１つずつ作成作業を解説していきましょう。
①記事の投稿機能
作成作業をDjangoのMTVモデルの観点で整理すると、
・M...投稿記事用のモデルの作成
・V...追加不要
・T...追加不要
が必要になります。
投稿記事用のモデルのフィールドには、タイトルと記事本文があれば十分でしょう。
投稿のためのビュー作成が不要なのは不思議かもしれませんが、アプリ作成者＝投稿者の場合に限り、Django標準の管理画面から投稿記事を作成できるので筆者は不要と考えています。
なお、より詳細な作り方を知りたい読者の方は、ぜひ下のリンクの記事の無料枠を読んでみてください。記事の文章を装飾でアレンジできる投稿モデルの作り方を紹介しているので、参考になるかと思います。
②投稿記事の一覧ページ表示機能
作成作業をMTVモデルで整理すると、
・M...追加不要
・V...投稿記事モデルの全オブジェクトを、
一覧ページ用テンプレートに渡すビュー作成（ListView推奨）
・T...↑ビューからの受け取る全記事オブジェクトの、
”タイトル”のみ表示する一覧ページ用テンプレート作成
が必要になります。
なお、一覧ページ用のビューには、Django標準の便利なビューを使うとかなり簡単に実装できるので、筆者はListViewの使用をオススメします。
ListViewについて詳細な使い方を知りたい方は、下のリンクの記事の3.5汎用ビューを読んでみてください。ListViewを使ったサンプルコードを記載しているので、参考になるかと思います。
③投稿記事の詳細ページ表示機能
作成作業をMTVモデルで整理すると、
・M...追加不要
・V...投稿記事モデルの1つのオブジェクトを、
詳細ページ用テンプレートに渡すビュー作成（DetailView推奨）
・T...↑ビューからの受け取る記事オブジェクトの、
”タイトル”と”本文”を表示する詳細ページ用テンプレート作成
が必要になります。
なお、詳細ページ用のビューにも、Django標準の便利なビューを使うとかなり簡単に実装できるので、筆者はDetailViewの使用をオススメします。
DetailViewについて詳細な使い方を知りたい方も、上記のリンクの記事の3.5汎用ビューを読んでみて欲しいです。DetailViewを使ったサンプルコードを記載しているので、参考になるかと思います。
2.2 ウォント機能・作成方法 ~ブログサイト~
■記事のカテゴリ登録・カテゴリ別表示機能
興味のあるカテゴリの記事だけを表示してくれる機能があると嬉しいですよね。1つ目のウォント機能は記事のカテゴリ分けの機能です。
最小単位の機能まで分割すると、以下が必要になります。
①記事カテゴリの登録機能
②特定カテゴリ記事の一覧ページ表示機能
１つずつ作成作業を解説していきましょう。
①記事カテゴリの登録機能
作成作業をMTVモデルで整理すると、
・M...カテゴリ用のモデル作成、
投稿記事用モデルへのカテゴリフィールドの追加
・V...追加不要
・T...追加不要
が必要になります。
カテゴリモデルのフィールドには、カテゴリ名とスラッグのものがあれば十分です。投稿記事用モデルの作成と同じ要領作ってしまいましょう。
ちなみにスラッグとは、一般に紐づくワード（ここではカテゴリ名のこと）を英単語・複合英単語で言い換えたものを指します。
なおスラッグについては、少し説明ややこしいのですが、次の②特定カテゴリ記事の一覧ページ表示機能の説明に必要なので、そちらでなるべく簡潔に取り上げます。
また、投稿記事用モデルへのカテゴリフィールドの追加については、ForeignKeyというフィールドタイプの使用を筆者はオススメします。
なお、ForeignKeyの詳しい使い方に関しては、下のリンクの記事の4.3 ForeignKeyで紹介しているので、是非参考にしてみてください。
②特定カテゴリ記事の一覧ページ表示機能
作成作業をMTVモデルで整理すると、
・M...追加不要
・V...指定カテゴリをカテゴリフィールドにもつ投稿記事オブジェクトを、
一覧ページ用テンプレートに渡すビュー作成（ListView推奨）
・T...↑ビューからの受け取る全記事オブジェクトの、
”タイトル”のみ表示する一覧ページ用テンプレート作成
が必要になります。
ビューでカテゴリを指定する方法には、スラッグの活用をオススメします。スラッグを含めたURLで、紐づくワード（今回はカテゴリ名）に関するWebページを表示する仕組みにすることで、HTMLに埋め込むデータの適切な処理に貢献できる役割を持たせられます。
カテゴリの一覧ページ用のビューにもListViewが使えます。
URLに含めたスラッグを活用するために、少し処理を追記する必要がありますが、是非挑戦してみて欲しいです。
もし、どうしても実装が難しくて挫折しそうな方は、投稿機能の項目でも紹介した記事の有料枠がかなり助けになるかと思います。ListViewを使った実装とは異なる方法を解説していますが、サンプルコード付きで丁寧に解説しています。
カテゴリページ作成に留まらず、様々な追加機能の実装をサンプルコード付きで解説しているので是非検討してみてください。（↓しつこいですがリンクです）
■記事の閲覧回数カウント・閲覧数ランキング表示機能
閲覧回数の多い記事をまとめて表示してくれるページがあると嬉しいですよね。2つ目のウォント機能は記事の閲覧回数カウント機能です。
最小単位の機能まで分解すると、以下が必要になります。
①記事閲覧回数のカウント機能
②閲覧回数順の記事ランキングページ表示機能
1つずつ作成作業を解説していきましょう。
①記事閲覧回数のカウント機能
作成作業をMTVモデルで整理すると、
・M...投稿記事モデルに閲覧回数記録用のフィールド追加
・V...投稿記事の詳細ページ表示ビューに、
対象記事の閲覧回数カウントアップ機能を追加
・T...追加不要
が必要になります。
閲覧回数用のフィールドには、PositiveIntegerFieldなど整数値を記録できるフィールドタイプを用いましょう。
ビューのカウントアップ機能の追加は、下のリンクの記事の4.2 DetailViewへの機能追加を参考にしてみてください。
②閲覧回数順の記事ランキングページ表示機能
作成作業をMTVモデルで整理すると、
・M...追加不要
・V...投稿記事の全オブジェクトを閲覧回数順に、
ランキングページ用テンプレートに渡すビュー作成（ListView推奨）
・T...↑ビューからの受け取る全記事オブジェクトの、
”タイトル”のみ表示する一覧ページ用テンプレート作成
が必要になります。
ビューの作成には、ListViewへの処理の追加が必要になるので、上記リンクの4.3 ListViewへの機能追加を参考にしてみてください。
ウォント機能まで作成し終えたならば、きっとDjangoで作れる/作れない機能の分別は着くようになっていると思います。
ここまででもポートフォリオとしては十分整っていますが、更なる技術力アピール用のオリジナル機能を、思いのままに追加トライしてみるとWEB開発もどんどん楽しくなっていくと思いますよ！
3. サンプルアプリの紹介Ⅱ ~SNS~
■概要の紹介
次のサービスのイメージはTwitter・Instagramの様な、個人・法人によるSNSサービスです。
ポートフォリオ作成に当たっては、SNSは超王道です。
オンラインのプログラミング学習サイトで有名なProgateでも、Twitterの作成を課題に取り上げています。Twitterは本当にちょうどいい題材になりますので、HTML /CSSのデザインまで完全パクリでない限りはかなり参考に作ることを筆者もオススメします。
ちなみに、ブログサイトよりも必要機能は増えて難易度は高いです。が、一定のスキルアピールには間違いなくなりますので、初学者用のポートフォリオとしては打って付けかと思います。
それでは、まずはマスト機能から筆者の考えを記述していきましょう。
3.1 マスト機能・作成方法 ~SNS~
■ユーザー機能
ポートフォリオの肝になるユーザーに関する機能です。
最小単位の機能まで分解すると、以下が必要です。
①ユーザー登録機能
②ユーザー退会機能
③ユーザーログイン機能
④ユーザーログアウト機能
こうしたユーザー機能は、Django標準の便利なメソッドを使うことで、Railsなどの他のフレームワークと比べて簡単に実装できます。
ただ、各メソッドに深い意味・処理が仕込まれている都合、サンプルコードなしに自分で実装するのは、結構難しいと筆者は感じます....
これらの全ての機能、以下のリンクの記事で実装方法について詳しく解説しています。サンプルコードも盛りだくさんなので、ぜひ参考にしていただけると嬉しいです。
もし、『難しくてもコードを見ずに挑戦してみたい！』という読者の方向けに、以下ではMTVで必要な作業分解は記述しておきます。
①ユーザー登録機能
※ユーザー登録用のフォームの作成が必要です。
・M...ユーザー用モデルの作成
・V...登録用フォームをユーザー登録用テンプレートに渡すビュー作成、
登録用テンプレートからの送信内容でユーザー登録するビュー作成
・T...↑の1つ目のビューからの受け取るフォームオブジェクトを表示する
ユーザー登録用テンプレート作成
②ユーザー退会機能
・M...追加不要
・V...退会の最終確認用ページ表示用のビュー作成、
ログインユーザーのユーザーオブジェクトを削除するビュー作成
・T...↑の1つ目のビューで表示する退会の最終確認用テンプレート作成
③ユーザーログイン機能
※ユーザーログイン用のフォームの作成が必要です。
・M...追加不要
・V...ログイン用フォームをログイン用テンプレートに渡すビュー作成、
ログイン用テンプレートからの送信内容でログインさせるビュー作成
・T...↑の1つ目のビューからの受け取るフォームオブジェクトを表示する
ユーザーログイン用テンプレート作成
④ユーザーログアウト機能
・M...追加不要
・V...ログインユーザーのログアウトを実行するビューの作成
・T...追加不要
■Tweet機能
ポートフォリオの肝になるつぶやき投稿機能です。
最小単位の機能まで分解すると、以下が必要です。
①投稿機能
②投稿一覧ページ表示機能
ほとんどブログサイトの作成方法と同じですが、SNSでの作成ならではのポイントが数点あります。変更すべき点にフォーカスしながら、取り上げていきましょう。
①投稿機能
※投稿作成用のフォームの作成が必要です。
・M...投稿用モデルの作成
・V...投稿用フォームを投稿用テンプレートに渡すビュー作成、
投稿用テンプレートからの送信内容で投稿作成するビューの作成
・T...↑の1つ目のビューからの受け取るフォームオブジェクトを表示する
投稿用テンプレート作成
ブログサイトと異なる点のみ解説すると、
モデルには、タイトルフィールドは不要かと思います。それに、投稿本文には文字の最大数制限を設けましょう。そして新たに、”誰が投稿したか”の情報を含めたいのでユーザーフィールドの追加が必要になります。ForeignKeyで追加してあげましょう。
また、ブログサイトとは異なり、投稿作成者＝サイト運営者とは限らないので、投稿作成用のビューやテンプレートが必要です。
ちなみに、フォームの作成はDjango標準のCreateViewを活用すると不要になります。簡単に実装できるので、是非トライしてみると良いかと思います。
CreateViewは、ListView・DetailViewの解説記事で併せて解説していますので、詳細な使い方を知りたい方は参考にしてください。（↓しつこいですがリンクです。）
②投稿一覧ページ表示機能
・M...追加不要
・V...投稿の全オブジェクトを、
一覧表示ページ用テンプレートに渡すビュー作成（ListView推奨）
・T...↑ビューからの受け取る全投稿オブジェクトの、
”ユーザー”と”本文”を表示する一覧ページ用テンプレート作成
ブログサイトと異なる点のみ解説すると、テンプレートへの表示項目は”ユーザー名”と”投稿本文”が良いかと思います。
3.2 ウォント機能・作成方法 ~SNS~
■プロフィール登録・閲覧機能
投稿発信者がどんな方なのか、プロフィールを読んで知りたいですよね。1つ目のウォント機能はユーザープロフィールの登録・閲覧機能です。
最小単位の機能まで分解すると、以下が必要です。
①ユーザーのプロフィール登録機能
②ユーザーのプロフィールページ表示機能
1つずつ作成作業を解説していきましょう。
①ユーザーのプロフィール登録機能
※プロフィール編集用のフォームの作成が必要です。
・M...ユーザー用モデルにプロフィール用のフィールド追加
・V...プロフィール登録用のフォームをテンプレートに渡すビューの作成、
登録用テンプレートの送信内容でプロフィール登録するビューの作成
・T...↑の1つ目のビューからの受け取るフォームオブジェクトを表示する
プロフィール登録用テンプレート作成
が必要になります。
こちらもCreateViewを使うことで、フォームの作成は不要とできるのでトライしてみることをオススメします。
②ユーザーのプロフィールページ表示機能
・M...追加不要
・V...ユーザーモデルの1つのオブジェクトを、
プロフィール表示用テンプレートに渡すビュー作成（DetailView推奨）
・T...↑ビューからの受け取るユーザーオブジェクトの、
”ユーザー名”と”プロフィール”の表示ページ用テンプレート作成
が必要になります。
ぜひDetailViewを使って実装してみることをオススメします。
■お気に入り登録機能
他のユーザーの投稿で「面白い！」、「ためになった！」と感じた投稿は、後でもう一度見れるようにお気に入り登録しておきたいですよね。2つ目のウォント機能はお気に入り登録機能です。
最小単位の機能まで分解すると、以下が必要です。
①お気に入り登録機能
②ユーザーのお気に入り投稿一覧ページ表示機能
1つずつ作成作業を解説していきましょう。
①お気に入り登録機能
・M...お気に入り情報用モデルの作成
・V...お気に入りボタンを押したユーザー・押された投稿オブジェクトを、
フィールドに持つお気に入りオブジェクトを作るビューの作成
・T...↑のビューを呼ぶお気に入りボタンを、投稿一覧ページの投稿毎に追加
が必要になります。
モデルには、ForeignKeyで”ユーザー”と”投稿”のもののフィールドを準備すれば十分かと思います。
②ユーザーのお気に入り投稿一覧ページ表示機能
・M...追加不要
・V...ログインユーザーに紐づく全お気に入りオブジェクトを、
お気に入り一覧表示テンプレートに渡すビュー作成（ListView推奨）
・T...↑ビューからの受け取るお気に入りオブジェクトの、
”投稿”の”ユーザー”と”本文”を表示するテンプレート作成
が必要になります。
ここでのテンプレートでの表示処理は、お気に入りのForeignKeyに保存されている”投稿”オブジェクトのパラメータにアクセスする必要があり、少し注意が必要です。
ForeignKeyを含むオブジェクトの処理は、習得できれば機能作成の幅をきっと広げてくれる便利なスキルになると思いますので、ぜひトライしてみて欲しいです。
もし、どうしても実装が難しくて挫折しそうな方は、ブログサイトの投稿機能の項目でも紹介した記事の有料枠がかなり助けになるかと思います。ListViewを使った実装とは異なる方法を解説していますが、サンプルコード付きで丁寧に解説しています。詳細を知りたい方は、ぜひ検討してくださると嬉しいです。（↓しつこいですがリンクです。）
SNSのウォント機能の紹介も、以上で終わりです。
もし、ここまで実装完了できたなら、いくつか技術的にもアピールできる内容もあるので、ポートフォリオとして十分な完成度のものが作れていると思います。
4. まとめ
いかがでしたか？
今回は、ポートフォリオ作成の指針となる様な情報をまとめてきました。
ポートフォリオ作成は登竜門です。
Webエンジニアを志すなら避けては通れない試練ですが、確かにただ本に沿って学習するのとは、一線を画す難しさがあることは筆者も重々理解しています。
しかし、その難しいチャレンジを乗り越える過程では、Webエンジニアとして活動できるだけの器量・技術を確実に身につけられます。憧れのWebエンジニアになる未来もすぐそこまで来ています。
苦しい期間もあるかと思いますが、本当に頑張って欲しいです。
この記事が、そうした試練を乗り越える一助になることを、筆者は心より願っています。
今後も、読者の皆さんに寄り添った記事を発信していきますので、よろしければフォロー・SNSシェアしてくださると嬉しいです！
5. おまけ
最後のおまけコラムとして、筆者がDjango開発の学習に使用した教材を紹介します。
Djangoプロジェクトの基本構成要素の全てを、基礎から分かりやすくサンプルコード付きで解説してくれています。そのため、筆者はDjangoの学習の過程で基本的な内容を確認し直したい時には、よく読み直していました。
筆者の感覚では、初めてのポートフォリオ開発を終えるまでは、なかなか基本すら定着していない状態が続くと思います。そういったレベルでは、疑問が生じたらすぐに解消していくのが、スキルアップの近道だと思いますので、こうした書籍を1冊だけでも基本に立ち返るために持っておきましょう。
ちなみに、筆者はこのシリーズで下の書籍も購入しました。
こちらには、サービスの公開技術について、かなり詳しく説明されています。実際にWebアプリの公開も実践してみたい方は、買って読んでみると良いかと思います。
よろしければサポートをお願いします🙇♂️ いただいたサポートは、クリエイターの活動資金として使わせていただきます😌 活動を通してえた経験を、また記事として皆さんと共有します👍