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

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

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>

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

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

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

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

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

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