はじめに 2021年3月から学習を始めて内定をもらうまでの記録をまとめました。 参考にして頂けれる所とこれは参考にならないなど反面教師にして頂ければ幸いです。 章 内容 簡単な経歴 自己紹介 学習から内定までの道のり 時系列にまとめています 転職活動内容 実績と面接等について テックキャンプについて テックキャンプでの学習について詳細を詳しくまとめます やって良かった事 面接で評価された事など 自己紹介 2018.3 文系大学卒業(観光学を専攻) 2018.4 新卒で旅行会社の営業職として入社 都内の小中高学校の修学旅行などの提案や添乗業務を行いました 2021.3 テックキャンプ丸の内校98期として入学 2021.3 退職(3月の上旬に退職し、残りは有給消化のため) 学習から内定までの道のり 2021年3月22日 テックキャンプ98期として入学。同期が7人いて毎日アウトプットしながら学習開始。 会社は3月31日まで在籍しておりましたが、有休消化のため3月19日で出勤終了。 2021年4月〜5月22日 少しづつ他の同期から遅れをとり始めて焦りながらも学習をし、無事卒業。 (内容についてはテックキャンプについての章で詳しく書かせて頂きます。) 2021年5月23日〜6月 卒業後も学習を続けオリジナルアプリに取り掛かりました。 しかしHTML・CSSがうまくできず苦戦。もう一度Progeteで復習し、同期から教えてもらったUdemyの教材で復習。 ここに時間をかけ過ぎました。簡単に復習すれば良いもののしっかりと時間をかけてしまい同期との差が生まれました。 下旬頃からは渋谷校の98期の同期とも交流をし始め、毎日アウトプットの会が開かれました。 2021年7月〜8月 ようやくオリジナルアプリに取り掛かりました。フロントに時間をかけるのはもったいないと気づき、Bootstrap・Font Awesomeを取り入れていきました。 下旬頃に父親が体調を崩し入院し看病できるのが私しかいなかったので8月中旬頃までは学習を中断する状態となりました。 就活も中断する事になるのでカリキュラムも見れなくなりました。 2021年9月 アプリが完成し始め、AWSへ1から構築しデプロイするのに3週間かかりました。 まずはAWSの学習をUdemyで行い、Qiitaの良き記事を参考に作成。 同期が次々と転職する中で焦りに感じ、dockerなどを導入を考えていたのですが、諦めてりあえずデプロイして就活を始める考えになりました。 2021年10月 デプロイができたが、Capistranoは導入したと思い、導入するが度重なるエラーによって涙目。 1週間自分で考えたが解決できずにここで始めてMENTAを使いました。 教えてもらってはエラーとなりの繰り返しで導入まで3週間かかりました。 ここが一番地獄だったかもしれません。 4週目頃にようやく完成しました。 2021年11月 やっと自ら応募し始めました。 使った媒体はWantedlyとテックキャンプ経由の2つから応募しました。 履歴書・職務経歴書はすでに完成しており、面接練習も学習しながらやってきたのですぐに就活フェイズに移る事ができました。 毎週2・3社面談をして4週目に2社内定が出ました。 転職活動内容 オリジナルアプリが完成する前の実績 2021.6〜8月までの実績 応募媒体名 応募企業数 書類通過数 内定 テックキャンプ経由 5 0 0 　理由 結論から言うとこの頃はやる気が転職する気がありませんでした。 オリジナルアプリが完成していない人材に内定を出す企業なんてない！内定を出すとしたら怪しいと勝手に思い込んでいました。 「じゃあなんで応募するんだよ！」と言うとテックキャンプの卒業後、カリキュラムを見たければ週1社応募しなければいけませんでした。 就職活動の意思がないとカリキュラムを見る事ができないのでとりあえず的な感覚で毎週1社だけ送っていました。 完成後の活動内容 2021.11.1 〜 11.24 自分から応募を行ったのは11月からでした。 応募媒体名 応募企業数 書類通過数　 カジュアル面談　 1・２面接　 最終面接　　 内定　 テックキャンプ経由 4 2 2 2 1 0(2社内定のため辞退) wantedly(スカウト) 17 0(全て辞退) 0 0 0 0 wantedly(自己応募) 6 4 3(1社辞退) 3 2 2 テックキャンプについて 10週間のプログラムをこなす形になります。 10時〜20時までは必須で学習を行い、1時間事に学習した内容を同期とzoomを繋いでアウトプットする学習方法になります。 もし分からなければメンターさんに質問ができるので躓くことはありませんでした。 98期は7人いて平日5日間毎日顔を合わせていました。 1週目〜2週目半ば 基礎カリキュラムを終わらせました。 内容は・・・ HTML・CSSについての学習 簡単なLinuxコマンドについて Rubyの基礎文法 Railsの基礎について MVCなど理解が中々できずメンターさんに質問しまくりました。 また次の応用に行く前にテストがあり、合格しなければ応用カリキュラムに進むことはできません。 2週目半ば〜4週目 応用カリキュラムに入り、実際にアプリを作成する段階に入ります。 簡単な投稿系アプリの作成 git hubの使い方 テストコードの書き方 メッセージのやりとりができるアプリ作成 実際にアプリを作る事で理解が深まってきました。 5週目〜7週目半ば ここから発展カリキュラムに入ります。 Javascriptの基礎 Javascriptを使った簡単なアプリ herokuへデプロイ 簡単な投稿系アプリを実践的に作成 実践的にアプリを作成するため、ヒントしだけもらって自分で開発していく形になります。 投稿機能ができたらメンターに報告し、できたら次の機能の開発へ進んでいきます。 ここで同期と差ができていき、土日もフルで学習しました。 ここでも分からなかったら質問ができます。 7週目半ば〜9週目半ば 最終課題に突入です。 フリマアプリの作成をヒントなしでの開発です。 基礎や応用のカリキュラムを復習しながら開発しました。 やり方は発展カリキュラムと同じやり方で機能別でメンターに報告していきます。 最終的には7人中4番目に完成しました。 9週目半ば〜10週目 ここからはオリジナルアプリの構想と設計をし始めました。 メンターさんには聞く事はできないので分からなければ自分で解決するしかありません。 カリキュラムを参照しながら進めました。 同期の中ではすでにオリジナルアプリを完成する人もいました。 よかった所 メンター 質問し放題なので毎日10回程度は質問してました。 私の場合はほとんど答えて下さったので嫌な印象はなく大満足でした。 ライフコーチ 期ごとにライフコーチが一人つきます。 毎週1回面談があったので悩み事やカリキュラムの進みについて相談に乗ってくれました。私は教室で学習する事が多く、教室にはライフコーチの方がいらっしゃったので直接相談することもできました。 キャリアアドバイザー 就活について相談ができるアドバイザーが一人つきます。 履歴書・職務経歴書や面接対策などアドバイスをくれます。 就職するまで担当者が1回変わりましたが特に問題はありませんでした。 強いて言うなら最初のCAさんはオリジナルアプリに時間かけないで早く就活しましょうと圧がすごかったのです(笑) またオリジナルアプリができてないからかテックキャンプ経由でくる求人は全てSESでした。 逆に完成してからは全て自社・受託系の企業でした。 興味がある会社もたくさん紹介してくれたので不満はあリませんでした。 丁寧に添削してくれるのでとてもよかったです。 同期 同期とは卒業後も毎日情報交換zoomをしてました。途中からは渋谷校の同期の方とも一緒にzoomしました。 徐々に就職が決まり減っていきましたがチャンネルには残って下さったので、転職後のお話なども聞くことができました。 一緒にエラーを解決してるれる同期や自走力の塊の同期がいたり、参考になる方ばかりでこの方々がいなければ途中で諦めてたかもしれません。 やって良かった事 Qiita アウトプットのためにQiitaを毎日投稿してました。 途中からは毎日投稿ができなくなったのですが、なるべく投稿することを心がけました。 投稿することによって学習の定着につながりました。 一番は面接時の話の種になります！ 投稿することによって自走力にも繋がり、どの企業に面接に行っても必ず評価して下さりました。 寿司打 テックキャンプ入学から毎日欠かさず寿司打を続けました。 最初はブラインドタッチなんてできなかったのですが、今では余裕です(笑) 一万円コースも5,000円プラスで毎秒5.4秒にする事ができました。 Wantedlyスコアを上げる 転職サイトはWantedlyを利用しました。 できるだけ自分の情報を載せて知ってもらうためにめちゃくちゃ書きました。 最初はスコア40程度だったのですが細かくできるだけ書き、最終的にはスコア89になりました。 上がれば上がるほどスカウトがきた印象です。 オリジナルアプリ これは確実に必要です。 何か問題解決できるサービスか自分が必要だなと思ったサービスを作れば自ずと作成意欲も湧いてきますし、面接で説明を求められた時に丁寧に答える事ができます。 私の場合は教育旅行系の投稿アプリを作成しましたが、AWSの1から構築したくらいです。 本当はdockerやCircleCIなどは導入したかったですが、AWSに手こずったせいでできませんでした。 自社開発系の企業の面接の場合はオリジナルアプリについて聞かれる事はありましたが、SES系企業の場合は聞かれる事はありませんでした。 スライド作成 これは同期が転職の際に作成していて参考にして作成しました。 なぜこのアプリを作成したのか？、市場分析してグラフなどを用いて根拠を説明するスライドになります。 READMEに説明書くからいらなくねと思う人もいるかと思いますが、就活でかなり有効でした。 スライドを見てくれてWantedlyのスカウトをしてくれた企業や面接前に見てくれて、市場分析までして作った人はあまりいないと評価をしてれました。 最後に 同期の中でも脱落していく人はいました。 しかしどんなに長くなっても諦めなければ必ず転職できる思います！ 実際に私がそうでしたし、周りの同期を見てもそうでした。 他の記事でも皆さんおっしゃってましたがただテックキャンプに入れば転職できると思ってる人は厳しいかと思います。 参考にした記事 めちゃくちゃ尊敬する方の記事です

環境 Ruby 3.0.2 Rails 6.1.4.1 APIのリクエストテスト gemを使わずにjsonが期待通りに取れているかのテストを書くとこうなる。 describe "GET /api/v1/fruits" do subject { get '/api/v1/fruits', headers: headers } let!(:available_fruits1) { create(:fruit) } let!(:available_fruits2) { create(:fruit) } let!(:unavailable_fruits) { create(:fruit, :unavailable) } it '旬の果物を返すこと' do subject json = JSON.parse(response.body) expect(response.status).to eq 200 # 果物が3つあり、そのうち旬の果物が２つ、旬じゃないのが1つ。jsonで取れるのは果物が２つ expect(json['fruits'].length).to eq 2 # 旬の果物の2つは含まれているか expect(json['fruits'][0]).to include({"id"=>available_fruits1.id}) expect(json['fruits'][1]).to include({"id"=>available_fruits2.id}) # 旬でない果物は含まれていないか expect(json['fruits'][0]).not_to include({"id"=>unavailable_fruits.id}) expect(json['fruits'][1]).not_to include({"id"=>unavailable_fruits.id}) end end 参考

楽譜共有WEBサービスを作成した 概要 「楽譜を共有する」サービスを作った。 既存サービスと異なる点 基本的にコードで楽譜を記述する Gitサーバーが搭載されているので、楽譜の間違いなどを修正することが容易 アーティスト情報や曲情報を整理できるようになっている 例) 「凛として時雨」「TK from 凛として時雨」「Ling tosite Sigure」どれ...? 翻訳機能がついている それを作るにあたって、困ったこと、工夫した点、使用した技術、などをまとめたいと思います。 ※語彙力ないです alphaTab様の恩恵が非常に大きいです 自己紹介 大学3年生 都内在住 WEBエンジニア はじめまして。私は主にWEB系の開発を行っています。 プログラミングは大学1年生の時にRailsTutorialに入門しました。 今は、RailsとReactをメインで開発を行っています。 今回使用した技術 STAVE Editor STAVE Editor 概要 STAVE Editorとは、楽譜を記述するデスクトップアプリケーション シンプルに記述が可能なalphaTexを採用 Javascriptで記述することが可能 Git管理が可能 STAVE Editor 技術 STAVE Editor 工夫 alphaTab様が提供しているalphaTexをJavascriptで動くようにした。 Node.jsとElectronとReactをうまく組み合わせた UIでGitを扱える STAVE Editor 展望 alphaTexのLint機能 UIのアップデート STAVE Web STAVE Web 概要 STAVE Webとは、alphaTexの楽譜を共有、表示するWEBアプリケーションです。 Git Serverを搭載 alphaTexを表示、再生が可能 曲、アルバム、アーティスト、バンドなどの情報を整理することが可能 STAVE Web 技術 Git Serverを備えていて、pushするとNginxとRails(devise)でBasic認証を行うようになっています。 STAVE Web 工夫 NginxとRailsのdeviseを組み合わせてGit Push時にBasic認証を行った GraphQL使ってみた。 既存の楽譜アップロードサイトと差異をつけるために、曲情報、アーティスト情報、バンド情報を正しく整理できる設計になっている。 STAVE Web 展望 ブラウザでSTAVE Editorを使えるようにする。(JSでJSスクリプトの実行さえできればいける) UIのアップデート alphaTex以外もアップロードできるようにする git push時に拡張子をチェックし、不適切なファイルは取り除く gitファイルを外部のストレージサービスに保存する CI/CD 技術話 React + Typescript + VSCodeはすごい メリット ほかのJSフレームワークに比べて型が効いてる(気がする) Vue(3は知らん)やAngularに比べて、型がよく効く JSXの属性に渡す値などもReactは厳密にチェックしてくれる デメリット JSファイルにCSSファイルをインポートして要素に適応させるのは面倒くさい Typescriptに対応していないパッケージを使用する際に、既存の型システムに適応させながら組み込むのがめんどくさい React Component + Typescript Genericsすごい 場合によりますが、とにかくすごいです。コンポーネントを様々なデータ型で使いまわしたい場合最強になります JSのオプショナル演算子はとりあえず使えばいいわけではない Typescriptの「undefineやnullを含む可能性がある」という警告に対して、とりあえずオプショナル演算子をつけるのはあまりよくないという話です。 特に、GraphQLやエンドポイントの多いREST、JSフレームワークのコンポーネントがpropsのバケツリレーを多くする場合に非常に重要になります。 GraphQL + devise_token_authの組み合わせをどうにかしたい 本来であれば、REST APIかGraphQLのどちらかの設計に寄せるべきです。 しかし、GraphsQLでヘッダーの称号や認証を行うスマートな方法が思いつきませんでした。 結局、認証のいらないリクエストはGraphQL、認証のいるリクエストはRESTという構造になってしまい、気持ち悪くなってしまいました。 多言語対応した 今までの楽譜共有サービスでは、アーティストの記述の違いや、曲名の誤字、スペースの混入などが多く、検索をかける際に不便でした。 また、youtubeやspotify,itunes,wikipediaなどの、外部のサイトと連携を行う際に以下のような問題が起きました。 アーティスト名や曲名が国によって異なる wikipediaのurlが国によってことなる itunesでの曲タイトルが国によって異なる これらの問題を容易にに解決することができたのはmobilityのおかげです！ GithubActions dispatch_event 便利 GithubActionsのdispatch_eventを使用してみました。 リポジトリが更新された場合、このリポジトリを所有する親リポジトリの参照を更新するものです。 わざわざ親リポジトリを開いて、下記のコマンドを実行するのはめんどくさかったので、よかったです git submodule update git add git commit git push 展望 実はStave Web/Editorだけではなく、Stave Effectorのプロトタイプも作成しています。これは、ブラウザのWEB Audio APIを使用して、ギターなどのエフェクターを仮想的に作るものです。こちらの開発もしたいと思っています。 個人的には、コードベースの楽譜データを貯めると、いろんなサービスに展開することができると考えています。 デベロッパー向けにAPI解放することで機械学習による作曲ができる カラオケサービス 楽器の学習サービス 作曲や楽器への学習 音楽業界の振興 ...etc デプロイしたのですが、それを公開するのはまだ早いと感じています。 著作権の問題を解決するための窓口のシステム開発や、UIのアップデートは必須です。 また、様々な音楽著作権団体と包括契約を行う必要があるでしょう。 なので、いつかデプロイできたらなーと考えています！ ここまで読んでいただきありがとうございました！ なにかありましたら、下記のTwitterから気軽にメッセージをください。 (就活してます) Twitter

はじめに 11月の個人的につまったところのメモになります。 Qiitaに記事にするほどでもないかなというものを自分用にまとめています。 今月は大した作業はなく問題は少なかったです。 問題 1. なぜか子モデルが作成されず、モデル名_idがないと言われた class_room.build_member(number: row[:number]) rowはExcelのファイルをhash形式にした各行を表しています。 ここで、class_roomをsaveすると、member_idがないというSQLエラーが出ます。 原因は、row[:number]がinteger型で送られてくるのに対して、numberカラムのバリデーションでstringになっていたことからmemberの作成ができずに、(エラーは起きるが)class_roomが作成されるため、参照するmemberがないので怒られていた。 class_room.build_member(number: row[:number].to_s) とすることで解決した。 2. Rails/UniqueValidationWithoutIndex: Uniqueness validation should be with a unique index. Rubocopを走らせたところ以下のエラーが発生 Rails/UniqueValidationWithoutIndex: Uniqueness validation should be with a unique index. indexを張ったところ、このようなエラーが発生した。 staff_number.rb def up add_index :staff_number, :employee_code end def down remove_index :staff_number, :employee_code end インデックスをユニークにしてねと言われてるので、ユニークにしたがエラーは変わらず発生 staff_number.rb def up add_index :staff, :employee_code, unique: true end def down remove_index :staff, :employee_code end そこでエラーをよく確認すると validates :employee_code, presence: true, uniqueness: { scope: :staff } ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ scopeのところで参照しているがそこにindexが張られていないことが原因であると気づいた。 そこで、stuff_numberとstuffモデルをつなぐ、stuff_idにindexを張る staff_number.rb def up add_index :staff, [:employee_code,:staff_id] unique: true end def down remove_index :staff, [:employee_code, :staff_id] end これでうまくいった。 2. フォームに入力をして登録でcreateをしたがリダイレクトされない form_withを使って、ユーザーを作成し成功するとログイン画面にredirectされるはずなのにリダイレクトされなかった。renderも効いていなかった。 form_withはlocal: trueオプションをつけないとAjaxになってしまい、HTMLがレンダリングされないのが原因だった。 Rails 5.1のform_withを使ってうまくredirectできないあなたへ 3. 再帰のRspecでテストに困った 以下のようなモデルのメソッドをテストします。 test.rb def unique_login_id login_id = SecureRandom.alphanumeric(6).downcase return login_id if User.find_by(login_id: login_id).blank? unique_login_id end ランダムな文字列をlogin_idにしてユーザーでそのログインIDを利用している人がいるかを検索 1. いなければlogin_idを返す 2. いた場合は再度unique_login_idを呼び出す ここで2のテストに躓きました test_spec.rb describe 'unique_login_id_assign' do subject(:result) { test.send(:unique_login_id) } let(:test) { create(:test) } let(:login_id) { 'test_id' } before do user = create(:user) user.login_id = login_id user.save end context '作成した共通IDがログインIDと重複しているとき' do it 'ユニークな共通IDを返すこと' do allow(SecureRandom).to receive(:alphanumeric).and_return(login_id) expect(result).to eq login_id end end この方法だとallowが常に同じものを返し続けるためループし続けてしまいます。 そこで以下の記事を発見しました。 rspec-mocksを使ってテストで上手に手を抜こう この記事によるとand_returnで複数の値を返せるようになるとのこと test2.rb user = User.new allow(user).to receive(:name).and_return('たろう', 'じろう', 'さぶろう') user.name # たろう user.name # じろう user.name # さぶろう user.name # さぶろう これをうまく利用することでテストがかけました。 test_spec.rb describe 'unique_login_id_assign' do subject(:result) { test.send(:unique_login_id) } let(:test) { create(:test) } let(:login_id) { 'test_id' } before do user = create(:user) user.login_id = login_id user.save end context '作成した共通IDがログインIDと重複しているとき' do it 'ユニークな共通IDを返すこと' do allow(SecureRandom).to receive(:alphanumeric).and_return(login_id, 'unique_login_id') expect(result).to eq login_id end end ちなみにモデルSpecのプライベートメソッドはsendを使うことで呼び出せます RSpecでprivate(プライベート)メソッドをテストする[Ruby][Rails] 4. パラメータを付与したときにエラーになって処理が始まらない URLにauth_tokenというパラメータを付与して、アクセスする処理を行っていたのですが、なぜかエラーが発生してしまう。 before_actionも動いていないようだった。 ActionController::BadRequest: Invalid request parameters: Invalid encoding for parameter: rails Shift_JISの日本語パラメータを受け取る 調べたところ400 Bad requestが原因だった。 これはブラウザに起因するもので、URLのエンコードが正しくない場合に起こるそうです。 試しにlocalhost:3000?auth_token=testなどでアクセスしたら問題なく動いた 400はブラウザの関係もあるため、このままにすることにした おわりに 技術的に挑戦ができていなかった月となりました。 やはり出社になったり、忘年会準備だったりと勉強の時間が少なかったのが原因かなと思いました。 来月はAWSの勉強に挑戦していきたいです。 参考 Rails 5.1のform_withを使ってうまくredirectできないあなたへ rspec-mocksを使ってテストで上手に手を抜こう RSpecでprivate(プライベート)メソッドをテストする[Ruby][Rails] rails Shift_JISの日本語パラメータを受け取る

前書き 昨年に引き続き、今年もKITのアドカレの記事を書いていきます。 ……他に話すべきこともないので早速初めましょうか。 レガシーシステムの闇 私がアサインされたプロジェクトではRailsでWebアプリを開発していました。最初のリリースが行われたのは5年前だったため、古いプロジェクトではありませんでした。 また、実際にそのアプリが動いているサイトにアクセスしてみたりもしましたが、怪しい様子はありませんでした……あくまでユーザ側から見れば…。 あるとき闇に気付く 環境構築をしていたとき、異変に気付きます。 CIが数年前から失敗してるけど、設定ミスかな 今使ってるRubyが数年前からEOFになってる… 更新されないGemfile テストどこ…？ slimファイルでごり押しされたレイアウト ここから開発チームの戦いが始まりました。 1. CIが何年も前から失敗している CIツールのバージョンが更新されていないのが原因でした。 イシューは立っていたものの、誰もその問題に対処していませんでした。 2. Rubyのバージョンが古い Ruby 2.3が使われていました。EOFを過ぎているどころの騒ぎではないですね。 「ときどき警告が出るけど、アプリ自体は動くし大丈夫だろう」 という安直な考えの基に開発されてきた歴史が垣間見えました。 3. 全てのGemのバージョンが古い 「bundle updateしなければRubyのバージョンが古くても動くじゃん。じゃあGemも放置しとこう。」 4. テスト用のコードが少ない 想定されているテストケースがここまで少なかったのは衝撃的でした。当然バグも頻発し、機能実装は遅れがちになっていました。 5. slimファイルで十重ネスト slimの構文は確かに簡潔ですが、その簡潔さを理由にしてむやみにネストを深くしていい訳ではありません。 残念ながら、過去のプロジェクトメンバーは可読性を無視してdivタグを増やしまくったようで、ネストが永遠と続きそうなプログラムが大量に生み出されてしまっていました。 どう対処したか モチベを維持しつつ作業したかったので、簡単に解決できそうなものから順に取り組むことにしました。 私の場合は具体的には、 CIのバージョンのアップデート slimをerbに変更する 不足しているテストケースを補完する Rubyのバージョンアップ Gemの全体的なバージョンアップ の順で進めました。 保守メンバーが少なかったこともあり半年近く掛かってしまいましたが、以前よりもはるかに安全で保守性の高いものに改善することができました。 再発防止策 今回はメンバーの協力もあり、何とかシステムを改修できましたが、数年後に同じような事態に陥らないようにしなければなりません。 この問題を二度と引き起こさないように、今後はソフトウェアをアップデートしたりテストを書いたりするだけの日を定期的に設けることで、機能実装だけでなくリファクタリングも行う習慣を付けようと考えています。

問題 Rails Tutorial (5.1) 第1章 1.3.1 bundle install しようとすると以下のようなエラーが出る Fetching gem metadata from https://rubygems.org/............ You have requested: spring = 2.0.2 The bundle currently has spring locked at 2.1.1. Try running `bundle update spring` If you are updating multiple gems in your Gemfile at once, try passing them all to `bundle update` 書いてあるとおりに bundle update spring をしてもまたエラー Fetching gem metadata from https://rubygems.org/............ Resolving dependencies... Bundler could not find compatible versions for gem "activesupport": In snapshot (Gemfile.lock): activesupport (= 5.1.7) In Gemfile: rails (= 5.1.6) was resolved to 5.1.6, which depends on activesupport (= 5.1.6) coffee-rails (= 4.2.2) was resolved to 4.2.2, which depends on railties (>= 4.0.0) was resolved to 5.1.7, which depends on activesupport (= 5.1.7) Running `bundle update` will rebuild your snapshot from scratch, using only the gems in your Gemfile, which may resolve the conflict. さらに bundle update してもエラー この手順で直る場合もあるみたい Bundler could not find compatible versions for gem "actionpack": In snapshot (Gemfile.lock): actionpack (>= 5.1.7) In Gemfile: rails (= 5.1.6) was resolved to 5.1.6, which depends on actionpack (= 5.1.6) Running `bundle update` will rebuild your snapshot from scratch, using only the gems in your Gemfile, which may resolve the conflict. 原因 おそらくプロジェクト作成時にインストールしたGemよりも前のバージョンをインストールしようとしたのが原因 そのプロジェクト作成時の情報が Gemfile.lock に保存されていて、依存関係の影響でうまくいってないのかも 解決法 Gemfile.lock を削除して、bundle install を行う $ rm Gemfile.lock $ bundle install 対策 自分でGemfileを編集するときは、RubyGems.orgでGemを検索し、詳細ページの「GEMFILE」をそのままコピーする 参考 Ruby on Railsでbundle installでエラーが出た時のシンプルな解決方法 | 独学プログラマー? 【初心者向け】bundler、Gemfile、Gemfile.lockの関係性について図でまとめてみた - Qiita Gemfile.lock にはインストールされている gem のバージョンが書かれている，わけじゃない - Qiita

原因 ホームディレクトリに .ruby-version ファイルがあるため ホームディレクトリで rbenv local コマンドを使ったのが原因 おそらくglobalよりもlocalが優先され、ホームディレクトリでlocalが設定されているので強制的に常にlocalが指定されている状況になっていた 解決法 ホームディレクトリの .ruby-version フォルダを削除し、再びglobalで再設定する $ cat ~/.ruby-version $ rm ~/.ruby-version $ rbenv global <バージョン> 参考 【Ruby】rbenv global してもバージョンが変らない｜鹿せんべいとエンジニア [初期設定]なぜ「.ruby-version」を作成するのか？ - Qiita

■環境 ・Windows10(64bit) ・Ruby 2.7.4 ・Rails 5.2.6 ・clockwork 2.0.4 ・本番環境 Heroku ■Railsでのタスク定期実行方法（開発環境） 状況 Railsアプリケーション上でタスクを定期実行したい。 そして、Windows環境ではgem「whenever」は使用できないため、gem「clockwork」をインストールし目的を達成する。 作業内容 １）gem「clockwork」をインストール Gemfile gem 'clockwork' ターミナル bundle install ２）タスクファイルを作成 「config\clock.rb」のように、任意の階層・ファイルを作成する。 ３）タスクファイルの内容を記載 config\clock.rb require 'clockwork' require File.expand_path('../boot', __FILE__) require File.expand_path('../environment', __FILE__) module Clockwork handler do |job| # 実行したい処理を記載 end # 実行したいタイミングを指定。以下ならば、毎日・00:15（24時間表記）が来たときにのみ実行。 every(1.day, 'midnight.job', :at => '00:15') end ４）タスクを実行 ターミナル # ４－１）該当アプリケーションの階層に移動 cd 【該当アプリケーションのルートディレクトリパス】 # ４－２）clockworkコマンドを実行 clockwork config/clock.rb frequent.job・less.frequent.job・hourly.jobの場合は以下の挙動になる。 　コマンド実行→直後にタスクを実行→待機→指定したタイミングでタスクを自動実行→待機（以降繰り返し） midnight.jobの場合は以下の挙動になる。 　コマンド実行→待機→指定したタイミングでタスクを自動実行→待機（以降繰り返し） ■Railsでのタスク定期実行方法（本番環境） 状況 本番環境としてHerokuを利用するが、Herokuにはプロセスの合計稼働時間で課金される・アプリケーションが毎日自動再起動されるなどの仕様がある。 そのため、アドオン「Heroku Scheduler」を使用するとよい。 作業内容 以下を参考に設定

■環境 ・Windows10(64bit) ・Ruby 2.7.4 ・Rails 5.2.6 ・Mechanize 2.8.2 ■MechanizeでJavaScriptの箇所を読み取れない 状況 Railsアプリケーションでgem「Mechanize」を使用し、Webスクレイピングを行っている。 しかし、HTMLファイル内のJavaScriptの箇所だけ読み取れない（パースできない）。 原因 MechanizeはJavaScript未対応 対処1 MechanizeではなくSeleniumなどを使用 対処2 JavaScriptが行うはずの処理をRubyで置き換える。 ただし、そのためにはJavaScriptの内容を読み解く能力が必要。 対処3 HTMLファイル内のscriptタグを削除し、読み取り可能になるか試す。 例 # Mechanizeの初期設定を実行。Mechanizeクラスのオブジェクトを作成。 agent = Mechanize.new # 保持する履歴の最大数を指定。「0」だとリファラー周りで不都合があるが、大きいとメモリ容量を取るため、「2」辺りが妥当。 agent.max_history = 2 # HTTPリクエストのヘッダーにUser-Agentを設定。指定文言以外だとMechanizeの情報が送信されてしまうため注意。 agent.user_agent_alias = 'Windows Mozilla' # キャッシュに存在するページへの再アクセス時に更新チェックを行うかどうかを設定。true：変更が無ければキャッシュを再利用。 agent.conditional_requests = false # URLを取得 top_url = 'https://sample.co.jp/' # MechanizeにてURLからHTMLファイルを取得し、パースを阻害するJavascript関連のタグを削除。 html = agent.get(top_url).body.gsub!(/<script.*?>/, "").gsub!(/<\/script>/, "") # 以降で必要なパースなどを行う ・Mechanizeのgetメソッド：　URLが表すページを取得する ・Mechanizeのbodyメソッド：　ページのBody部を返す ・gsubメソッド：　文字列を置換する。標準では非破壊的メソッドのため、今回は「!」を付け破壊的メソッドにしている。

ホームページ閲覧数を表示させる機能を追加 ruby 2.6.3p62 rails 5.2.6 1.新規実行内容 Gemfileに以下を追記 gem 'impressionist', '~>1.6.1' railsバージョンとimpressionistバージョンによっては エラーが発生するので注意 bundle install rails g impressionist impressionistテーブルを作ると以下が自動で作成されますが 使うのは1カラム(session_hash)である create_impressions_table.rb class CreateImpressionsTable < ActiveRecord::Migration[5.2] def self.up create_table :impressions, :force => true do |t| t.string :impressionable_type t.integer :impressionable_id t.integer :user_id t.string :controller_name t.string :action_name t.string :view_name t.string :request_hash t.string :ip_address t.string :session_hash t.text :message t.text :referrer t.text :params t.timestamps end add_index :impressions, [:impressionable_type, :message, :impressionable_id], :name => "impressionable_type_message_index", :unique => false, :length => {:message => 255 } add_index :impressions, [:impressionable_type, :impressionable_id, :request_hash], :name => "poly_request_index", :unique => false add_index :impressions, [:impressionable_type, :impressionable_id, :ip_address], :name => "poly_ip_index", :unique => false add_index :impressions, [:impressionable_type, :impressionable_id, :session_hash], :name => "poly_session_index", :unique => false add_index :impressions, [:controller_name,:action_name,:request_hash], :name => "controlleraction_request_index", :unique => false add_index :impressions, [:controller_name,:action_name,:ip_address], :name => "controlleraction_ip_index", :unique => false add_index :impressions, [:controller_name,:action_name,:session_hash], :name => "controlleraction_session_index", :unique => false add_index :impressions, [:impressionable_type, :impressionable_id, :params], :name => "poly_params_request_index", :unique => false, :length => {:params => 255 } add_index :impressions, :user_id end def self.down drop_table :impressions end end rails db:migrate 2.既存ファイルへ追加 閲覧数を表示させたい、viewファイルのモデルに追記する。 post.rb class Post < ApplicationRecord is_impressionable # 閲覧数確認のため追加 end 「app/views/posts/show.html.erb」に表示させたいため 以下のような記載を追記 app/controllers/posts.controller.rb class PostsController < ApplicationController impressionist actions: [:show] # showアクションで閲覧数確認のため追加 def show @post = Post.find(params[:id]) impressionist(@post, nil, unique: [:session_hash.to_s]) # 閲覧数確認のため追加 end .... end コントローラファイルへの追記部分二か所についてですが ①「impressionist :actions=> [:show]」という書き方でも大丈夫ですが、 　静的コード解析ツールのrubocop実行時に文法的にお叱りを受けてしまいました。 ②.to_sメソッドをつけない場合は 「TypeError can't quote Rack::Session::SessionId」エラーが発生してしまったので 文字列に変換させましょう 最後にviewファイルに以下のような追記をすれば、閲覧数を表示させることができます。 app/views/posts/show.html.erb <%= @post.impressionist_count %>

はじめに 面グラフとは、 折れ線グラフを塗りつぶしたグラフです。こんなグラフ。 Railsでグラフを表示するには Chartkick がとても便利。 デザインが綺麗で扱いやすい Chart.js と組み合わせてグラフを作っていきます。 環境 Rails 6.1.3 Ruby 2.7.2 インストール　 Gemfile gem "chartkick" ターミナル bundle install yarn add chartkick chart.js app/javascript/packs/application.js import "chartkick/chart.js" これで導入は完了です。 実装 1. データの準備 models/sample.rb class Sample < ApplicationRecord def self.data data = { Sat, 24 May 2020: 50, Sun, 25 May 2020: 100, Mon, 26 May 2020: 34 } end end モデルで data = {x軸(横)の数値: y軸(縦)の数値}のハッシュになるように成形。 2. 呼び出し controllers/samples_controller.rb class SamplesController < ApplicationController def index @data = Sample.data end end Viewで表示できるように、コントローラで呼び出します。 3. 表示 views/samples/index.html.erb <%= area_chart @data, min: 0, max: 100 %> Viewで表示。 min、maxで y軸(縦)の最大値と最小値を設定しています。 4. レイアウト変更 グラフ個別に設定 ディベロッパーツールでグラフのidを確認して、CSSを適用できます。 sample.css #chart-1 { 　　width: 100%; min-width: 100%; max-width: 100%; } すべてのグラフに設定 サイトのすべてのグラフに対して共通の設定をする場合は、config/initializers/chartkick.rbで設定できます。 config/initializers/chartkick.rb Chartkick.options = { height: "250px", width: "500px", colors: [ "#219ebc", "#bdbdbd" ] } 上記で変更した場合はrails sでサーバーを再起動すると設定が反映されます。 レイアウトは色々と変更できるので、公式サイトで確認してみてください。 Chart.js 完成！ 以上です。 何かありましたら是非コメントお願い致します。 参考 Chartkick 公式 https://chartkick.com/#installation Chart.js 公式 https://www.chartjs.org/docs/latest/

やりたいこと Railsでガチでフランス語のアプリを個人開発しています。 タイトルや文章をブラウザで表示したいとき、PCブラウザは横に長いから改行は要らないが、スマホブラウザでは改行を入れないと見栄えが悪いってことあると思います。しかもお任せしちゃうと「いや、そこで改行しないで...、ダサい！」ってところで改行してくれてしまいます。 こんな感じで↓ これをPCブラウザの時は、 ようこそ「みんなでフランス語」へ みんなでフランス語、日本語の知識を共有しましょう スマホの時は、 ようこそ 「みんなでフランス語」へ みんなでフランス語、日本語の知識を 共有しましょう という具合で改行したいです。 HTMLで<br>タグを仕込んで、CSS側のdisplayとメディアクエリを活用して制御すれば良いかと思ったのですが、RailsのビューでI18nを使ってしまっている。。ゆくゆくは多言語対応したいから、I18nはそのまま使いたい。 あると思います。 例えばコードがこんな感じになっているとします。 posts/index.html.erb <h2 class="title"><%= t('.title') %></h2> posts/views.ja.yaml --- ja: posts: title: "ようこそ<br>「みんなでフランス語」へ" 実装！ ２ステップです。 1. keyをhoge_htmlにするとhtml_safeとして読んでくれる I18nはsuffixに_htmlとあるとhtml_safeと判断してくれるそうです。 なので、titleをtitle_htmlにします。 posts/index.html.erb <h2 class="title"><%= t('.title_html') %></h2> posts/views.ja.yaml --- ja: posts: title_html: "ようこそ<br>「みんなでフランス語」へ" これはRailsの公式ドキュメントに書いてあります↓ the translation will be marked as html_safe if the key has the suffix “_html” or the last element of the key is “html”. Calling translate("footer_html") or translate("footer.html") will return an HTML safe string that won't be escaped by other HTML helper methods. でも調子に乗ってclass属性を入れると... views.ja.yaml --- ja: posts: title_html: "ようこそ<br class="for-mobile">「みんなでフランス語」へ" I18n::InvalidLocaleData - can not load translations from /Users/USER_NAME/dev/APP_NAME/config/locales/views.ja.yml: #): did not find expected key while parsing a block mapping at line 128 column 7>: こんな感じで怒られました。 2. ならばCSS（SCSS）で工夫してあげる localeのyamlでは<br>と属性なしのままにしておいて、CSSのセレクタで工夫してあげよう！ということで<br>をCSSで親要素から指定してスタイルを設定すればやりたいことが実現できました。 .title { br { display: none; @media (max-width: 414px) { display: inline; } } } 最後に ご指摘などあればよろしくお願いします！ ちなみに、このアプリ、リリースしてガチで使いたいし、ガチで使ってもらいたいので、Instagramから始めました（リンク）。