ブログみほうプログラミング活動記録この広告は、90日以上更新していないブログに表示しています。個人アプリみほうです。😉6/21に卒業してから2週間が経ちました。あれからモチベーションは少し落ちたように思えます。理由としては収入に絡まないからでしょうね。6/26に祖母の知人の社長さんとお話しし、7/16〜19の間ビーテック姫路に職業体験することが決まりました。社長さんから「期待している」とお言葉をもらい、嬉しかったです😆。就職するなら自分を評価してる所の方がいいですよね。最初は簡単な業務を行い、少したったら難度の高い業務を任せられるそうです。開発者が場数を踏んできて高度な技術力を持っていると聞いているので会うのが楽しみです。今回は作成した個人アプリについて書きます。概要、次に機能、その次に工夫したところの順に書きます。トップページ新規会員登録ページ新規スレッド作成ページメッセージ送信機能マイページデプロイ工夫したポイント反省点あとがき概要まず個人アプリのURLhttps://mihoukeiji2.herokuapp.com今回はHerokuでデフォルトで設定されているURLにしていますが、独自ドメインで公開できたらそのURLに変更します。独自ドメインが表示できたのでこちらのURLも載せますhttp://www.mihou-keijiban.com作成したのは掲示板アプリです。掲示板にしようと考えたかというと理由は2点あります。1点目は作りたいサービスのテーマが決まっていなかったこと。グルメサイトでは飲食店に関してどんなジャンルの料理を扱っているか、住所はどこか、営業時間はいつか、と言ったように軸になっているテーマに関して情報が配信されています。私に関しては利用者が参加できるハブサイトを作成したいなあと思っていたのですがテーマが決まっておりませんでした。そのため普段情報収集に利用している掲示板サイトのようなサイトを作成したいと考えました。2点目はカリキュラムで学んだことの復習をしたかったためです。カリキュラムではPictweet、Mooovi、ChatSpaceを作成し、最終課題ではチーム開発でメルカリのコピーサイトを作成しました。ついてアプリケーションを作成しつつ復習したいと考えました。そのためユーザー管理機能のある掲示板を作成すれば復習になると思いました。理由としては以上です。「スレッドの中にメッセージを投稿できる。複雑な機能を入れているわけではありません。この一言だけでは説明が不十分のため機能を紹介していきます。Platform(以下GCP)機能まずリンクを踏んだ先にあるトップページについて、次にスレッドの中身とメッセージの送信方法、そしてユーザー登録した後に利用できるマイページ、最後にデプロイについて主に説明します。トップページリンクを踏むと最初に出るページです。ログインしていない状態だと「ゲストさん」と表示されます。スレッド名の下の欄については初めは開いてませんが右にある「+」ボタンを押すと開くことができます。個別に開くはできず「+」ボタンを押すと全て出てきます。1画面につき10スレッド出て、それ以上の場合はページネーションが出ます。のちに説明しますが、この状態でも掲示板へのメッセージの投稿ができます。ヘッダーの入力ボックスに検索ワードを入れると掲示板タイトルの検索ができます。7/7時点で個人ページへのリンクは貼っておりませんが、ポートフォリオができたらそれとつなげる予定です。新規会員登録ページ次にサイドバーからいける新規会員登録ページ名前(10文字以内)、メールアドレス、パスワード、加えて一番下のテクストボックスに同じパスワードをもう一回入力すると新規会員登録ができてフラッシュメッセージが出ます。ログインするとトップページが変わり以下のようになります。下の欄に「スレッド編集」とありますが、これを押すとスレッド編集ページに行くことができます。編集ページでスレッドの削除もできます。ヘッダーのユーザー名をクリックするとドロップダウンが出てきてそこからマイページ・ヘルプページへの移動、ログアウトができます。新規スレッド作成ページさて「新規スレッド作成」ボタンを押すと新規スレッド作成ページに移動します。スレッド作成ページではスレッドについての名前、説明、カテゴリを入力します。カテゴリの入力についてはインクリメンタルサーチになっており、あらかじめ登録されているカテゴリから入力します。こだわりが無ければ「その他」でいいです。検索結果で送信ボタンが隠れてしまってます。スレッドカテゴリ名の下に送信ボタンがあり、全て入力してから送信するとスレッド作成ができ、フラッシュメッセージも出ます。カテゴリの新規作成機能については時間ができたら行います。トップページの説明については以上です。メッセージ送信機能トップページから掲示板名をクリックすることで掲示板の中に行くことができます。最新100件のメッセージが表示され、それ以上だとページネーションが出ます。ログインの有無に関わらず掲示板を見ることができ、投稿もできます。ログインしていた場合は名前を変更することはできません。readonly属性を使っており編集できないためです。リロードの横にスレッド編集ボタンが出て、そこでスレッドの編集ができます。サイドバーのボタンを押すと上下に移動できます。画像についてはGCPを使って保存しています。*1config/storage.ymlの書き方に手間取られましたがそれくらいで実装は難しくなかったですね。マイページログインしている状態だとマイページに行くことができます。作成した全てのスレッドとユーザー情報が表示されます。サイドバーにある「ユーザー編集」ボタンを押すと、名前とメールアドレスを編集できます。「プロフィールを編集する」ページを押すとプロフィールを編集できます。プロフィールについてはQiitaのものを参考にしました。アカウント削除ボタンを押すとアカウント削除画面に移り、そこで「削除する」ボタンを押すとユーザー情報が削除されて元に戻すことはできません。ユーザー削除については論理削除になっており、ユーザーを削除しても作成した掲示板は残ります。'paranoia'を使って実装しました。*2デプロイデプロイについてはAWSより簡単でした。理由としてはunicornやcapistranoといったgemを入れる必要がないためです。基本的な手順はQiitaの記事が役立ちます。*3注意点としては今回GCPを使って画像を保存しています。その過程でcredential.yml.encを編集しました。そのため追加で以下のコマンドを入力する必要があります。config/master.key)"このコマンドがないとcredential.yml.encの内容をherokuで読み取ることができず、GCPに保存できなくなります。*4GCPに限らずcredential.yml.encを編集した時はこのコマンドで変更を反映させましょう。工夫したポイント工夫したところはどうすればユーザーフレンドリーになるかと考えたことです。スレッドタイトルは60文字以内と指定がありますが、60文字以上のタイトルを入力してそれで「保存ができませんでした。再入力をお願いします。」とだけアラートが出ても「何のこっちゃ」となります。そのため字数制限のあるところでは指定字数を越えるとアラートが出るようにしました。入力が必須なところには「validatrix」と呼ばれるjQueryプラグインを用いて入力がなかった時に警告が出るようにしました。フラッシュメッセージについてはログイン/ログアウト時だけでなくメッセージ投稿時やユーザー編集時など何か手を加えるごとに発生するようにしました。ページ上部にはパンくずリストを実装し、移動しやすくしました。パンくずリストとはユーザーがサイト上のどこにいるか視覚的にわかりやすくするためにWebページを階層順にリストアップしてリンクをつけたものです。'gletel'を使うと実装がラクになります。*5スレッド編集ページについてはメルカリの時に使ってなかった書き方を使ってます。boardendeditアクションのparentのところで後ろにboardとすることで親要素でboardという引数が使えるようになります。これがないと値がないということでNoMethodErrorになります。表示としては以下のようになります。スレッド編集メルカリで実装してなかったので手間が少しかかりましたが、実装できてよかったです。あとトップページで「ブログで紹介する」とありますが、本ブログへのリンク用で実際は紹介することはほぼないと思います。面白い使われ方や改善案があれば紹介していこうと考えています。反省点としては2点あります。1点目は結構グダグダに進んだということですね。クラス名が無茶苦茶ということもあります。あと後で作ったカラムも5つ以上はあります。卒業後に学習しなかった時間ができたことで後で見返して、この機能何のために必要かとなったため、次作るなら集中して一気に作ろうと考えてみます。2点目は一日一日ブログにアウトプットしなかったことでこのように一気に出すことになったことです。Twitterにも学習記録はあげていますが、やはりブログの方が書ける量が多いので次作るならブログで少しずつ小出しにしていきます。あとがき今後はポートフォリオを作っていきます。言っても1から作るのが面倒なのでWixを使っていく予定です。終わったらPHPの勉強。職場見学も含めて楽しんでいきます。7/9追記Wix使ってみてWebサイト作成に便利なサイトとは思いました。独自ドメインやフォーム作成、便利なアプリケーションがあり、直感的にサイトを作ることができるので整ったサイトが非常に作りやすいと思いました。自分としてはこの先のこともあるので基礎固めをしたい。そのためポートフォリオ作成は中断します。職場見学まで7/8に購入した「スラスラわかるPHP」を進めていきます。七夕の願いとしては「心身共に健やかでありますように」かな。健康は得難いものですから、体を大切にしていきます。ありがとうございました。6月21日にTECH::EXPERTのカリキュラムを修了することができました🤗。51期メンバー、ライフコーチ、メンターの方々に助けていただき登り切ることができました。登った後の眺望はいいものです。前回の記事から3週間の間にQiita記事を2本書いています。Qiitaいずれも機能実装時に新しく学んだことを書いています。今回はTECH::EXPERT修了して抱いた所感を書いていきます。最終課題を終えて最終課題、チームメンバーの協力なくしては完成しなかったでしょう。頼りになるメンバーでした。エラーが発生した時はメンバー同士で話し合い、解決への糸口を一緒に見つけました。14時からのデイリースクラムではプロダクトバックログを見て、タスクがどれくらいで完了して、妨げになる問題があればそれがどのようなものか話してチーム内で共有しました。問題解決の際には役立ったサイトをSlackに飛ばすようにしました。メンバーとは何度か食事にいき親睦を深めました。一人で食事するよりも美味しかったです。最終課題では最初はチーム全員でデータベースについて協議したおかげで機能を実装する際にデータベースに何のためにどんなカラムを保存するのか全員が話すことができました。データベース設計はLGTMが出て正解という訳ではありません。機能実装の際に追加・削除したカラムやテーブルがいくつもあります。した場合に協議できるよう、これから最終課題に取り組むチームはデータベース設計について2日以上時間をかけて良いと思います。最終課題の進み具合51期A班の最終課題の進み具合としては大体以下のようになります。サーバーサイド100%1週目はDB設計とデプロイが終了し、上から順番にプロダクトバックログにあった課題を進めていました。1週目中にSNS認証が完了しててすごいなあと思いました。2週目は必要なマークアップについてはほぼ完了して、一部サーバーサイドにも取り組んでいました。2週目からコアタイムを設定して14時までは個人時間としていました。この週は各々がマークアップしており、メンバー全員が顔を合わせる時間は少なかったですね。3週目はサーバーサイドに取り組みだいぶ苦戦しました。自分は出品機能に取り組んでいましたがデータベースへの保存、カテゴリボックス・値段の非同期対応、アップロードした画像のプレビュー、いずれも難所がありその度にメンバーに相談していました。時に不機嫌な顔が出てしまったこともありました。問題解決に悩んで色々やってみたというのは大きいですね。私も木曜日の夜に画像プレビューについてのプルリクがLGTM出た時「やったー」と爽快な気分になりましたし、メンバーも機能を実装して一段と自信がついたように思えました。あとメンバーごとにサーバーサイドの実装が早かったり、励ましてくれたりと一番特色が生きていた週かなと思います。4週目は検索機能を実装したり、実装した機能を実際に動かしてみて問題がないか確認していました。問題があった場合はブランチを切って修正してプルリクを出していました。購入機能を実装したNさんが忌引で木曜日まで来れず、木曜日にやっと本番環境で購入できるようにしてメンターからLGTMもらった時は「終わったー」とメンバー同士喜び合いました。発表会については各々伝えたいことを言ったので良かったと思いますね。後の発表見てたらメンバー紹介に当てる時間を増やしたほうが良かったとは思います。締めにチーム開発での経験は一生忘れることはないでしょう。スクラムマスターをやってみてチーム開発の難しさ、面白さは十分に味わうことができました。愉快で頼りになるメンバーと開発できてすごく喜ばしい。最初は立候補して開発やり切ってやると思いつつも自分に全うできるのかと不安もありました。それでもメンバーと協力して最終課題という山を登りきり自信が増しました。打ち上げの際に「自分がスクラムマスターで良かったですか」と聞いてみて、全員が笑顔で「良かった」と返事がきて感無量になりました。このような経験してきたので転職先でもチーム開発に精を出したいと思いました。TECH::EXPERTへの想い独学ではつまづきそう、横の繋がりが欲しいという人には通うことを勧めます。受講料は60万円以上と高いですが、同期、加えて他期の受講生との繋がりができるという点ではすごく価値があります。独学である程度できるという人や受講料でためらいがある人は他のスクールに通うという選択肢を考えてもいいと思います。ライフコーチ、メンターの方々が開発時に自力で解決が難しいところを補ってくれるため、挫折はしにくいです。私もそうですが他の方の力なしに卒業はできませんでした。基礎カリキュラムの時から他の受講生と共に勉学に励み、TECH::EXPERTという山を登り、我ながらようやっとると思います。TECH::EXPERT入学前、将来どうなるんやろと考えていました。派遣会社にいたままでは現実味のない仕事ばかりやって何年も食うための仕事をすると思って道を変えました。あてもなく退職したので、拠り所もなかったです。前職で100万以上貯めていたので思い切ってTECH::EXPERTに応募しました。初めは全くの未経験で達成できるんかなと不安を覚えていました。事前学習も熱心ではなく、本試験こそ予定より早く合格できましたが、このときは結果があっただけでモチベーションはあまりなかったです。そこから応用カリキュラムに進み機能を実装していく中でやっと面白いと感じ、Chat-Spaceが完了した時は「やったー」と思いました。非同期通信の時に同じ問題がなかなか解決できず、何度もメンターを呼んだこともありました。そんな時解決への道筋を示してくれて有難かったです。文法多いですが、Progateの方がわかりやすかったですね。メンターも人によって力量が異なります。問題が発生していてどうすれば解決できるかを調べてくれる人もいれば、一緒に考えたものの他のメンターに回す人もいます。応用カリキュラムや最終課題ではTECH::CONNECTで質問できますが、2人、3人と限られておりいつでも質問できるわけではありません。できるだけ自力で解決策を探し、やってみることが大事だと痛感しました。アプリケーション開発するときもエラー解決の時もそうですが、手を動かしてコードを書いてみると面白くなります。力量ではまだ初心者より少しマシな程度です。3ヶ月学習しただけで1から自作のアプリケーションが作成できるかというと難しいです。TECH::EXPERTでの経験、特にスクラムマスターとしてメンバーとともにメルカリコピーサイトを作成した経験は今後チームで仕事をする際も役立つと思います。補足Twitter、ブログ開設してよかった。自分が学んできたことは価値があると思ってます。アウトプットをほぼ毎日行なって250以上のフォロワーが付いたというのは自分でも驚きですし、ありがたいと思います。TECH::EXPERTでも朝礼、夕礼でアウトプットの時間がありますが良い試みです。自分で抱えてるだけでは本当に理解できているか、言葉で説明できるか確認できないからね。初めのカリキュラムでインプット・アウトプット、メタ認知の大切さについて学びます。初めに大事なこと書いてあったんやなと改めて思いましたね。TECH::EXPERTで学んだことで特に大きいものを3つあげると1.インプット(検索力)、アウトプット(発信力)の大切さ2.チーム開発の面白さ3.自信を持つこと3つ目の自信については、機能を実装できて自信がつくということに加えて、100%達成できると念じることもあります。念じたことが叶うとよりモチベーションが上がって面白くなります。総括:TECH::EXPERT来てよかった今後のこと今週は個人アプリ作成が終わった後にポートフォリオ作成をします。加えて火曜日にキャリアアドバイザーと模擬面接をするので自分の思うままに話したいところです。あと再び祖母の知人の社長さんと話す予定です。すると社長さんの会社に就職するかもしれません。キッティングサービスを提供している会社でビュー作成、機能実装どころかタブレット、スマホといった機器を解析する技術も必要なので1、2年で身につくとは考えていません。その分、機器そのものに詳しくなって大手よりもエンジニアとしての腕をあげることができると考えています。ブログ更新については伝えたいことがあればその都度行います。テックエキスパートでの経験を通じ、心身共に成長できたと感じます。51期のみなさん、ライフコーチ・メンターの方々にはお世話になりました。本当にありがとうございました。デプロイとマークアップから学んだことTECH::EXPERTみほうです。前記事で話したように私はデプロイと新規登録・ログイン画面を担当しました。この記事では新しく学んだことを書いていきます。storageの設定について苦労したこと新規登録・ログイン画面から学んだこと擬似要素について終わりにデプロイから学んだことデプロイについては基本的にはカリキュラム通りに行いました。Basic認証導入になります。カリキュラムと比較してBasic認証導入が追加されています。Basic認証とは知っている人しかアプリケーションを見れないようにするための機能です。言い換えればチームに関わっていない人に勝手にアプリケーションを弄られるのを防ぐための機能です。ログイン時、アラートが出てユーザー名とパスワードが要求され、入力するとページ移動ができます。Chat-Spaceで試してみました。動画でわかりますが、URLのところに通常と違い鍵マークが出ています。Storageと呼ばれるRailsの機能を用いることにしました。こちらの記事が参考になります。Storageは1画面に複数枚保存できると聞いています。実際に複数枚保存できることは確認していませんが、開発を進めていく中で確かめようと考えています。この記事の通りに下のコマンドを打ち、vimファイルを編集してしまうとconfig/credential.yml.encが編集されるという問題が発生します。credentials:editcredential.yml.encについてはRails5.2.0以降からsecrets.ymlの代わりに導入された秘匿情報が入るファイルです。secrets.ymlと違い、内容が暗号化されています。このファイルに入った情報をconfig/master.keyで読み取ります。master.keyは最初から.gitignoreに入っており、本番環境ではmaster.keyの指定漏れを避けるためconfig/environments/production.rbでconfig.require_master_key=trueのコメントアウトを外すことが推奨されています。19行目で確認しました。*2編集後のcredential.yml.encを含んだコミットをGitHubにプッシュすると他の人に見えてしまいセキュリティ上問題があるため、環境変数を利用することにしました。環境変数を利用することで編集されるのを回避することができます。~/.bash_profile下のコマンドでその内容を読み込ませました。~/.bash_profileさらにstorage.ymlのaccess_key_idとsecret_access_keyを環境変数に変更します。このように変更することで編集した環境変数を利用することができるようになりました。basic認証のユーザー名・パスワードもセキュリティのため環境変数で管理しています。merge.とエラーが出たところですね。masterのコマンドを打って本番環境にプルし、下のコマンドで変更を復元して解決しました。popチームで問題を解決して改めて意見を出しあうと解決が進むことがわかりました。学んだこと:セキュリティ面を考えないとサイトが攻撃され悪用される温床となるため、秘匿情報をGithubに上げないように設定することが大切。個人アプリをデプロイするときも気をつける。新規登録・ログイン画面から学んだこと最終課題においてメルカリが持つ機能を実装するにはサイトの見た目を作る必要があります。自分は新規登録・ログイン画面のマークアップを行いました。新規登録画面では5画面実装します。ウィザード形式と呼ばれるステップごとに登録フォームを作る方法があるそうです。*3擬似要素について5/31までSNS認証がLGTMとなるまでの仮のRailsアプリケーションで新規登録・ログイン画面のマークアップを行なっていました。その中でヘッダーにあるグレーの線を引くのにHTMLの擬似要素を使いました。</タグ名>のようなタグとタグで囲われた1つの固まりです。擬似要素を使うと要素内の特定の文字や行に対してHTMLに書かずにCSSでスタイルを指定できます。ヘッダーの線ではこのように設定しています。HTMLについては記述を短縮できるhaml記法で書き、CSSについてはネストが便利なSass記法で書いています。Sassについては全体を写すとすごく縦長になるためactiveクラスとthroughクラスに絞って説明します。hamlSass(左はlistタブの設定、右はprogress-statusクラスの設定)画像activeクラスについては文字も丸も赤色になります。throughクラスについては文字はグレーのままで丸だけ赤になります。擬似要素で背景(background)の色指定を入れることで線の色を赤にしています。progress-statusクラスに線と丸の設定があります。listタブの最初と最後の要素についてはそれぞれfirst-child、last-childと指定してcontent:noneとすることで設定を消しています。ちなみにlistタブの共通設定が外にあるため、このコードをコピペしても画像のような表示になりません。本番のアプリケーションには実装していませんが、今後個人アプリ製作をする上でHTMLを使わずにスタイルを設定できるので便利だと思いました。あと新規登録画面5ページ作ったおかげでログイン画面のマークアップが1時間くらいででき、マイページの本人確認ページの作成もSassの記述を変更するくらいで2時間くらいでできました。マークアップについてははじめにdivタグで囲むとページ表示が崩れにくいです。班の方針でそうしています。ちなみにhaml記法ではdivタグは省略して書くことができます。自分は仮のアプリケーションでlistタブでの共通の設定をdivタグの外で設定していたため、それが他のページで影響してしまいました。そのため昨日はSassファイルの記述の修正に2時間かけていました。これからは最初にdivタグで大枠を作るようにマークアップしていきます。終わりにマークアップも昨日、本人確認ページがLGTMになり、6/2時点で残すはログアウト画面、商品関連の3画面となり、全ページ完了に近づいてきました。個人アプリについては作る題材については決めていませんがJavaScript、挑戦するならばAPIを利用した掲示板アプリを作ろうと考えています。活動記録をまたブログにまとめようと考えています。長くなりましたが今回は以上です。ありがとうございました。所感TECH::EXPERTみほうです。昨日スプリントレビュー1回目が終了しました。昨日まででデータベース設計、デプロイが完了する必要があったので遅れずにできてよかったです。技術的な題目の前にチーム開発して思ったことを書きます。次に別の記事で技術的に新しく学んだことを書きます。この記事では以下の内容について話します。私がスクラムマスターです。班ではデータベース設計LGTM、デプロイについてもbasic認証まで実装していると報告して確認を行ってもらいOKをもらいました。それから各自マークアップを行い、5/31時点でマークアップではトップページ、マイページ、新規登録・ログイン画面がLGTMとなり、サーバーサイドでもSNS認証がLGTMとなっています。今週はマークアップ全て実装するという目標を掲げています。メンバーもコツを掴んできていますし、100%達成可能と考えています。達成後は、サーバーサイドの方も実装していく予定です。メンバーについてメンバーについては先ほど話したように4人です。twitterでは5人全員揃って開発したいと書いていましたが、ChatSpaceの完成に至らず合流なしとなりました。今回はメンバーの紹介と現時点での担当を話します。一応個人情報は伏せておく必要があると考えているので、私以外は便宜的に先生さん、Nさん、Mさんとします。スクラムマスターの私から私については現時点でデプロイ、新規登録・ログイン画面のマークアップを行いました。メンバーとは仲良くできていると考えているのですが、舐められているところもあります。あとメンバーとのコミュニケーションにおいてテレビ番組などの自分が詳しくない話題が出ることが多く、ギャップを感じています。普段テレビをみることが少ないですが、面白いと感じるところは拾って行きたいと考えています。先生さんについては基礎・応用の頃から、学んだコードをしっかり理解していて必要な情報を調べるのも上手く、加えて人に教えるのが上手い人です。チーム開発の時も必要な情報を一緒に調べて教えてもらい、頼りになっています。SNS認証についても調べた内容を組み込み、ローカル環境でできていることを確認してすごいと思っています。Nさんについては現時点でデータベースのマークダウンとトップページのマークアップを行いました。面白いコンテンツを知っていて、一緒にいると楽しい方です。自分にも話題を振ってくれてありがたいと思います。ChatSpaceのデプロイ完了が5/24の21時ぐらいで一番遅く、実際完了報告を聞いたときはホッとしました😌データベース設計については自ら買って出てくれて、「やってアプリ構造が理解できた」と感想を聞き、良かったと思いました。Mさんについては現時点でマイページのマークアップを行いました。Nさんと同じくコミュニケーションが上手い方です。自宅学習の方が集中できるようで、メンバーの中では一番教室にいる時間が少ないですね。データベースのER図についてはこの方の図を採用し、議論の時も必要な改善案を出してくれてありがたかったです。あと漫画「キングダム」が好きでその話をよくします。短いですが、こんな感じです。チームとしてより仲良くしたいと考えています。チームで本町製麺所に行き、うどん食べました。1人で食べるより美味しさが実感でき良い経験になりました。コアタイムA班のコアタイムについては昨日決めました。備忘録として書いておきます。デイリースクラム昨日の振り返り、チーム内での改善案について話し合う。進捗管理のために設ける時間ではない。取り掛かっているタスクが次回のデイリースクラムまでにどれくらい終えることができるか少しずつ調査する。チーム開発に取り組んでみて現時点で思ったことチームで開発して思ったことを箇条書きで書いていきます。・チームで開発するとより良い改善案が出て、楽しい特にデータベース設計の時に実感しました。チームでメルカリが持つ機能の洗い出しを行い、必要なテーブルを出し合って整理して、ER図がどんどん整っていく様が楽しかったです。チームで意見を出しあうと自分1人では出なかった着眼点が出て面白いと思いました。・コンフリクト(ブランチの競合)に気をつける必要がある。チーム開発では、各々masterブランチを切って別のブランチで開発しています。LGTMをもらったブランチからmasterブランチにマージ(統合)するとき、既に他の人がマージをしていたらコンフリクトが発生して修正する必要があります。その内容についてチームと話し合う必要が生じます。消す必要のないデータを消したら面倒事になるため、コンフリクトについてはなるべく発生しないようにすると班の方針で決めています。・なるべくチーム内で問題解決に取り組むエラーが発生した場合、まずチーム内で解決できる問題か話します。話し合って調査し、解決できる問題であれば解決します。煮詰めても解決できなければ調べた内容を以ってメンターに質問します。終わりにチーム開発、個人でやるより楽しくてダレないです。学んだことを今後の仕事でも生かしていきます。作ってないし、作らんとね。ありがとうございました。個人アプリみほうです。個人アプリ発表会終えて、いよいよ最終課題です。どれほどの難関が待ち受けているのか、楽しみですね。完成に向けて気を引き締めていきます。・最終課題に向けてそれでは学んだことを書いていきます。Laravelについて処理の流れBladeテンプレート最終課題に向けて終わりに個人アプリ所感まず一言、やって良かったです。基本的にはRailsと要領が似通っているため、処理の流れを振り返ることができ、新しい言語を学ぶことでプログラミング言語を学ぶことの面白さを実感できました。マークアップが十分できなかったので、最終課題に取り組むことでマークアップやサーバーサイドの知識を充実させていきます。使用したテンプレートは以下のものです。https://moozthemes.com/lattes-free-one-page-bootstrap-theme/そのため下にスライドすればヘッダーが黒くなったり、フッターが出てきます。フォームがありますが何も機能を持ってません。そのため、教材で作成したアプリケーションを軸に感想を書きます。LaravelについてまずPHPについてPHPは以下の特徴があります。1.サーバーサイドでコードを実行しHTMLを動的に表示できること。2.Webサービスの開発に特化。3.データベースとの連携が簡単にでき、動作環境が作りやすい。PHPの用途で一番有名なのはWordPressですね。世界のWebサイトの30%以上はWordPressで作られているというデータがあるくらい重要があります。そのフレームワークであるLaravelは以下の特徴があります。1.オブジェクト指向やパッケージマネージャ(composer)といった最新の機能に加え、MVC、ORM(Eloquent)、テンプレートエンジン(Blade)などの機能を入れることで本格的なアプリケーション作成ができる2.機能の実装が容易で、簡単なコードを書くだけで機能を利用できる1がLaravelの最大の特徴ですね。フレームワークのいいとこ取りです。2についてはartisanと呼ばれる独自コマンドが用意されており、ターミナル上で操作します。serveとなります。簡単に機能を実装できるので、習得コストが少ないですね。Laravelについては昨日twitterでアウトプットした図(下図)のように他のPHPフレームワーク、Railsと比較してトレンドになっています。それだけ価値のあると認められた言語でしょう。あとLaravelがPHPの世界の中でどれだけ伸びているかGoogleTrendsで調べました。WordPressへの需要もあるのか急激に伸びてて驚きました😲グラフは3年前から今までを集計しています。Railsよりも遥かに多いですね。localhost:8000/helloを表示する場合を例に図を作成してみました。MVCモデルなので、基本的にはRailsと同様の処理を行います。*1ただコントローラーの処理の前後にミドルウェアというものが入ってますね。ミドルウェアとはアクションの処理が実行される前に指定の処理を割り込ませることが可能なものと考えています。beforeミドルウェアにはユーザー認証といったある条件をクリアしないとリクエストを弾く処理を入れます。afterミドルウェアにはビュー内に付け加える処理を入れます。BladeテンプレートLaravelではビューを作成するのにBladeと呼ばれるテンプレートエンジンを使います。.phpでもビューは作成できるのですが、.blade.phpとした方が圧倒的に作成がラクで、Laravelの設定でも.phpより優先度が高くなっています。(例:index.phpとindex.blade.phpがあるとbladeに書いた内容だけ表示される)特徴として以下のものがあります。・テンプレートを継承して新しいテンプレートを作成することができる・@sectionや@yieldに新規作成したテンプレートの内容をはめ込むことができる。index.blade.phpについて説明のためコードを教材よりも短縮して載せます共通のビューについてはRailsでのapplication.html.erbのように書くことができます。継承する場合は継承先の一番上の行に@extends('継承元のファイル名')と書きます。'Index')とするだけでtitleの持つ値がIndexになります。し、この場合foreach文で$itemに代入されている値を一つ一つ参照し、取り出したデータ(name)を出力しています。他にも教材内にはアソシエーションの組み方や出力したデータの並び替え方法など一通りの機能が解説されています。読んでおけば挫折しなくて済むでしょう。今後の個人アプリでの目標としては、最終課題に取り組みつつ、まずはRailsを用いてアプリケーションを作成した後、Laravelでもアプリケーションを1から作成することです。ポートフォリオに必要になるため成果を出していきたいです。最終課題に向けてスクラムマスターになりました。挑戦するからには必要な機能を実装し、完成を目指します。そのために5/25からはデータベースに必要なエンティティの洗い出し、そしてデータベース設計ですね。5/31のスプリントレビューまでにデプロイもできないと苦しいので、この日までにデータベース設計、デプロイ完了が目標です。「チームでアプリケーション開発するということ」とはどういうことなのか学んでいきます。CADオペレーターしていた頃もチームで開発していたのですが、チームの方針に何か言える立場ではなかったため、正直楽しみです。互いの意見を拾えるようにしていきます。終わりに最近暑いですね。今日から半袖に衣替えしました。個人アプリみほうです。Laravelを勉強しているところです。応用カリキュラムのChatSpaceについては期日(5/17)までに終えることができてよかった😌Slackの個人チャンネルで完了報告した後、LGTMもらって嬉しくなったと同時に自信が増しました。現状達成が難しいです。Laravelの進捗が予定よりも遅いためです。Laravelの機能紹介で、アプリケーションについては少し触るぐらいと考えています。この初期案に沿ってアプリケーションを作ってみます。考えているのは「忘れ物チェック・検索アプリ」です。・USERがログイン/ログアウト/サインインできる。・USERが自分の持ち物(belongings)を投稿できる。・USERが持ち物を名前で検索できる。・USERが持ち物を編集・削除できる。・持ち物に筆記用具や貴重品といったタグを決めることができる。・名前だけでなくタグでも検索できる。・チェックリストでチェックすることができる。データベース再考した方がいいと考えています。作りつつカラムを編集していきます。*1トップページ画像トップページはこのようにします。Laravelと呼ばれるPHPフレームワークの学習に取り組んでいます。Laravel入門」を使っています。断片的で繋がりがなく、本を買って勉強することにしました。先ほど述べたように今の所遅れています。5/20時点でp.161まで完了したのですが、これからアプリケーション製作と考えると、発表会は機能紹介中心になりますね。Laravelを勉強しようとしている理由は以下の3点あります。1.PHPフレームワークの中で現在一番伸びているフレームワークであるため。2.Rails同様MVCモデルで作られており、Pythonよりは入りやすいと感じたため。3.社長さんから「サーバーサイドの開発言語にはPHPを使っている」と聞いたため。Laravelは2012年にリリースされた、PHPフレームワークの中では比較的後発のフレームワークです。それがリリースされて以後、急速に発展しています。*2日本ではこれまで2005年にリリースされたCakePHPの需要が高く、社長さんの会社でもCakePHPを使っているとは聞きました。Laravelを勉強します。保証され、誰が作っても再現できるシステム」のことだと考えています。Railsもそうだと考えます。newするだけで、最初からルーティング、コントローラ、ビューのファイルが入って、学習すれば誰もが教材を再現できる代物ですからね。今考えているアプリケーションも自分の理解度を考えればRailsで作った方がラクなのですが、PHPといった他の言語も学べばプログラミング言語を学ぶことがより楽しめます。RubyとPHP、条件分岐のif文や繰り返しのwhile文など似ている部分もありますので違う言語に触れてみると面白いです。Laravelを利用してて、腑に落ちたのがRailsと同様MVCの流れに沿っていることです。MVCとはアプリケーションフレームワークで使われるアーキテクチャで、アプリケーションをModel-View-Controllerの各機能に分けて整理します。Modelはデータベースに関する処理全般を担当します。Viewは画面表示を担当します。Controllerは全体の制御を担当します。Modelとやり取りしてデータを取得したり、Viewを利用して私たちに返す画面を作成します。PythonのフレームワークDjangoではこれがMVTと呼ばれるModel-View-Templateから成るモデルになります。ややこしいのはViewの役割がMVCと異なることで、RailsでいうViewはDjangoでいうTemplate、DjangoでいうViewはRailsでいうControllerとなります。勉強しようとしても違いがとっつきにくいと考えました。Laravelを勉強してみて、処理の流れがRailsと似ているので作りやすいとは思いました。Bladeテンプレートなど新しいワードも出てきますが似た部分も多いため、特に不便なく学習しています。理由3.個人アプリで勉強する言語はサーバーサイドの言語と最初から考えていました。マークアップはbootstrapやjQueryライブラリと考えていたためです。Python、Go、PHPを基礎だけProgateで学習した後、どれをやろうかと迷い祖母の知人の社長さんに「会社でのサーバーサイドの開発言語は何を使っていますか?」と聞いてみたところ、「PHPを使っている」と返ってきたため、PHPにしました。最終的には社長さんの返答が決め手となったわけです。勉強してて思ったのが、1つの言語を学ぶと似た表現が他にもあるなと思ったところです。Railsを用いたアプリケーション作成を勉強してきたことが役立っていると思いました。応用カリキュラムを終えた感想twiiterでも話していたように続けてこれたのはカリキュラムの製作手順に沿ってGitHubに適宜コミットしたり、OneNoteに記録し続けたことが大きいですね。記録を見返すことで過去にどんな手順を辿ったか振り返ることができますから。苦戦したのはインクリメンタルサーチのイベントの発火部分です。動画↓https://i.gyazo.com/221ca3a1bb53bea92a4e4586332b22ef.mp4フォームに名前を入力しても出てこない、追加ボタンを押したところで名前が追加されない、チャットメンバーに追加できても更新ボタンを押すとテーブルに保存されないといった問題が発生し、それらの修正に時間をかけました。デバッグツールであり、binding.pryではコントローラで正しく値を受け取っているか見て、console.logではイベントが正しく発火しているか引数に値を入れて確認しました。ディスカッションでdebuggerという処理を止めてデベロッパーツールのConsoleで処理を書いて値が正しく受け取れているか確認するツールも知ったので、イベント設定時はそれも使っていきたいと思いました。始めてから15時間くらいですかね、終わったのは。終わった時は「やっと終わった〜」と安堵しました。ChatSpace作ってみて、アプリケーションの設計・開発・公開(デプロイ)の流れを出来て役にたつと思いました。個人アプリ発表会に向けて準備していきます。Laravelについてより詳しく話します。ありがとうございました。前記事*1でミニアプリの感想を書いたので、応用カリキュラムと現状の課題、今後のことについて書きます。今後のこと応用カリキュラム感想4月23日に本試験合格してから、応用カリキュラムを進めています。応用カリキュラムではChatSpaceと言うアプリケーションを作成しています。目的としてはゼロからリリースをするまでのアプリケーション開発の流れを学ぶために取り組んでいます。今日まで以下のことに取り組んできました。基礎カリキュラムの内容より難しく感じました。それと同時に基礎の内容が大事やなあ〜と思いました。jqueryについても学んでいますが、後で出てきますのでここでは割愛しています。内容の復習についてはOneNoteを見ることもありますが、5/17までにChatSpaceをデプロイしようと考えたら、カリキュラムを復習する時間がなかなか取りづらいです。やって理解しようとしてます。現状の課題を以下に書きます・なるべく自分で解決するユーザー管理機能やグループ管理機能の実装の際、メンターに聞くことが多かったです。早く済ませようとしていました。このやり方ではエンジニアとして必要な調べる力が十分に身につきません。調べて解決法を探します。実際メンターに聞いてみて考えが整理できることもありますがメンターがコードを書いているわけではないので、聞いたやり方をやってみて「これ別の方法があるな」と思ってしまうこともありました。自分の調査不足で質問したので、調べてやってみてそれでもダメな場合、TECH::CONNECTで質問するようにします。・どんなエラーが発生しているか調べる。エラーが発生した時、エラー画面が英語で表示されます。英語もちゃんと調べてエラー内容を整理していきます。その内容から仮説を立ててエラー解決していきます。・人に教えるときは「なぜそれが必要なのか」伝わるようにする人からコードの説明を求められることもあります。そのとき「なぜそのコードが必要なのか」伝えないと問題に対してなぜ問題なのか伝わらないと思いました。自分が説明して、それで十分でないとき周りで勉強している人から補足情報が入ることが多かったので、心がけていきます。今後のこと5/17までにChatSpaceを完成させることを目指します。本日が5/7なので、5/17まで休まず行って完成させます。今日「名探偵ピカチュウ」見て、十分リフレッシュしました。明日から非同期通信に入ると思います。苦戦するとは思いますが、なるべく自力解決を心がけます。ありがとうございました。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。