kevin

Web制作会社勤務。テックキャンプ第90期夜間休日コース卒業。

kevin

Web制作会社勤務。テックキャンプ第90期夜間休日コース卒業。

Sass(SCSS)とTransform、z-indexを用いて背景色がスライドするボタンを作成する(HTML/CSS)

Sass(SCSS)を用いて、以下リンク先のように背景色がスライドするボタンを作成してみます。https://gyazo.com/efc8f1c551fa796e05040200b8e5d802 SassというものはCSSを効率よく記述するためのものです。プロパティの値を変数に入れたり、セレクターを入れ子構造にして記述したりすることが出来ます。Sassで記述したものをCSSに変換することでスタイルを適用する事ができます。では実装にあたり準備をしていきます。 ・使用するもの

kevin

    • 【Heroku】本番環境でアプリに導入している画像が表示されない場合の対応方法(Ruby on Rails)

      今回は、Ruby on Railsで作成しているポートフォリオのassets/images配下に保存している画像が本番環境(Heroku)に表示されないということが起きたので、その解決をメモ書きとして記しておきます。 参考 Heroku上で背景画像が表示されないけどなんなんこれ https://qiita.com/___xxx_/items/fa15f358beba2b9389da 解決方法 上述した通り、ローカル環境ではアプリケーション自体に保存している画像が表示されて

      kevin

      • Ajax(非同期通信)で「いいね」機能を実装する(Ruby on Rails)

        作成中のオリジナルアプリに同期通信(リロードすると反映される)でのいいね機能を実装することは出来たのですが、非同期通信での実装がどうしても出来なくて詰まってしまいました。しかし、何とか実装することが出来ましたのでこちらに書き記します。 非同期通信とは ページ(ブラウザ)のリロード(更新)無しでもレスポンスが得られるというものです。説明よりもイメージしやすいのが、ツイッターやインスタグラムなどのSNSアプリケーションの投稿に対して「いいね」を押すことできます。その際に、どこか

        kevin

        • テックキャンプ夜間休日コースを卒業しました。

          　5月29日に最終課題発表会を終えて、テックキャンプの夜間休日コースを卒業しました。振り返ればいつの間にか半年間の学習が終わったのだと感じます。無事にやり切ることが出来て良かったです。 　テックキャンプ受講の切っ掛けとしましては、私の弟にこういうプログラミングスクールの存在を教えられたというのが一つあります。これは去年の話ではありますが、当時私は大学を卒業後に飲食業に従事する予定でしたが、流行りの某感染症の影響を受けて雇い止めに遭いました。その中で「テックキャンプ」というIT

          kevin

        Sass(SCSS)とTransform、z-indexを用いて背景色がスライドするボタンを作成する(HTML/CSS)

        kevin

        • 【Heroku】本番環境でアプリに導入している画像が表示されない場合の対応方法(Ruby on Rails)

          kevin

        • Ajax(非同期通信)で「いいね」機能を実装する(Ruby on Rails)

          kevin

        • テックキャンプ夜間休日コースを卒業しました。

          kevin

          N + 1問題の解決(Ruby on Rails)

          現在作成しているオリジナルアプリケーションに投稿へのタグ付け機能を実装したのですが、N + 1問題が発生していると感じたためこれを解決しようとしましたが以下のようなエラーが発生したため解決のために四苦八苦しました。スクールのメンターに相談してみたところ無事解決することが出来ましたので、アウトプットします。もし皆さんがRailsでのウェブアプリ開発で「N + 1問題」の解消を行う際に同様のエラーが出た場合、参考になれば幸いです。(例には他のミニアプリを用いています。) N +

          kevin

          N + 1問題の解決(Ruby on Rails)

          kevin

          ユーザー間のフォロー機能を実装する(Ruby on Rails)

          今回はRailsアプリケーションで、アプリの利用ユーザー同士でフォローをする（フォロワーになる）、解除する（フォローを外す）、と言ったSNSアプリならではの機能の実装を紹介します。TwitterやInstagramなどでお馴染みの機能ですが、いざ個人制作でSNSアプリのフォロー機能を実装するとなると難しい部分があります。その中で参考になる解説記事やYoutubeの動画での機能実装の解説がありましたのでそれらを参考にしながら実装を進めていきましょう。 前提とポイント ・Use

          kevin

          ユーザー間のフォロー機能を実装する(Ruby on Rails)

          kevin

          RailsアプリにBootstrapを導入してフロントエンド実装をする(Ruby on Rails)

          今回は以下のようなシンプルなRailsアプリケーションにBootstrapを用いて簡単に見た目の部分の装飾を行います。BootstrapをRuby on Railsに用いて開発するためにはどのような手順があるのか、またどのようにコーディングするのか入門にあたる部分を解説していきます。 ※OSはMacを想定して記事を書いています。 Bootstrapとは Bootstrapとは、HTML/CSSとJavaScriptで構成されているフレームワークです。フレームワークと言えばR

          kevin

          RailsアプリにBootstrapを導入してフロントエンド実装をする(Ruby on Rails)

          kevin

          Controllerに記述された同様の処理の省略(Ruby on Rails)

          以下のように記述されたコントローラーのコードを可読性を向上させるために、before_actionを用いて省略します。 ※一例なのでアクションやコードは一部省略しています。app/controllers/items_controller.rbclass ItemsController < ApplicationController def index @items = Item.all.order('created_at DESC') end def show

          kevin

          Controllerに記述された同様の処理の省略(Ruby on Rails)

          kevin

          休暇か、休暇ではない時の条件分岐を用いたプログラム(Ruby)

          ※Rubyアウトプット用の記事です。 平日ではないまたは、休暇の場合はtrueと出力し、 休暇ではない場合はfalseと条件分岐させるメソッドを作りましょう。 　上記の問題があるときに、if,elseを用いてプログラムを書く場合どのように記述すれば良いでしょうか。 　この問題文は、平日ではない、そして平日であっても休暇であればtrueが出力されると解釈できます。そのため、以下のような記述となります。 def sleep_in(weekday, vacation) if

          kevin

          休暇か、休暇ではない時の条件分岐を用いたプログラム(Ruby)

          kevin

          times文を用いた繰り返し処理(Ruby)

          sum = 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10 　上記のプログラムがあります。しかしこれを繰り返し処理を用いて書き換える場合、どのような記述になるでしょうか。それでは早速プログラムを見ていきます。 sum = 010.times do |i| sum = sum + i + 1endputs sum 上記のプログラムではtimesメソッドを用いています。 数値.times do # 繰り返す処理end 数値の部分にdoからe

          kevin

          times文を用いた繰り返し処理(Ruby)

          kevin

          Dateクラスを用いたプログラム(Ruby)

          本日は華金です。 　以上の出力結果をRubyのDateクラスを使用して表示させたいとします。Dateクラスとはその名の通り日付に関わるクラスです。早速プログラムを見ていきます。 require "date"day = Date.today.wdaydays = ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"]if day == 5 puts "本日は華金です。"else puts "本日は#{days[day]}です。"e

          kevin

          Dateクラスを用いたプログラム(Ruby)

          kevin

          クラスとインスタンスを用いたプログラム(Ruby)

          class Artist def initialize(artist, album, content) @artist = artist @album = album @content = content endend 　上記のコードに追加を行い、以下の出力結果を得たいとする場合、どのようなコードを追加すべきでしょうか。 アーティスト: Radioheadアルバム名: The Bends紹介文: 情緒あふれるギターロック! 記述は以下の通りです。 cl

          kevin

          クラスとインスタンスを用いたプログラム(Ruby)

          kevin

          入れ子構造のハッシュから特定の値を取り出す（Ruby）

          　※この記事は私自身のアウトプットの記事です。プログラミング初学者向けの内容ではございませんのでご注意ください。 入れ子になっているハッシュから特定の値を取り出す 　ある配列の中身に多重階層になっているハッシュとして定義されたハッシュから、特定の値を取り出したいときにRubyによってどのように記述すれば良いでしょうか。 　それでは例として、複数のユーザーの情報をハッシュとして持つ変数user_dataを定義します。 user_data = [{user: {profile

          kevin

          入れ子構造のハッシュから特定の値を取り出す（Ruby）

          kevin

          Railsアプリケーションにおけるアソシエーションについて(Ruby on Rails)

          　※この記事は私自身のアウトプットの記事です。プログラミング解説記事ではございませんのでご了承ください。 アソシエーションとは 　モデルを利用したデータベース内の異なるテーブル（データを表形式で収納する場所）同士を関連付けて情報を紐づけること。アソシエーションをモデルに定義することによりそのモデルに関連付けた他のモデルの情報の取得が可能になる。 　例としてUserモデルに対して、一人のユーザーは複数の情報（Twitterに例えるとツイート）を保持しているので、models/

          kevin

          Railsアプリケーションにおけるアソシエーションについて(Ruby on Rails)

          kevin

          テックキャンプエンジニア転職コースを受講してから約3週間。その感想など

          　初めまして。プログラミング初心者からWebエンジニアとして働くことを目指して日々学習中です。何故ITで働こうとしているのか、Webエンジニアとは何かと言った動機や詳しいことは追々、別の記事で書きます。 　今回noteに初投稿となるこの記事では、現在の某ウイルスの渦中でどのように受講をしているのか、受講の流れや私自身が感じたことを書き記していきます。 テックキャンプとは 　プログラミングスクールにも色々なスクールがありますが、テックキャンプはその中でも最大手です。その中のエ

          kevin

          テックキャンプエンジニア転職コースを受講してから約3週間。その感想など

          kevin