算出プロパティcomputedとは 算出プロパティは、関数によって算出したデータを返すことができるプロパティです。 基本の使い方 computedを使うと、マスタッシュ構文の中でメソッドを続けて書いた時と同じように、 messageの文字列を反転させて表示することが…

フィルタでは引数を利用することができます。 構文 オブレクトが第１引数になります。 html側 {{ オブジェクト | フィルタ名( 第２引数, 第３引数)}} js側 Vue.filter('フィルタ名' function( 第1引数, 第2引数, 第3引数 ){ //処理}) 例 index.html <div id="app"> <p> {{text</p></div>…

フィルタは１つだけでなく、複数連結させて使うことができます。 構文 {{ オブジェクト | フィルタ１ | フィルタ２ }} 例 １つめのフィルタで日本円→USドルへ変換、２つ目のフィルタでカンマ区切りにするフィルタを定義し、連結させて表示させてみます。 ind…

v-bindディレクティブは頻繁に使用するため、省略記法が用意されています。 「v-bind」の部分は省略して、「:」だけでも書くことができます。 構文 通常の書き方 <a v-bind:href="url">Link</a> 省略記法 <a :href="url">Link</a> 例 index.html <div id="app"> <p> <a v-bind:href='url'>Link</a> </p> <p> <a :href='url'>省略記法Linl</a> </p></div> index.js var app = new Vue({ el:…

今日はsettingslogicのコードリーディングに混ぜていただきました！！ github.com こちらの記事も参考にさせていただきました。 qiita.com blog.freedom-man.com キモとなるコードはsettingslogic.rbというファイル１ページだけなものの、メタプロが結構出て…

グローバルフィルタ構文 Vueインスタンスを定義する前に、以下のようにVue.filterにフィルタを定義することで、全てのコンポーネントからフィルタを使用できるようになります。 Vue.filter(filterName, function(value){ //処理 }) new Vue({ //省略 }) 全て…

フィルタとは フィルタとは、フォーマットを整えるなどテキストの変換処理に特化した機能です。 Vue.jsでは、式の終わりに任意のフィルタを追加することができます。 ローカルフィルタ構文 基本的には以下のような構文になります。 htmlファイル側 {{ 式 | f…

昨日Tamarbのチェリー本輪読会で、例外処理について学んだので、忘れないうちに改めてまとめてみることにします！ 例外処理とは 例外処理とは、プログラム実行中にエラー(例外)が発生した際、どのように対処するかという処理です。 この処理を書いておくこと…

Vue.jsでは、データバインディング内部でJavaScript式を利用することができます。 使えるのは単一の式のみです。 以下のように、式でないものや、単一でないものは使えません。 {{ var x = 1 }} {{ if(ok) return message }} 例 index.html <div id="app"> <p> {{message}} </p> <p> </p></div>…

v-textディレクティブを使う場面 ・マスタッシュタグを使用せずに、ディレクティブを使用したいときにv-textディレクティブを使用します。 例(上のpタグはマスタッシュタグ、下がv-textで表示) index.html <div id="app"> <p> {{message}} </p> <p v-text="message"> </p> </div> index.js var app = new Vue({ e…

v-cloakディレクティブを使用する場面 ・ページを表示開始してから、Vueインスタンスの作成が終わるまでの間に、マスタッシュタグなどのコンパイル前のテンプレートが表示されてしまうのを防ぎたいときに使用します。 例(v-cloakを使用したチラつき防止) イ…

v-htmlディレクティブを使用する場面 ・プレーンなHTMLを挿入したいとき使用します。 →指定した要素のinnerHTMLを更新できます。 例(v-html使わない・v-html使用の比較) 上のpタグはv-htmlディレクティブを使用せず普通にマスタッシュ構文でdata属性のmessag…

v-preディレクティブを使用する場面 ・要素と全ての子要素のコンパイルをスキップしたいときに使用します。 →生のマスタッシュ構文を表示させたいとき。 →XSS対策 →ディレクティブの無い大量のノードをスキップすることで、コンパイルのスピードをあげたいと…

v-coneディレクティブを使用する場面 ・初回だけテンプレートを評価し、それ以降は静的なコンテンツとして扱いたいときに使います。 例(v-once使わない) マスタッシュ構文で表示させているHello Vue.js!! という文字を、Click!! ボタンを押したら文字が反転…

コミュニティ開発しているプロジェクトで、githubログインを実装してくださったプルリクを確認しようと思い、ローカルにプルリクの内容を持ってきて確認しようとしました。 そしたらpostgresqlでデータベースが作成できないエラーにぶつかりました。。。 そ…

プルリクエストが出ている内容をローカルに持ってきて試したかったので、その方法を調べました！ ①プルリク内容をfetchする git fetch origin pull/プルリクID/head:ブランチ名 上記のコマンドを実行し、プルリクの内容をローカルに持ってきます。 gyazo.com…

複数人で開発する際bundle install する時には、--path vendor/bundle オプションを付けてあげる必要があるのですね。。。！！ コミュニティ開発しているプロジェクトで、自分がgemを追加し、なにもオプション付けづにbunle installをしてしまいましたw なの…

本日、githubでforkしたリポジトリの、本家の最新の取り込み方がよく分からなくてもたつきました。。。 なのでやり方を調べました。 ①リモートリポジトリに本家のリポジトリの紐付けをします 以下のコマンドを実行して、本家のリポジトリとの紐付けをします…

以前OSをアップデートした時にも出現した、mysqlが入らないエラーが再度出現しました。 以下はエラー文です。 ~/p/r/banken_admin_blog (master|✚1…) [1] $ bundle install Your Gemfile lists the gem kaminari (>= 0) more than once. You should probably…

JSON viewというJSONを見やすく表示してくれるChromeの拡張機能がとてもお手軽で便利でした！！ 以下がそのリンクです！！ chrome.google.com 拡張機能を追加するだけで、以下のようなJSON形式のデータが、 gyazo.com このように見やすく整えられて表示され…

Rubyのコミュニティでも以前Javaやっていたという人が結構多くいらっしゃいます。 Javaを嫌いだという人も、カッチリしていて良いという人もいます。 Java経験者同士のあるある話で楽しそうに話が盛り上がることも多く、自分も会話について行きたい！！と思…

fish を入れていただき、rals sをしようとしたら、 "Rails is not currently installed on this system." と言われてしまいました。。。 bash に切り替えればいつも通りrails s できるのですが、fish だとできません。 gyazo.com なんで？！と思ってとりあえ…

Vue.jsの勉強でTODOアプリを作りました。 hayashiyoshino.github.io 機能としては、以下のような非常にシンプルなものです。 ・入力されたものがリスト表示されます。 ・実行したものにチェックを入れるとリストに打ち消し線が入ります。 ・削除ボタンを押す…

shellについて勘違いをしたままTwitterで発言をしてしまい、何人かの方々に気を遣わせてしまいましたw 最低限の知識は入れておかなくてはと思い、調べたメモです。 Shellとは Shellは、コマンドをOSに伝える役割を持ったものです。 OSの内部を守る殻のような…

本日Asakusarbにて、自分のPCを他の人に操作してもらう機会がありました。 すると、自分では普通だと思い気に留めずいたことを指摘して頂き、以下の気づきがありました！！ ①Dockを通常時は非表示にすると画面が広く使えます。 ②bashだけでなくもっといろん…

リーダブルコードを読みました！！ 一通り読み終わったので、内容を自分なりにまとめてみようと思います！！ www.oreilly.co.jp 1. 理解しやすいコード ・優れたコードは理解しやすいコードです。 ・コードは理解しやすく書くことを優先します。 ・コードは…

エンジニアの方々は音楽好き・筋トレ好きが多い印象です。(偏見かもしれません) 自分は全く音楽に詳しくないし、話題についていけるよう学ばなくては！！と思ってもなかなか興味が湧きません。 色んな音楽詳しいのはカッコいいし、自分も話題についていきた…

明日はカルパスさんの鎌倉のお家にてTamarbの方々とコードリーディングを行う予定なので、少しでも話についていけるように予習しておこうと思います。 まだ確定ではないのですが、bankenというgemと、railsのソースコードを読むことになりそうです！ 以下が…

コミュニティ開発しているVimateというSNSのモックアップを自分が作ることになりました！ 以下のリンクが作成途中のモックアップです。 hayashiyoshino.github.io プロトタイプ、モックアップ、ワイヤーフレームといった概念についてまで今ひとつ分かってい…

本日はTamarbの「オブジェクト指向実践ガイド 第６章〜継承によって振る舞いを変える〜」 の輪読会がありました！ この本は自分には難しく、説明文の中にJavaの概念も所々出てきたりし、自分で読んだだけでは理解ができておりませんでした。 しかし皆様の具…