『週刊』PHP＋Laravel6 奮闘記④【第12号】
こんにちは！
テクノシップブログです！
先週から「『週刊』PHP＋Laravel6 奮闘記」と題しまして、
オリジナルアプリケーション第2段の開発記録を記事にしています。🔥
今回は前回から1週間が経過したので、目標の達成の有無の確認と
学習の振り返りをしていきたいと思います！！！
1.前回の目標の成果の確認
前回立てた目標は以下の通りでした。↓↓↓
---------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------
結果はどうだったのか。
目標達成です！！！
現時点(4/10)での進捗状況は以下のようになっています。↓↓↓
まず、仕様変更が1点あります。
前回、「詳細ページ」を無くしたと書いたのですが、
個別の俳句ごとにコメントを投稿したり、投稿されたコメントを閲覧できたりする
機能があると良いと考え直したので、「詳細ページ」を復活させました！！
以下のように、投稿された俳句の一覧ページから個別の詳細ページへ遷移できる
ようにしました。↓↓↓
遷移先の詳細ページにて、コメントを投稿したり、投稿されたコメントを確認
したりできます。
2.目標達成の要因
目標達成の要因を自分なりに分析してみると、
プログラミング学習に使う時間をしっかりと確保したこと
この1点につきます。
前回目標が達成できなかった時の要因として、
「転職活動に多くの時間を割き、プログラミング学習の時間を確保できなかった」
という点を挙げました。
この反省を活かし、「メリハリをつける」という心構えのもと、
1日の中で「転職活動に使う時間」と「プログラミング学習に使う時間」を明確に
設け、その時間を過ぎたら途中でも止めると決めました。
そのようにして、1週間を過ごしたところ、結果的に両方に平等に力を入れる
ことができるようになり、充実した1週間にすることができました。
「時間を区切って取り組む」という行動によって思わぬ効果もありました。
①生活のリズムが整う
②切りの悪いタイミングでも敢えて止めることで頭の中で自然と考え込む
特に②が良かったと思っています！
切りの悪いタイミングでも敢えて止めたことで、その後も意識しなくても
頭の中で考えてくれる＝復習してくれるというものです。
これは感覚的なものかと思っていましたが、調べてみると、
「ツァイガルニク効果」と呼ばれるものであり、
「人は達成しきったことよりも、途中で止めたり、挫折したことの方が強い印象
として頭に残す」という現象のようです。
まだ何となくの感覚ですが、良い方向で使えそうな感じがしています！！
「忙しい時ほどメリハリを」
というのは今後も実行したいですね。
3.ワンポイントアウトプット
ここでは、先週1週間の中で力を入れた部分や難しかった部分について
アウトプットしておきます。
今回は「コメント機能の実装」です。
以下のような、コメントを投稿できたり、閲覧できたりできる機能の実装の流れ
を一度アウトプットしておきます！！
①テーブル構造を確認し、モデルにリレーションを定義する
テーブル構造は以下のようになっています。
●「一人のuserは多数のcommentsを持つ」
●「一つのpostは多数のcommentsを持つ」
●「多数のcommentsはそれぞれ一人のuserと一つのpostに紐づく」
という関係性を持っています。これをもとにリレーションをモデルに定義します。
app/User.php
app/Post.php
app/Comment.php
これで、「usersテーブル」、「postsテーブル」、「commentsテーブル」
の3テーブル間のリレーションが定義できました。
②コメント投稿用のルーティングを設定する
次にコメントを投稿するためのルーティングを設定します。
今回は、「Commentsコントローラー」の「store」メソッドを定義すること
により、投稿されたコメントがstoreメソッドを使って保存されるようにしたい
ので、ルーティングは以下のように記述します。
routes/web.php
この時、どの投稿に関するコメントなのかをURLから判断できるようにしたい
ので、「posts/{post_id}/comments」とすることで、投稿された俳句情報を
持たせた上でコメントを投稿できるようにします。
③詳細ページにコメント投稿用のビューを作成する
次に、コメント投稿用のビューを俳句詳細表示ページに実装します。
コードは以下の通りです。
↓実際のビューは以下の通りになります。
この時、コード上では「user_id」と「post_id」もデータとしてフォームから
送れるようにしていますが、実際のビューには表示させないので、
「input type="hidden"」として非表示にしています。
④Commentsコントローラーにstoreメソッドを定義する
次にフォームから送られたコメント情報を保存するためのstoreメソッドを
Commentsコントローラーに定義します。
コードは以下の通りです。
処理の流れを言語化すると以下のようになります。
1. フォームから送られたデータを$requestとして受け取り、$dataに代入する。
2. Comment::insertGetId(~)により、Commentモデルを使って、データベースに
データを挿入(insert)した上で、commentのidを取得(GetId)します。
3. 保存完了後、リダイレクト処理を行う。
注意点として、2の記述はモデルを使った処理を表すものであるため、
コントローラーでモデルの記述を使えるようにしておく必要があります。
そこで、「use App\Comment;」と記述しておきます。
⑤詳細ページにて投稿されたコメントを確認できるようにビューを実装する
最後に、投稿されたコメントを閲覧できるようにビューを実装しておきます。
コードは以下の通りです。
↓実際のビューは以下のようになります。
これは、Bootstrapの「Collapse」という機能を使用しています。
コード中の「data-target="〇〇"」で指定した部分が表示・非表示切り替えの
対象になります。
今回は、id名で対象となる要素を指定しています。
また、対象となる要素については、「foreach」というメソッドを使用し、
投稿に紐づくコメントを一覧で表示できるようにしています。
ここで、先ほどのリレーション定義の力が活きてくるのです！！
「$post->comments」という記述は「投稿に紐づくコメントたち」
という意味ですが、これはリレーションを定義しているからこのように
記述できるのです。
以上で、アウトプットは終わりです！！
4.この1週間のまとめ
この1週間を一言でまとめると、
「メリハリが大切」
ということです。
1日の中で数多くやらなければならないことがあるとき、つい何か一つのことに
多くの時間を割いてしまいがちです。
しかし、そうすると得てしてダラダラと時間を過ごしてしまって、
結果、対して進まないということになりかねません。
そのため、自分自身に時間制限を設けて、与えた時間の中で精一杯やること
を今後意識して取り組んでいきたいと思います。
リズム良く！！
5.次回の目標の確認
次回(4/17)の目標は、
「バリデーションの設定とデプロイ完了」
とします！
次回もお楽しみに！！
6.テクノシップ第12号プチ編集後記
〜この1週間唯一のマイナスポイントとして、体重が増えてしまいました💦
夜の遅い時間に甘いものを食べ過ぎたことが原因ですかね。
ストレス食いの可能性もあるので、何かリフレッシュできる方法を
見つけないと。〜
『週刊』PHP＋Laravel6 奮闘記③【第11号】
こんにちは！
テクノシップブログです！
先週から「『週刊』PHP＋Laravel6 奮闘記」と題しまして、
オリジナルアプリケーション第2段の開発記録を記事にしています。🔥
今回は前回から1週間が経過したので、目標の達成の有無の確認と
学習の振り返りをしていきたいと思います！！！
1.前回の目標の成果の確認
前回立てた目標は以下の通りでした。↓↓↓
結果はどうだったのか。
目標未達成です、、、
現時点(4/4)での進捗状況は以下のようになっています。
まず、仕様変更が1点あります。
「一覧表示ページ」から「詳細ページ」へ遷移する流れを無くし、
直接編集や削除へ遷移できるようにしました。
以下のように、投句したものの表示項目が少ないため、詳細ページは
必要ないと考えた次第です。↓↓↓
2.目標未達成の要因
目標未達成の要因を自分なりに分析してみると、
転職活動に比重を置いた結果スキマ時間の活用を怠ってしまったこと
この1点につきます。
3/14から始めた転職活動も軌道に乗り、応募の通過率も上がってきました。
そうすると、企業研究、面接日程調査などで忙しくなってきた訳ですが、
1日の中で学習に使う時間をしっかりと確保した上での計画を立てていました。
しかし、いざ実行してみると、転職活動に使う時間で勝手に手一杯になり、
学習を怠ってしまう日がありました。
「忙しい時ほど、メリハリを」
という教訓が得られた1週間だったとも言えますね、、、
3.ワンポイントアウトプット
ここでは、先週1週間の中で力を入れた部分や難しかった部分について
アウトプットしておきます。
今回は「レイアウトファイルを活用した共通部分の切り出し」です。
「views」→「layouts」というフォルダの中に、各ページにおいて共通部分
として使用するためのビューの記述をしたファイルを作成できるという便利な
機能があります。
ここに、各ページごとに共通部分として使いたいビューを記述しておくことで、
コードの可読性、保守性の向上が期待できるというわけですね！！
基本的な使い方をアウトプットしておきます！
①共通部分として使用するビューの記述をレイアウトファイルにて行う
②そのファイルにおいて、個別に表示したいビューを差し込む場所を記述する
上の画像の「@yield('content')」というところに個別のビューが挿入されます。
この場合の'content'とは、挿入するページを識別するためのid名のようなもの
です。
③個別ページ用のファイルにおいて、一作業する
上の画像の「@extends('layouts.app')」という記述は、
「layoutsフォルダのapp.blade.phpというファイルにextend(=展開する)」という
意味のものになります。
そして、「@section('content')」〜「@endsection」で囲んだ部分が実際に
挿入されます。ここで'content'と記載してあることにより、先ほどのレイアウト
ファイルの'content'と突合され、しっかりと挿入されるようになります。
今回のアプリでは実際のブラウザで確認すると、以下のような内訳です。
4.この1週間のまとめ
この1週間を一言でまとめると、
「メリハリが大切」
ということです。
1日の中で数多くやらなければならないことがあるとき、つい何か一つのことに
多くの時間を割いてしまいがちです。
しかし、そうすると得てしてダラダラと時間を過ごしてしまって、
結果、対して進まないということになりかねません。
そのため、自分自身に時間制限を設けて、与えた時間の中で精一杯やること
を今後意識して取り組んでいきたいと思います。
リズム良く！！
5.次回の目標の確認
次回(4/10)の目標は、
「俳句の削除機能・マイページの実装完了」
とします！
次回もお楽しみに！！
6.テクノシップ第11号プチ編集後記
〜4/1に弟が社会人デビューしました！！
自分は現在転職活動という状況もあり、祝いつつも焦りを感じました💦
早く転職しないと！！〜
『週刊』PHP＋Laravel6 奮闘記②【第10号】
こんにちは！
テクノシップブログです！
先週から「『週刊』PHP＋Laravel6 奮闘記」と題しまして、
オリジナルアプリケーション第2段の開発記録を記事にしています。🔥
今回は前回から1週間が経過したので、目標の達成の有無の確認と
学習の振り返りをしていきたいと思います！！！
1.前回の目標の成果の確認
前回立てた目標は以下の通りでした。↓↓↓
結果はどうだったのか。
この目標は達成しました！！
現時点(3/27)での進捗状況は以下のようになっています。
2.目標達成の要因
目標達成の要因を自分なりに分析してみると、
①ユーザー管理機能を簡単に実装できるLaravel uiを使ったこと
②動画教材を使用して実装を進めたこと
この2点が挙げられます。
①については、Ruby on Railsのgemである「devise」と同じように、
インストールするだけでユーザー管理機能の実装が簡単にできてしまう
「Laravel ui」の使い方を学習したおかげで、効率的に実装ができました！！
【Laravel uiをインストールしただけで作れてしまうログイン画面】↓↓↓
後ほど具体的な学習の流れをアウトプットします！！
次に②についてですが、Youtubeで学習に役立ちそうな内容を発信している
方の動画を参考にさせていただき、一緒に作業を進めるようなイメージで
実装をすることができたので、スムーズに開発することができました！！
動画の利点は「細かい手順まで一緒に真似しながらできる点」だと思います！
やはり書籍では文字で説明する分、省いてしまう説明や伝わりづらい説明もある
と思いますが、動画ならそんなことはありませんよね。
引き続き、参考にしながら実装を進めたいと思います！！
3.ワンポイントアウトプット
ここでは、先週1週間の中で力を入れた部分や難しかった部分について
アウトプットしておきます。
今回は「Laravel uiのインストール」です。
実際に使用したコマンドを用いて説明していきます。
①composer require laravel/ui "^1.2"
→まずこちらのコマンドで、Laravel uiをインストールします。
バージョンは1.2というものを指定し、composerを使ってインストール
しています。
※composerとはlaravelに関するパッケージ管理を担ってくれる存在
②php artisan ui vue --auth
→次にこちらのコマンドで、「Vue」をインストールします。
VueとはJavaScriptのフレームワークの一つであります。フロントエンド
での機能実装に役立ってくれます。「package.json」ファイルにVueの記述
が出来上がります。
この時、「--auth」と付け加えることで、「認証機能」も一緒に導入する
ことができます。
③npm install
→次にこちらのコマンドで、npmをインストールします。
npmはNode Package Managerという名のとおり、
Node.jsのパッケージ(=便利な機能をひとまとめにしたもの)を管理する
ためのものです。
事前にPCにNode.jsをインストールしておく必要があります。
※Node.jsとは普段ブラウザ上で動くJavaScriptをサーバー上で動かす言語
です。JavaScriptがRubyやPHPと同じような動きをできるようになる
というイメージです。
④npm run dev
→次にこちらのコマンドで、②で導入したVueを動かせるようにします。
⑤npm audit fix → npm audit fix --force → npm run dev → npm run dev
→すると、エラー画面が出てくるので、
上の順番でコマンドを入力して解決させます。
ちなみに私は2回目以降のアプリ実装時にはエラーは出ませんでした。
詳しくは、以下の動画が参考になります！！↓↓↓
【Laravel uiの導入解説】
【npm解説】
このユーザー管理機能の実装を終え、俳句投稿機能の実装をするための
トップページまで完成させて、今に至っております。
ちなみにトップページは以下のような感じです。↓↓↓
Bootstrapのテンプレートを使用したので、デザインはありきたりですが、
本当に効率的に作成できるので重宝してます😄😄😄
Bootstrap公式ページはこちら↓↓↓
4.この1週間のまとめ
この1週間を一言でまとめると、
「まずやってみることが大切」
ということです。
具体的なカリキュラムもない中、Laravelという新しい分野に手を出すことに
最初は腰が引けてしまいましたが、
「自分で手を動かして体験してみないことにはどうしようもない」
と自分に言い聞かせ、参考になるサイトなどを探しまくってやったことが
こうして何とかスタートを切れたことに繋がったと考えています！
プログラミングって、まずは手を動かして体験してみることが大切
ということを改めて実感できました。
5.次回の目標の確認
次回(4/2)の目標は、
「俳句の投稿・詳細表示・編集・削除
という一般機能の実装完了」
とします！
次回もお楽しみに！！
6.テクノシップ第10号プチ編集後記
〜一昨日土曜日に受けたコロナワクチンの副作用で39度の熱を出して
床に臥しました💦💦
3回目にしてこの仕打ち、、、
もう2度とワクチンは受けたくないと思わされた週末でした🤔〜
『週刊』PHP＋Laravel6 奮闘記【第9号】
こんにちは！
テクノシップブログです！
今回が第9回目の記事になります！
私はITエンジニア養成スクールの『TechCamp』の第109期生として
プログラミングを勉強しておりました。
先日全ての学習を終え、卒業いたしましたが、今度は本当に自分の力で
一から言語を学んでオリジナルアプリを作ってみたいと思うようになり、
あれこれと計画を練り始めました。
そして、PHPにたどり着きました！！
今回からは、PHPとそのフレームワークである「Laravel」を用いた
オリジナルアプリ第2段の奮闘記
をお送りしていこうと思います🔥🔥
PHPとは
PHPとは、Webアプリの開発に特化したプログラミング言語であり、
●文法が平易で理解しやすい
●データベース連携が容易である
●実用的であり、参考になる書籍やサイトも多数ある
のような特徴があります。
どことなくRubyに似ているなと思いながら学習を始めてみると、
本当にRubyにそっくりでした！！！
そのため、学習は始めやすい言語なのではないかと思いながら今、
学習をスタートさせたところであります。
ちなみにPHPを用いて実際にどのようなサービスが作られているのか
ということを知りたい場合は、以下のサイトが参考になります。↓↓↓
他言語との比較もされており、非常に参考になるサイトです！！
PHPはGitHubに登録されているリポジトリの中でも上位にいる言語であり、
今後の需要も高いと言えるそうです。↓↓↓
そのようなわけで、私もPHPの基礎を学び、フレームワークを使って
何か一つオリジナルアプリを作成してみようと思うようになりました。
PHPの学習方法
PHPを学習するにあたり、方針として、
「習うより慣れろ」
にしました。
そこで、何か実践を交えてPHPの基礎を体系的に理解できる書籍はないかと
探していたところ、以下の書籍にたどり着きました。↓↓↓
この本は「お勉強禁止！！！！」という著者の謳い文句から始まり、
本当に楽しくPHPを使った簡単なアンケートサイトの構築ができます。
ただし、一点だけ注意点があります。
この本では、アプリの開発環境として、「XAMPP」というものを使用しています。
Windowsで開発する場合は、本の指示通りにうまくいくようですが、
Macでの開発の場合、XAMPPでは少々厄介になります。
そのため、Macでの開発に推奨されている、「MAMP」という開発環境を使用
すると良いでしょう。
インストールから初期設定などの具体的方法は以下のサイトが参考になります！
このように、この書籍は開発環境を「XAMPP」と想定して書かれているので、
所々「XAMPP」を「MAMP」に置き換えて実装していく必要があります。
しかし、最初の環境構築さえできてしまえば、簡単に実装ができますよ！
PHPとは何なのかすら分からなかった私でさえ、できましたから！！
PHPのフレームワークの学習
実用的なアプリケーションを効率的に実装するには、やっぱり
便利なフレームワークの使用は欠かせませんよね！！
そのため、PHPの基礎を学んだ私はフレームワークを一つ学びながら
自分自身のオリジナルアプリケーションを実装しようと考えました。
「Laravel」を使ってみることにしました！！
laravelの特徴をあげてみると、
●MVCモデルにより分業がしやすい
●学習コストが低い
●composerというパッケージ管理システムがある
といったものがあるそうです。
Ruby on Railsの延長で学習のとっつきには最適かなと思い、使ってみることに
しました。
他のフレームワークの特徴などについては以下のサイトが参考になりますよ！
また、学習の方法については、動画での学習を通じてスピーディに行いたい
と考えていたところ、素敵なチャンネルをYouTubeで見つけました。↓↓↓
まずは簡単なアプリの実装を通じて全体像を理解していくつもりです！！
オリジナルアプリの概要
今回の実装にあたって、前回の「伝票作成アプリ」のことを思い返してみると、
「ユーザーのこういう課題を解決したい」という視点で作りました。
そのため、今回は
「自分でこういうものがあったらいいなー」という視点で作ってみようと思います。
実際に作る予定のアプリですが、
「簡単に俳句投稿＆添削をすることが
できてしまうアプリケーション」です。
私の趣味が俳句なのですが、
「ネットを通じて色々な俳句を愛する人たちと繋がりつつ、
気軽に添削などをし合えたら楽しいだろうな、、」
と思ったことがきっかけです。
何としてもこのアプリは完成させたいと思っています！！
実装方針
アプリの仕様としては、
①ユーザーの新規登録・ログイン・ログアウトができる
②ユーザーのマイページとその人の投稿句を見ることができる
③新規に俳句を投稿することができる
④俳句の編集・削除ができる
⑤投稿された俳句にコメントをして添削することができる
⑥ユーザーと個別にメッセージのやり取りができる（←できたら！！）
のように考えています。
これから徐々に練っていきます。
次回の目標
次回(3/27ごろ)の目標は、
「ユーザー管理機能の実装まで完了」
とします！
次回もお楽しみに。
テクノシップ第9号プチ編集後記
〜彼岸入り。。。
俳句好きとしてはこの期間は大量に句を作ることができる期間です、、、
いつも以上に感覚を研ぎ澄ませて毎日を過ごしたいですね。〜
TechCampでの学習を終えてみて...【第8号】
こんにちは！
テクノシップブログです！！
私はTechCamp109期生としてプログラミングの学習をしておりますが、
ちょうど昨日スクールを卒業いたしました🎉🎉
半年という学習期間の中で嬉しい時、悲しい時、苦しい時、様々な瞬間を経験
しました。
この経験を無駄にしないためにも、この記事を持って振り返ってみたいと
思います。
もし興味を持った方がいれば、ぜひTechCampを覗いてみてはいかがでしょうか？
↓↓↓
- 1. TechCampを受講するに至った経緯
- 2. 受講前半戦の内容と成果
- 3. 受講中盤戦の内容と成果
- 4. 受講後半戦の内容と成果
- 5. 全体の振り返りと今後について
- 6.テクノシップ第8号プチ編集後記
1. TechCampを受講するに至った経緯
私はTechCampの存在を元エンジニアの母親から聞いて知りました。
前職を2社連続で入社してすぐ退職しなければならなくなってしまい、
精神的にも追い詰められ、先行きを見失いかけていた私に対し、母親が
「次の一歩のきっかけになれば」と勧めてくれたのです。
母親がエンジニアとして働いていた時の話は聞いていましたし、
受講してみるだけでも得るものは大きい分野だろうと思いました。
そして、エンジニアを仕事としてやっていきたいという思いからではなく、
「何かのきっかけを掴めればよい」という軽い気持ちで受講を始めたのです。🤔
2. 受講前半戦の内容と成果
受講前半(9月~10月)の学習内容と成果をまとめてみました↓↓↓
一言でまとめると、「基礎の習得期間」でしたが、
「振り返り」の部分にもあるように、
「どのように処理が行われ、結果的に何ができるのか」という視点を大切に学習
していくと、理解しやすくなりますね！！
次は中盤戦です！！
3. 受講中盤戦の内容と成果
受講中盤(11月)の学習内容と成果をまとめてみました↓↓↓
一言でまとめると、「実践的な開発体験」でした。
実践的なアプリケーションの開発ということは、それを使うユーザーのことを
考慮した開発ということになります。
その分ただ作るだけではなく、「企画」、「要件定義」や、「テストコード実装」
など、あらゆる手順を踏むことが求められることを知り、
エンジニアとして一つのサービスを作り上げることの大変さを実感しました。
そして、その分だけ興味関心も増していった期間になりました！！
次はいよいよ怒涛の後半戦です！
4. 受講後半戦の内容と成果
受講後半(12月~2月)の学習内容と成果をまとめてみました↓↓↓
一言でまとめると、「自走力を高め、ユーザーに応えることができた3ヶ月」
です！！
自走力に関しては、振り返りにも書いた通り、「エラー対処の流れの固定化」
をしたことによって高まったと考えています。
具体的には以下のような流れでエラーに対処するようにしました。
①：エラー文を解読できたら上、できなかったら下
②：それぞれ手前のフェーズで解決できなかったら進む
③：手前のフェーズで解決できなかったら進む
このように仕組み化しておいたことで、割とスムーズに解決できました。
ちなみに、ほとんどのエラーが以前のエラーと同じことの繰り返しでした。
実際に記録してみるとわかりますが、頭ではもう繰り返さないと思っていても
繰り返してしまうものなのですね。
今回作成したオリジナルアプリに関する開発の工程を
「『週刊』オリジナルアプリ奮闘記①~④」として４本だてで記事にしてあるので、
もし興味がありましたら覗いてやってください！！
以下からご覧いただけます！！
5. 全体の振り返りと今後について
このTechCampの学習前は、「エンジニアにちょっと関心がある」
という程度の思いでいましたので、
学習開始初期は「エンジニアを仕事にしていこう」などとは思っていませんでした。
しかし、学習を通して、「エラーとの向き合いによる苦しみ」、
「学びがすぐ形になる喜び」などを経験していくうちに、徐々に仕事としての
エンジニアというものへの興味関心が高まっていきました。
そして、決定打になったのが、
「オリジナルアプリの開発を通じて身近なユーザーの課題を解決できた経験」
でした。
私は母親を対象ユーザーとしてオリジナルアプリを作成したのですが、
この経験を積んだことにより、
「エンジニアとして働き、
世の中の『できない』を
Webサービスの力で解決したい」
という強い思いへと変化しました。
そして、今、この思いを胸に絶賛転職活動中であります！！
次なる未来に向けて今後も前進していきます！！
6.テクノシップ第8号プチ編集後記
〜今、新言語としてPHPの取り組み始めています！！
簡単な機能の開発から体験してみますが、
早くGitHubで公開したいです！！〜
『週刊』オリジナルアプリ奮闘記④【第7号】
こんにちは！
テクノシップブログです！
今回が第7回目の記事になります！
私は現在ITエンジニア養成スクールの『TechCamp』の第109期生として
プログラミングを勉強しています。
その中で、学習の総仕上げとして
「オリジナルアプリの実装」
という課題があります。
その実装の過程を「奮闘記」として週刊でお送りしています！！
さて、今回は前回の記事から1週間ということで、
前回立てた目標の確認と、この1週間で学んだことのアウトプットです。
前回の目標の成果の確認
前回立てた目標は以下の通りでした。↓↓↓
結果はどうだったのか。
この目標は達成しました！！
現時点(2/27)での進捗状況は以下のようになっています。
見事全ての機能の実装を完了することができました！
黄色の枠で表示している2つの機能を追加し、
さらに目標だった「伝票出力機能の実装」が完了しました。
目標達成の要因
目標達成の要因を自分なりに分析してみると、
①ユーザー目線で実装の追加を考えたこと
②エラーでつまづくたびに分からない点を整理し解決していったこと
この2点が挙げられます。
①については、商品と取引先に関して、
登録済みのものを一覧で表示できるようにするという機能の実装に関する話ですが、
これは対象ユーザーとしていた母親に試作品を試してもらった時、
「登録できるのは良いけど、何が登録されたのか分からない、、、」
という何気ない一言が実装のきっかけでした。
考えてみれば当たり前になくてはならない機能ですが、
こうしてユーザーに見てもらわないと気づかないこともあるものだと
驚くと共に、非常に良い学びが得られたと考えています！！
【登録済みの商品・取引先の一覧表示画面】
次に②についてですが、「伝票出力機能」の実装に関して、
処理の流れを把握してコーディングするのが難しく、つまづきました。
しかし、焦ることなくいつも通り
「何がどのように分からないのか」を紙に書き出すことによって、
一つ一つ実装を進めていきました！！
ここまでのエラーとの向き合いを通じて、エラーを解決するために良い方法
だと感じたのは、
●実現したい処理の流れを紙に書き出し、その中でどの段階が分からないのかを
明確にして質問を組み立てる。
●エラーに出会うたびに自分でエラーを記録しておき、次にエラーが起きた時は、
同じことを繰り返していないかまず確認する。
以上の2つの手法が効果的だということです。
特に2番目の「エラー記録」は非常に役立ちました。
エラーを記録してみて気づくことは、
「意外にも初歩的なミスを繰り返している」
ことが多いということです。
こうして目に見える記録をつけて見返せるようにしておくだけで、
「簡単なミスほど気付きにくい」という状況を減らせると思います！！
おすすめはGoogleスプレッドシートに記録していくことですね👍
私はこんな感じで記録しています↓↓↓
よろしければ試してみて下さい！！
難しかった点のアウトプット
ここまでで難しかったのは、
「伝票出力機能の実装」です。
処理の流れとしては、
「伝票を作成する」
↓
「作成した伝票の詳細画面に移動する」
↓
「詳細画面に『PDF出力ボタン』がある」
↓
「出力ボタンを押すと、PDF出力ができ、印刷もできる」
という流れを想定して作り始めました。
せっかくなので、実装の流れをアウトプットします。
①「Thinreports Editor」の準備とgem「thinreports」の導入
今回の出力の流れには、
「Thinreports Editor」と「Rubyの『thinreports』というgem」
の2つが必要です。
この2つを用いたPDF出力の方法は以下の図のようになります。
このThinreportsを用いた実装の利点は、
Thinreports Editorでの雛形の作成を視覚的に行うことができるため、
微妙なデザインの調整が簡単にできるということです！
PDF出力の実装には、他に「Prawn」というRubyのgemを使う方法も
あるそうですが、こちらは雛形を作るときのやり方が視覚的ではなく、
非常に面倒臭いそうです💦💦
まず、「Thinreports Editor」をインストールします。
インストールはこちらからどうぞ！！
「クイックスタート」で練習もできますので、簡単ですよ！
次に、Rubyの「thinreports」をインストールします。
Gemfileに記述してbundle installすれば大丈夫です。
②Thinreports Editorにファイルを作成して、雛形を作る
値を埋め込むための雛形を作成します。ファイルを作成して、
所定のディレクトリに配置しましょう。
雛形は上の画像のように視覚的に作成することができるので、
非常に扱いやすいです。
「id名を決めて値を入れる箱を用意し、Text Editorから入れ込む値を指定する」
という基本的な流れに沿って行えば実装できます。
③Text EditorでPDF出力のための処理を書く
以下、私が記述したものになっています。参考程度に載せておきます。
私は、個別の伝票ごとに値を入れ込み、PDF出力ができるようにしたい
と思ったので、slipsコントローラーに「output」というアクションを定義し、
＠slipというインスタンス変数に入れた個別伝票情報を扱えるようにしました。
④PDF出力ができるかどうか確かめる
以下が実際に出力したPDF画面のサンプルです。
微妙なデザイン修正を繰り返し、望み通りのデザインを目指しましょう！
この1週間のまとめ
この1週間を一言でまとめると、
「粘り強さが大切」です。
前回と同じですが、
「分からない点を分解して明確にしていく」
ということを繰り返して行けば、自ずとエラーの解決はできると思います！！
オリジナルアプリの実装を終えて
オリジナルアプリを終えてみて、
カリキュラムのように決められた手順がないという状況は、
予想していたよりも難しいものでした。
次にどうすれば良いのかということを自分で決めなければいけない状況は
相当負担なものです。実際、途中で1週間くらい実装に手をつけなかった時も
ありました。
しかし、カリキュラムの復習という面に加えて、
新たな技術を自分で学んで形にするという目的もあったので、
そういう点では「学んだことがすぐ形になる喜び」が大きくありました。
非常に良い経験になりました。
テクノシップ第7号プチ編集後記
〜PDF出力機能はできない可能性も大きく考えていましたが、
思いのほか実装できてしまい、
「何事も諦めないこと」の大切さを実感しました。
〜
『週刊』オリジナルアプリ奮闘記③【第6号】
こんにちは！
テクノシップブログです！
今回が第6回目の記事になります！
私は現在ITエンジニア養成スクールの『TechCamp』の第109期生として
プログラミングを勉強しています。
その中で、学習の総仕上げとして
「オリジナルアプリの実装」
という課題があります。
その実装の過程をこれから「奮闘記」として週刊でお送りしたいと思ってます！！
さて、今回は前回の記事から2週間経ってしまいましたが💦💦
前回立てた目標の確認と、この1週間で学んだことのアウトプットです。
前回の目標の成果の確認
前回立てた目標は以下の通りでした。↓↓↓
結果はどうだったのか。
この目標は達成しました！！
しっかりと2/12時点で達成しています。
現時点(2/21)での進捗状況は以下のようになっています。
あとは伝票出力機能を残すのみとなっています！！
目標達成の要因
目標達成の要因を自分なりに分析してみると、
①Tech Campでのカリキュラム学習の復習ができていたこと
②分からない点を整理し、質問することで解決へと繋げたこと
この2点が挙げられます。
①については、伝票の「詳細表示」、「編集」、「削除」の機能実装について、
カリキュラムで学んだことをしっかりと復習していたおかげで、
スムーズな実装につながりました。
それぞれに関して、MVCの流れに沿って理解しておくことがとても重要だと
改めて実感しました！！
【MVCの流れ】
次に②についてですが、「伝票作成機能」の実装に関して、
処理の流れを把握してコーディングするのが難しく、つまづきました。
しかし、そこで諦めることなく、「どの点がどのように分からないのか」
を紙に書き出し、Qiitaなどの質問サービスを使って解決へと繋げていきました。
質問したこと↓↓
そのおかげで、予定通りの実装完了に至りました！！
難しかった点のアウトプット
ここまでで難しかったのは、
「伝票作成機能の実装」です。
この実装では、以下のようなデータの処理の流れを想定して作りました。
「出荷先」、「出荷日」、「伝票番号」、「送り状ナンバー」
の4つは伝票情報として、「slipsテーブル」へ保存します。
そして、「品番」、「色」、「数量」、「備考」の4つを一つの出荷商品情報
として、計10個までの商品を一括で「ordersテーブル」へ保存できるようにします。
app/models/slip.rb
コード上では、まずslipモデルにて、
「has_many :orders」でアソシエーションを定義した上で(orderモデルの方は「belongs_to :slip」)、「accepts_nested_attributes_for :orders」と記述する
ことで、ordersテーブルへの一括登録のためのデータの通過を許可します。
この記述は後ほど登場する「fields_forメソッド」に活きてきます。
app/controllers/slips_controller.rb
次にslips_controllerにて、slipモデルのインスタンスを生成した上で、
一括登録のために必要な数だけorderモデルのインスタンスも生成します。
次に新規作成画面のビューを作成します。
こちらは「fields_forメソッド」を駆使して、必要な数だけ商品登録用の
フォームも生成できるようにします。
fields_forメソッドの使い方については、以下のサイトが参考になります！
実際のコード画面↓↓
app/views/slips/new.html.erb
「fields_for :orders」と記述していることにより、
Slipモデルに関するフォームが作成されると同時に紐づくOrderモデルに関する
フォームを作成することができます。
今回はslipsコントローラーで10回Orderモデルのインスタンスを生成しているので、
10セット分のフォームが作成されます。
次にデータ保存の記述です。
slipsコントローラーにおいて、以下のように記述します。
app/controllers/slips_controllers.rb
ストロングパラメーターの設定方法が、
「テーブル名_attributes: [:カラム名, :_destroy, :id]」
と付け加えることで、ordersテーブルに保存するべき商品情報も一緒に保存できる
ようになります。
実装にあたっては、以下のサイトを参考にさせていただきました！！
この2週間のまとめ
この2週間を一言でまとめると、
「粘り強さが大切」です。
今回の「伝票作成機能」の実装は、
「一つのフォームから複数のテーブルへ保存する＋一括登録がある」
という複雑な実装だったので、
正直処理の流れを理解するまでに時間がかかり、実装を諦めようかと
思いました💦💦
しかし、
「何が分かっていないのか」
を紙に一つ一つ書き出し、一つ一つ解決していくことで
気がついたら実装が完了していました。
私の経験上、分からなくてつまづきそうな時は
大体「何が分からないのかがハッキリしていないこと」
が原因だと考えています。
だからこそ、今回の経験でも学びましたが、
「分からないことが分からない」
という状況を無くすことがとても大切だと思います！！
次回の目標
今回は前回の執筆から2週間経過してしまっているので、
残りの「伝票出力機能」も大詰めに差し掛かっています。
ということで次回(2/27ごろ)の目標は、
「オリジナルアプリの実装&&デプロイ完了🎉」
とします！
ラストスパート頑張ります！！
次回もお楽しみに！！
テクノシップ第6号プチ編集後記
〜エラー解決が終わらず、手が止まってしまった時、
なぜか
大好きな「Led Zeppelin」の音楽を聴いてリラックスすると
解決のためのアイデアが湧きます。
つまづいた時こそ、リラックスする精神が大切なんですかね。〜
