底辺Fラン卒エンジニアブログ

Fラン卒SESエンジニアがアウトプットしてます。

ポートフォリオ作成(ワイヤーフレーム)

こんにちは。まさきです。

前回の記事から4日たってしまいました。

masaki-f.hatenablog.com

珍しく週末に予定が2件入ってバタバタしておりました。

来週も美容院に友人と映画鑑賞など忙しい6月を過ごしています。

しかし毎日ちまちま作業はしておりまして、本日ワイヤーフレームが完成しました。

最初は丁寧に丁寧にを意識していたのですが、なかなかイメージが掴めずとりあえず大雑把に全体像だけをイメージして作成しました。

今回もcacooで作成しています。

cacoo.com

私は無料版に登録しているのですが、無料版は6枚までしか図を作成することができず、先日のサイトマップで1枚使ってしまっていることからワイヤーフレームは5枚となりました。

有料版に登録も考えましたが、今回は初めてのアプリ開発となるのでとりあえず無料版で5枚に収める形で作成しました。

ここではとりあえず2枚公開しておきます。

f:id:rd0412:20210620150240p:plainf:id:rd0412:20210620150249p:plain
ワイヤーフレーム

だいぶ大雑把になりますがこんな感じです。

実際に画面を開発するときは、あらかじめ大雑把なイメージがあればそれを実装して後から必要なものを追加することができます。

私が企業の研修で行った開発研修でも最初のサイトイメージと全く違うものが最後にはできましたが、最初に枠があるととても作業しやすかったです。

てなわけでワイヤーフレームの作成は終了!

次は④デザインの作成

と行きたいところなのですが、とりあえずここもスキップしたいと思います。

やはりサイトの大まかなイメージが無いと、デザインがよく思い浮かばなそうなのです。 (エンジニアとしては、よく無いかも知れませんが...)

昔から絵心が無く、デザイン系のセンスは皆無であると自覚しております。

なので、ある程度の基礎の画面レイアウトと機能が実装できた段階でレイアウトイメージを作成して実際に適用させたいというのが今の私の方針です。

以上のことにより⑤データモデルの設計に取り掛かります。

ワイヤーフレーム作成では、具体的な項目を全て文字で表現してあったのでこの工程は中々に時間がかかりそうです。

それでは、作業に入ってきます。

ポートフォリオ作成(サイトマップ)

こんばんは。まさきです。

昨日の記事では、最初は簡単な仕様書を書くと宣言しました。

masaki-f.hatenablog.com

実際に書き始めようと会社の研修資料に目を通してみるとユースケースの洗い出しなんかを行ったりしてました。

そして仕様書について調べてみたりしても、お客様とのすれ違いを無くすためなどが一番の理由と書いてありました。

そのため今回は完全自分一人でシステムを作成していくのでいらないかなと考えスキップしました。

一応ポートフォリオの仕様書を書いてらっしゃる方がいましたが、とりあえず今回は無くても大丈夫との判断を下しました。

なのでサイトマップ作成に作業を移し、完成しました。

f:id:rd0412:20210615215605p:plain
ポートフォリオ サイトマップ

サイトマップの作成はcacooで行いました。

サイトはこちら。

cacoo.com

これは、完全に昨日の記事の見様見真似です。

とりあえず現段階でのイメージを書きました。

作成時間は30分程度です。

画像だと分かりにくいかもですが、今回自分はダイエット支援アプリの作成を行いと考えています。

コロナ禍で新人研修がフルリモートになり、自分が実際にダイエットを始めて10kg痩せ、今も食事制限や有酸素運動を続けています。

その結果を一括で全て記録できたらいいなと思ったのが今回の作成の経緯です。 (おそらく探せば現在もこのようなアプリはありますがそれは内緒で...)

というわけで次はワイヤーフレームの作成に移ります。

具体的な画面イメージがちょっとまだ固められてないので時間がかかるかもしれません。

がんばります。

ポートフォリオ作成準備編(設計)

こんばんは。まさきです。

実際にポートフォリオを作成していくにあたり自分なりに先輩達の記事をたくさん読んで学びました。

もともとチュートリアルを勉強中に自分で作ってみたいシステムの構想がすごく大雑把に頭の中にあったのでそれをイメージしながら記事を読んでいました。

今回は参考にした記事とともに何をするかをしっかりまとめたいと思います。

今回ご紹介する記事はこちら。

qiita.com

設計については、この記事で学ばせていただきました。

私自身が現在企業の研修で1からグループでシステムを開発する研修を行っており、つい最近設計を行ったばかりです。

設計があるとないとでは、プログラミングのスピードがこんなにも違うのかと驚きました。

そのため、今回もまずはしっかり設計を行います。

まずは簡単な仕様書を書きたいと感じております。

ということでやること①。

簡単な仕様書を書く。

ここからは、私が研修で行った事と記事に書いてあることが全く一緒だったので記事に従いながら作業を洗い出します。

ということで次はサイトマップの作成。

サイトマップを作成する。

次にワイヤーフレームを作成。

ワイヤーフレームを作成する。

その次は、大まかにデザインを考えます。

軽いデザインを作成する。

そして最後にデータモデル設計を行います。

データモデルを設計する。

このデータモデル設計に多くの時間がかかる予定です。

企業の研修でも丸1日(7時間)掛かりました。

しかし、ここを丁寧に行うことによってデータベースの掌握が簡単になりますし、データベースに何か追加するときも設計をしておけば簡単に理解できます。

とりあえず設計はこんな感じで行きます。

実際のプログラミングもどのような感じで行うのかイメージはあったりするのですが、まずは本日洗い出した設計5つをしっかりこなせたらままた準備編(プログラミング)を作成したいと思います。

ということで明日からは、①簡単な仕様書を書く。に取り組みます。

これが終了した段階でまたブログを書きたいと思います!

Fラン卒エンジニアブログ開設

はじめまして。まさきと申します。

この度ブログを始めてみました。

いきなりですが、私のプロフィールと経歴を紹介します。

文系Fラン4年生大学を21年に卒業。

今は、SESの企業で新卒として働いています。

大学3年生の時にエンジニアになりたいと思いIT業界への就職を決意し就職活動へ。

大学4年生色々あってrubyを独学で学習し始め、rubyのエンジニアになるため勉強開始。

このまま勉強を続けてrubyのエンジニアになろうと思い、絶対受からないと思っていた会社の最終面接のみを残して就職活動を中断するも、その1社から内定を貰います。

現在この会社で働いているのですがはっきり言ってFラン学生には中々手が届かない良い会社です。

家族や大学の人々とたくさん話し、働きながらもrubyを勉強し続けるぐらいの覚悟があるなら今の会社を辞めて転職すれば良いと判断し就職しました。

内定を承諾した6月以降は、rubyの勉強として、progateや書籍を何冊かこなしRailsチュートリアルを行う為、HTML/CSSSQLを書籍で勉強し、とりあえずITの知識を増やすためITパスポートも取りました。

そして実際にRailsチュートリアルに入り、チュートリアルを2周、qiitaにその結果を投稿したりしています。

何事も全く続かなかった私がなんだかんだ毎日毎日勉強を続けてここまで来ました。

働き始めて2ヶ月経ちますが現在も朝早く起きたり、リモートの日は、夜勉強したりとなんだかんだ続いています。

しかし明らかに学生時に比べて時間が無く、1週間に何日か勉強しない日も出てきてしまっています。

Web系のエンジニアの実務未経験は、年齢が命ということも分かっていますので、もし1年後にも働きながらRailsの勉強をしていたら会社を辞めてプログラミングスクールに通おうかなとも考えたりしています。(全くの未定)

そして今回いよいよポートフォリオ作成を行う為、qiitaには書けない個人の進捗などを書くためにこのブログを開設しました。

それと同時に現在Fラン大学に通っているエンジニア志望の学生や、私と同じく独学で勉強を続けている仲間に少しでも自分の体験を伝えられたら良いなとも思っていたりします。

長くなりましたがとりあえずは、railsポートフォリオの作成のための準備や実際に作成していく過程の投稿を行なっていく予定です。

よろしくお願いします。