勉強履歴

プログラミング初心者のメモ書きです

なぜこのポートフォリオを作ろうとしているのか

またしばらくの間更新をサボってしまってましたが、 現在もエンジニア転職を目指してポートフォリオを作成している途中です。 作ろうとしているアプリは以下のアプリです。 github.com アカウントのIDを入力して診断ボタンを押すと、 普段のツイートに応じた…

Tailwind Cssの導入方法

久しぶりのブログ投稿になってしまいました。 現在、ポートフォリオを鋭意制作中です。 タイトルにもあるように、ここ数日は Tailwind Cssをポートフォリオで使おうとインストールしてました。 忘備録として残しておきます。 1. yarnでインストールする CDN…

Vue.js学習メモ(検索機能の実装)

Vue.jsを使って、リアルタイムで検索結果を表示する検索フォームを実装することを考えます。 検索フォームに打ち込んだ文字列をタイトルに含むタスクのみが画面上に表示されるようにします。 task/index.vue <template> <label for="search">絞り込み</label> <input id="search" v-model="searchTask" // dataに定義したsearchTaskに入力した文字列を入れ込む type="text" placeholder="タスク名を入力してください" class="form-control" > </template>

Vue.js学習メモ(画像アップロード)

ログイン機能を実装しているタスク管理アプリで、 個々のユーザーがプロフィール画像を登録できるように、画像アップロード機能を実装することを考えます。 RailsのActiveStorageを使って画像登録します。 ①userモデルにプロフィール画像用のカラム(avatar)…

Vue.js学習メモ(バリデーション)

VeeValidateを使って、タスク追加・編集フォームのバリデーションチェックを行っていきます。 フォームに入力されたデータに対して、リアルタイムでエラーを表示させることができるようになります。 ①インストール yarn add vee-validate // もしくは npm in…

Vue.js学習メモ(コンポーネントの分割)

Vue.jsとrailsでタスク管理アプリを作りながら勉強してます。 今回はタスクを3つ(TODO、DOING、DONE)に分けて、 なおかつタスクの一覧(TaskList)とタスク単体(TaskItem)を別のコンポーネントに分割していきたいと思います。 コンポーネント間の関係:index(…

Vue.js学習メモ(子から親への値受け渡し)

昨日の続きです。 モーダルから新しくタスクを追加する場合を考えます。 子コンポーネント(TaskCreateModal.vue)→親コンポーネント(index.vue) 引き渡すデータ:タスクの情報(タイトル/title、詳細/description) 実装例 index.vue <template> <transition name="fade"> </transition></template>

Vue.js学習メモ(親から子への値受け渡し)

Vue.jsの勉強では、タスクを管理するアプリを想定しています。 既にタスクのデータは追加されていて、タスク一覧に表示されているとします。 今回は、タスク一覧からタスクをクリックして、タスク詳細のモーダルを表示する実装を行いたいと思います。 親コン…

今後のブログ更新について

こんな去年の年末から更新してないブログを見ている人はまずいないでしょうが、 改めてブログ書いていこうと思います。 以下、要約 このブログは、私が学んだプログラミング技術について雑にまとめていくものです。 アウトプット力を高めるために書いてます…

建築設計1年目でプログラミングを通して作りたいと思った機能

はじめに この記事は「RUNTEQ Advent Calendar 2020( https://qiita.com/advent-calendar/2020/runteq )」のアドベントカレンダー9日目の記事として書いています。 どうも初めまして。一応ブログは作ってはみましたが、2ヶ月くらい放置していた人間です。建…

2カ月間の勉強でしでかしたミス その1

ブログの更新はこの2カ月全くやってなかった一方で、学習の方は進めていたので、 その中でやってしまったミスを思い出せる範囲で書き残して行きます。 1)@消し忘れ スクールで作成中のアプリで、コメント編集・削除のajax 化を行った後、テストを行った…

Railsチュートリアル 第14章 メモ書き

プログラミングの学習をとりあえず挙げていくと言ったくせに、 すぐに三日坊主になってしまった人です。 プログラミングの学習自体は続けてました。 チュートリアルのメモ書きは13章まで上げていましたが、14章もメモに書くだけ書いて放置していたので、上げ…

Railsチュートリアル 第13章 メモ書き

○マイクロポストの実装 ・Micropostモデルは内容を保存するcontent属性(text型)と、特定のユーザーとマイクロポストを関連付けするuser_id属性(integer)の2つから成る ・$ rails generate model Micropost content:text user:references →AplicationRecordを…

Railsチュートリアル 第12章 メモ書き

○パスワードの再設定 基本的に11章のパスワード有効化と同じ Forget passwordリンク→フォームにメアド →再設定用のリンク付きメールが届く →再設定の確認フォーム ・再設定の手順 1)キーはフォームに入力されたメアド 2)メアドがデータベースにあれば再設定…

Railsチュートリアル 第11章 メモ書き

○アカウントの有効化 新規登録したユーザーが本当にそのメールアドレスの持ち主なのかを確認するための有効化。 1)ユーザーの初期状態はunactivated 2)登録時に有効化トークンとそれに対応する有効化ダイジェストを生成 3)有効化ダイジェストはデータ…

Railsチュートリアル 第10章 メモ書き

○ユーザーの更新・表示・削除 ・新規ユーザーとユーザー編集の区別: POSTリクエストとPATCHリクエストはActive Recordのnew_record論理値 メソッドを使っている。 @user.new_record? → trueではPOST、falseではPATCH ・ユーザー更新失敗時: paramsハッシ…

Railsチュートリアル 第9章 メモ書き

○発展的なログイン(Remember me) 任意でユーザーのログイン情報を記録しておき、ブラウザ再起動後にすぐ ログインできる機能。 →永続cookieを使う ・トークン: コンピュータが作成・管理する秘密情報。パスワードはユーザーが作成・管理する。 セッションの…

Railsチュートリアル 第8章 メモ書き

○基本的なログイン機構 ・ログイン: ブラウザがログイン状態をキープ、ユーザーがブラウザを閉じたら状態を破 棄する仕組み(認証システム:Authentification System) + ログイン済のユーザーだけがアクセスできるページや機能 (認可モデル:Authorizati…

Railsチュートリアル 第7章 メモ書き

○ユーザー登録 ユーザー登録フォーム→ユーザー保存→成功でデータベースに登録 →ブラウザの表示をリダイレクト→登録ユーザーのプロフィールを表示+ウェルカムメッセージ ・ミックスイン: Sassの機能で、CSSルールのグループをパッケージ化することで 複数の…

Railsチュートリアル 第6章 メモ書き

○データベースについて ・モデル: Railsデフォルトのデータ構造。 永続的・長期的にデータを保存する。 データベースにリクエストを行うデフォルトのライブラリはActiveRecord。 データ行で構成されるテーブルを持ち、各列(カラム)はデータ属性(文字列:Strin…

○HTMLとCSS ・レイアウトを作成するのがHTMLだがそのままでは見栄えが悪いため、 CSSクラス(自前やBootstrapなどの公開フレームワーク)を関連づけることで デザインを洗練できる。 ・app/assets/stylesheets/に置かれたスタイルシートはapplication.cssの一…

Railsチュートリアル 第4章 メモ書き

○Rubyについて カスタムヘルパー: ビューで使える新たな組み込み関数(メソッド)のこと。 app/helpers/application_helper.rbにヘルパーとして定義。 Railsコンソール: Railsアプリケーションを対話的に操作するためのコマンドラインツール。 irb(IRB:Int…

Railsチュートリアル 第3章 メモ書き

○静的なHTMLのページ ○自動化テスト テスト: 主に次の3つを目敵として作成する 1)機能停止に陥るような回帰バグを防止 2)コードの安全なリファクタリング(コードの改善) 3)アプリケーションの設計やシステムの他の部分との インターフェイスを決め…

Railsチュートリアル 第2章 メモ書き

最初に 自分がメモにまとめていたものを投稿していきます。 見栄えとか全く気にしてません。 後でもっとわかりやすくしたものに変える可能性もありますが、 とりあえず上げていきます。 本題 ○scaffoldによるコード作成 ○MVCモデル ○REST ○継承 scaffold :大…

初めまして

最初に どうも初めまして。プログラミング初心者の葉染です。 オンラインのプログラミングスクールに通っており、 そろそろ本格的な学習プログラムが始まります。 それに合わせて、何かを勉強するにはアウトプットが大事ということで、 基本的にはスクールの…