佳境へ
雨、雨、雨で嫌になりますね。
私は低気圧で頭痛になるタイプなのでプログラミングに支障が出ないように、頭痛くなったら頭痛薬を飲んだりしてどうにかしています。
そんな憂鬱な中で、個人アプリ開発は佳境に。前回のブログにも書きましたが、火曜日には一旦発表。思ったよりは進めたのですがやはり完成は難しそうです。
完成というのは、デプロイまでして完成なのです。
どうにか頑張って「これでデプロイできる！」というところまでは持って行けそうなのですが、デプロイには少なくとも１日は持った方がいいとスクールのスタッフさんに言われているので、それで完成は無理だ…と言った感じ。
さて、結局週末でどこまでできたかですが、入れたいと思っていた機能３つのうち、２つしかできないと思っていたところ、３つ目の写真投稿機能のところも半分くらいは完成。
アクションに対して切り替わるビューはほぼ同じなので、１箇所できれば大体それで完了できるのですが、ここで問題が発生。
ログイン中のユーザーが他のユーザーの投稿した写真の詳細ページに飛ぶと、内容が表示されないのです。
おそらくここに当たるビューが用意できていないのだと思うのですが、このブログを書いている段階では原因がわからず…。
「ここまで来てこれかー」とショックを受けています。
データベースへの保存もしっかりできているのになんでだろうとなっているので、ここを踏ん張って、しっかり他のユーザーの詳細を見られるビューを表示させたいと思います。
結局、本当のところ非同期通信までできたらいいなと思っていたのですが、それは間に合わず。今後発表会が終わって、スクールが終わるまでの残り１ケ月足らずの時間を利用して、非同期通信の機能追加をしてからデプロイするか否かを水曜日以降に考えていきたいと考えています。
スクールに未経験で入ってから１ケ月と少し。まさか個人でアプリを作れる（大したものではないですが）までになるとは想像もしていなかったので、それだけでも成長できたと前向きに捉えつつ、残りの過ごし方も考えていく決意です。
個人アプリがスクールのある平日にできる期間は、一旦終わりですが、後には「チーム開発」が待っています。一番現場に近いものかなと考えながら、不安もありますが、同じチームの方とコミュニケーションを密に取り、楽しみながら力合わせて頑張ろうと思います！
ますます調で占める文章ばかりのブログ記事になってしまいました…。
ブログを書く力ももっと伸ばしていけるように日々精進。
開発中の個人アプリ
スクールで開発中の個人アプリ。
ポートフォリオ用に作成を進めているのですが…。
本当にゆっくりゆっくりで、夏色の下り坂のようです。
作成しているのは、特定の人向けで、「実用性」に重点を置いた（つもりです…）のコミュニケーションツール的なものです。
後は、ある意味ユーザーにとっての「憩いの場」や「セーフティーネット」になり得るものを作っています。
来週頭にスクール内でこの個人アプリの「発表会」があるのですが、まだ未完成。
おそらく週末にフル稼働しても無理だと思っています。
なぜここで完成ができなかったのか。
敗因は３つ。
１つは、まだまだ習いてたてで覚えられていないことが多すぎる。
これはまぁ少し言い訳っぽいですが、本当にうろ覚えとか、なんとなくにしているものが多すぎるなと気付きました。
カリキュラムを振り返りながら、検索しながら必死に取り組んでいます。
２つ目は、計画性。
こちらは自分の実力が未知数段階過ぎたため、どれをどこまでにできるだろうという逆算があまりできなかったことにあります。
それに加えて、作っていくうちに、「あれもしたい、これもしたい」の欲が出てきて、計画立て直しのような状況が出来上がってしまった点です。
３つ目ですが、これが一番の原因なのでは！と感じること。
それが２つ目にも少し書いていますが、「自分が現段階でどれだけできるか」がわからないことです。
これは本当に開発に支障をきたして、２回ほど１から作り直したほどでした。
３つの敗因は今後の参考にして行こうと思っています。
ただ、よかったこともあります。
大きく２つ。
検索力と仮説検証する力
本当に検索する力が身についた！（もちろんまだまだだとは思っています）
どんな言葉を選べば答えを見つけやすいかということ、一つ一つの情報をパーツとして捉え、つなげていくことで答えに辿り着けることなどの力が身につきました！
仮説検証の重要性を改めて感じ、実験的にファイルをいじる、コードを書き換えてみる、コメントアウトしてみるなどを行うことで、答えを見出せることがわかりました！
発表会は、一応は未完成でも良いとのことなので、面接の練習だと思って挑戦します。
明日からも続きを実装して、できるかぎり完成に近い状態には持って行けたらな…と考えています。
一歩が長い。
こんばんわ。
個人アプリがなかなか進まずで悶々とする中、体調が優れず朝も起きれない週末を過ごしました。
僕が作ろうとしているのは、フロントから３つの画面に遷移するアプリを作っています。
１つは日記をつけるように個人的な投稿ができる機能。
２つめはチャット機能。
そして３つめはお役立ち情報を配信する機能。
ですが。
正直盛りました。
チャレンジをしようとし過ぎたというか…。
ものの１０日ほどでこんないっぱいは無理でした。
いずれはできるのだろうと思いますが、今のレベルではきつかった。
今の一番の関門は用意しなきゃならないビューが多すぎることです。
一つの機能に絞ってやるべきでした。
後悔してももうあと１週間しかありません（しかもデプロイ込み…）。
これからできることを考えて行きます。
１週間はスクールでの個人アプリ発表会までの時間なので、それが終わったら、続きをやっていくことにします。
今はまず発表会までは、最低限の機能実装だけに絞っていこうと思います。
作業報告でもなんでもないブログになってしまいましたけど、また水曜日に少しはポジティブな報告ができるようにします！
個人アプリ開発
アラートが出ましたね。緊急事態宣言が解除されて間も無くでこれ。
正直、早かったのではないかと思いました。
というわけで、本当は教室にも行けるのですが、オンラインのままでもいいというスクールの機能を存分に利用させていただき、今日も自宅でプログラミング。
課題のアプリのデプロイを昨日終えたはず。だったのですが、いざ本番環境に上げてみるとビューが崩れていました。
メンターさんに相談して、余分な記述を削除したり、ファイルを書き換えました。
その後、無事にビューも直り、「LGTM！」をいただくことができました。
ここで「応用カリキュラム」は終わり。
とうとうメンターさんに頼らず、自分のここまでの技術レベルと検索のみで、「個人アプリ開発」に入っていきます。
周りの同期の方々は、割と楽しそうなアプリを考えてらっしゃるようなので、私は実用的なものにしようと決めました。
まだここでは何を作るのかは言えませんが、ターゲットを絞って、尚且つ実用的で生活に溶け込めるようなものを考えました。
また、経験も多少生かせるもの。
今日は大まかな開発スケジュールの設定、アプリの立ち上げ、リポジトリ作成、データベース設計の準備、フロント骨子の作成を行いました。
16日にこの個人アプリの発表会なのですが、フロントに拘りつつ、メッセージ機能を付与する段階までは実装できるように進めていきます。
発表会が終わった後に、以降付与したい機能があれば追加していくスタイルで。
ローカル環境
緊急事態宣言が明けて、早くも第２波の警戒をしなければな状況になっていますね。
内心、すごく怖いなと思いながら、ステイホームしています。
僕のブログでは、プログラミングの学びについて書いていて、水曜日と日曜日の週２回、更新しています。
今週は、課題アプリのローカル環境での実装を全て終えました。ですが、先週のフロント実装に引けを取らない困難が待ち受けていたのです。
壁は３つ。非同期通信、インクリメンタルサーチ、自動更新機能。
これらを課題のアプリ（チャット機能がメインのもの）に実装していくのですが、大変というより、難しくて、一人だと挫折必至だったなと感じました。
ただ、上記のかべに当たる前にも壁がありました。
まず、スクールではひとつ一つを手順を踏んで学ぶので、フロント実装を最初に行った際には、Hamlにform_forを利用していませんでした。
そのため、この子の影響によって大きなビュー崩れが発生。
メンターの方に教えていただきながらだったけど、せっかく頑張ったのに…と心折れそうになりました笑
チャットのメッセージ送信のためのボックス（以下、メッセージボックス）をまとめたタグの中での崩れだったので、画像送信アイコンとメッセージボックスとSendボタンが丸崩れ。
自力で手直しができたのは、元に戻るまであと一息のところまででした。
メッセージボックスとSendボタンが元の幅に戻ってくれず、ここで２人くらいメンターさんへの相談を挟んで、４時間ほどかかりました。でもそれでも直らず。。
結局最後は、別のメンターさんに元通りになるまでをお願いしてしまいましたが、直せなかった理由がわかって学びになりました。
やっとビューが直ったので、３つの壁（鬼門）に突入。
Haml内でjsを利用する難しさ、Ajaxやjbuilderなどの新しい機能やファイルが出てきて、まだインプットするものがあるのか！大丈夫かな…と心配に。
いつもアプリを利用して馴染みある、「画面がリロードされずに切り替わる」機能。この機能はユーザー側にとって非常に便利な反面、実際の作業なると、とても繊細だなという感想を持ちました。
新しいgem の導入、jqueryの利用、jbuilderファイルの作成、attrメソッドなどの利用。多くの作業工程を経て、コードが一つずつ、役割を果たしながら処理を実行してくれることで叶う利便性には、パソコンに感謝したいと思ってしまうほどでした。
ここで、僕が壁だったと感じたのは、jsのコードが初見には、複雑すぎるなと感じたことでした。
$functionの定義、varの定義、Ajaxに対しての指示の記述など、たくさんの動作指示が混在しており、頭が混乱してしまいました。
実装ができたときは、「すごい！」と声が出てしまうくらいに感動。
次にインクリメンタルサーチ。
これもユーザー側としてはとてもお世話になっている機能ですが、実装は簡単ではありません。まず、作業工程で何をしているのかを理解することが難しいのです。
テキストフィールドの加筆修正や、jsへのHTML追記など。
悩ましいのは、やはり波括弧や角括弧、コーテーションといった記号がより混在しているところとインデントです。Hamlの時などにも感じたのですが、プログラミングにおいて、インデントや記号の記述はひとつ余分、ひとつ足りない、ひとつズレてるだけでエラー（パソコンさん優秀すぎます…笑）な点でした。
これらの整合性が上手くとれず何度エラーを出したか。
その上、jsはRailsのようにエラーを自分から教えてくれません。
なので、"console.log"や"binding pry"などを用いて、検証ツールのコンソールやターミナルで状況や動きを確認しなければなりません。
これらの使いこなすにも、一体どの位置に書いてあげるべきなのかがわからなかったり、記述ができて調べるところまではできても、「本当にこれで合っているのか」を自分で認識することが難しかったです。
最後に自動更新機能。
こちらに関しては、上記の２つの工程ほどではありませんでした。
とはいえ、ここでも度々jsやjbilderを編集するので、作業の繊細さに差異は感じませんでした。非同期通信とインクリメンタルサーチを行ってきたので、コードが複雑に見える点には慣れが出ていて、比較的スイスイできたのですが…。
…ビューが崩れました。
画像をメッセージボックスから投稿する際、取っていたmarginが効かなくなっていました。
どうにかエレメントとjs内のHTMLの記述を照らし合わせて自分で解決できたのですが、テンプレートリテラルの記載ミスでエラーが起きていたことは気づけず、メンターさんに直していただきました。
なんだか、結局今日も感想のようなブログになってしまいましたが、無事にこれらの実装を終えることができて良かったです。
今回のフェーズでは、console.logとbinding pryを上手く利用して、イベント発火を確認しながら、正常に行われたことを示す"done"となぜか実行できなかったことを示す"fail"に辿り着かせることがミソかなと思いました。
まだまだ習いたてで、アウトプットにも誰かに共有できるレベルにもありませんが、復習や実践を繰り返して、理解を深めていこうと思います。
明日からはいよいよ本番環境での実装に向けた作業に入ります。
アプリ課題
緊急事態宣言が明け、心なしか外が少し賑やかになってきた気がしています。
私は今週終えたフロント実装。あれから変わらず、続きを行っています。
フロント実装自体、課題になっている簡単なアプリ制作の１つのフェーズに過ぎませんでした。
あれだけ「苦労した」と感じても入り口をちょっと開けた程度。
その後もたくさん壁が待っていました。
今日までにやったことはフロントに仮置きしたいくつもの設定にいよいよ機能実装していくフェーズ。
チャットができるという簡単な仕様ですが、駆け出しのプログラミング学習者が作るとなると、困難の連続。
ヘッダーにおいたアイコンにリンクを付けたり、ログインしているユーザーを表示させたり、普段LINEなどのチャット式アプリを当たり前のように使っていましたが、制作側に立つと、大変さを思い知ります。
特に大変だと感じたのは、一旦仮置きで設計したフロントのHamlにform_forを導入することで、ビューが崩れたことでした。
ビューが崩れたことで、classを定義し直したり、scssの装飾をやり直しました。
ただここで、本画面で検証ツールを利用し、どの箱がどのCSS に当たるかなど、学びがたくさんありました。
この課題はまだまだ続いていくので、日曜日の更新でまた書きます。
フロント実装
おうち時間がそろそろ明けるかな…。
そんな雰囲気を感じています。私は、この３週間、こもりきりでプログラミングを勉強していますが、通っているスクールも教室解禁が近い雰囲気です。
この週末は、「フロントの実装」を行いました。
とあるアプリのフロント画面を作成する課題です。
Hamlとsassを利用の上、フロントが作られていく過程は難しいですが楽しかった。
初見でこの工程を行うとなったとき、「なんだこれ！」と思いました。
まず、どこから手をつけるべきかがわからないのです。
しかも、Hamlのベース？と言っていいのでしょうか、フロントの基本であるHTML
とCSSは基礎の段階で学びましたが、その際はCSSのみ編集することが多く、HTMLを編集する機会はなかったのです。
そんな中でのスタートですから、本当に頭の中ははてなで埋め尽くされました。
ですが、スクールにはわからないところを教えてくれるメンターさんがいます。
ある程度自力で調べたり、VSコードをいじってわからなくなったら、メンターさんに訊きまくりました。
メンターさんとの会話の中で、絡まった鎖が解けるように、Hamlの書き方がわかってくるのです。コツがわかりさえすれば、もう半分くらいはこっちのものでした。
このフロント実装作業というものにはミソがあります。
クラスを親子関係で捉え、定義したクラスの下にそのクラスに必要な要素を組み込みます。
わかりやすくいうと、まず１枚の大きな紙があり、その上に今度は必要に応じて紙を重ねていく、と言った感じです。
もしくは、箱の中にさらに小さい箱が入る感じ。
私は、自分なりに解釈するため、マトリョーシカみたいだ！とも考えました。
ともあれ、このフロントの構造や関係性が見えてくれば、あとは記述ルールに従うだけです。
あれやこれや自由にデザインできるので、その分プロパティの数は無数にあり、ぐちゃぐちゃになることもありますが、少しずつ、パズルのように作業を積み上げることでフロント実装が叶います。
私は駆け出しエンジニア！ともまだ言えないひよっこです。
習いたてのことをこうして書くのは私にとっては思考の整理になりますが、読んでくださる方には「こいつ何が言いたいの？」と言った文章だろうなと。
いずれ、もっと学びを深くして、今日のブログを振り返った時、内容をアップデートできるよう進んでいきます。
読んでいただけた方（いるかな…笑）。
本当にありがとうございます。
