JavaScript

Nuxt.jsを触ってみた

今日は前から気になっていた、Nuxt.jsを触ってみました!! Nuxt.jsとは vue.jsでアプリを作るためのフレームワークです。 手順 ①npm install -g vue-cli vueのコマンドラインツールをインストールします。 ~ $ npm install -g vue-clinpm WARN deprecated c…

ngコマンドが動く環境構築

某サイトを修正するにあたって、「ng serve」 など、ngコマンドを使う必要があったのですが、環境構築で少し苦戦しました。ngコマンドが何物なのかもよくわかっておりませんでした。 その概要と環境構築の手順を書き留めておきます。 ngコマンドとは Angular…

javascriptで「もし 'cssのclass' が存在すれば」という条件をかく

InfiniteScrollを実装していた箇所で、以下のようなエラー文がコンソールに出てしまっておりました。 おそらくページネーションが無いときにも関数が呼ばれてしまっており、エラーが出ているようだと思い、InfiniteScrollを実装していた関数を呼ぶ部分で、条…

文字列取得してDate型に変換して整形する(javascript)

datepickerの{format: 'yyyy/mm/dd'}オプションを使って、日付の表示を整形している部分があったのですが、検索実行したりリロードしたりすると、'00:00:00 +0900'という余分な部分が表示されてしまっておりました。 直したいと思い、まずtext_fieldに対して…

jsでbinding.pryっぽいデバッグ

検証ツールでjavascriptでもbinding.pryのようなことが出来ると教えてもらい、初めて知りました。 今までチェックしたい値を変数に入れて、console.log()で確認、ということをコマコマしていたのですが、教えてもらった方法の方がお手軽で便利でした。 その…

無限スクロール実装

Infinite Scrollというライブラリを使って無限スクロールを実装しました。 その際のやり方について書き留めておきます。 以下はInfinite Scrollのリンクです! infinite-scroll.com 実装にあたってこちらの記事を参考にさせていただきました。 qiita.com Inf…

yarnでインストールされているライブラリをrequireする際の書き方

すでにyarnでインストールされているjsライブラリを使いたかったのですが、 「jsファイルでrequireしなきゃいけないのだろうけど、どう指定してrequireすればいいんだろう。。。」となりました。 なんとか上手くいったので方法を書いておきます。 実例 アプ…

Chart.jsというグラフを描画してくれるライブラリ

chart.jsというグラフを表示してくれるライブラリを使用したのですが、とっても簡単に実装できました! その手順をメモしておきます。 chart.jsとは グラフを簡単に書くことができる、javascriptのライブラリです。 折れ線グラフ・棒グラフ・円グラフ・レー…

gonというgem

先ほど、Railsの値をjavascriptに渡せるようにしてくれるgemである、gonというものを使用してみました!! Railsの値をjavascriptに渡す方法は他にもあると思いますが、個人的にgonを使ったやり方がとても簡単だったのでいい感じでした!! そのやり方をメモ…

vendor/assets配下のstylesheetsとjavascriptsが認識されない

エラー内容 vendor/asssets/stylesheets配下にcssファイル、vendor/assets/javascripts配下にjsファイルを追加し、 それそれ以下のように読み込ませる指定をしたのですが、読み込んでくれないエラーに遭遇しました。 app/assets/stylesheets/application.css…

算出プロパティ

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

フィルタの引数

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

フィルタの連結

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

v-bind 省略記法

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:…

フィルタ(グローバルフィルタ)

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

フィルタ(ローカルフィルタ)

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

JavaScript式

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ディレクティブを使う場面 ・マスタッシュタグを使用せずに、ディレクティブを使用したいときに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ディレクティブ

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

v-htmlディレクティブ

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

v-preディレクティブ

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

v-onceディレクティブ

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

コンポーネント (Vue.js)

コンポーネントとは ・ページを構成するUI部品のことです。 ・テンプレートとそのロジックから構成されます。 ・よく使う機能をコンポーネント化することで再利用性が高くなったり、コードの見通しがよくなることで、開発効率の改善に繋がります。 構文 Vue.…

v-model 双方向データバインディング

ディレクティブの続きです。 v-model v-modelを要素に追加すると、双方向データバインディングを行うことができます。 双方向データバインディング 双方向データバインディングとは、dataオブジェクトの値を変更すると、テンプレートの値を変更するだけでな…

v-on ディレクティブ

ディレクティブについての続きです。 v-on v-onディレクティブを要素に追加することで、イベント処理を行うことができます。 構文 v-on:イベント名 = "メソッド名" 例 ボタンをクリックしたら現在時刻をページに表示します。 index.html <div id="app"> <button v-on:click="onclick"> Click! </button> <p> {{now}} </p> </div>…

v-for ディレクティブ

ディレクティブについての続きです。 v-for v-forディレクティブを要素に追加すると、オブジェクトの繰り返しを行うことができます。 構文 <要素名 v-for="バリュー in オブジェクト"> {{ 表示したいバリュー }} </要素名> <要素名 v-for="(バリュー, キー) in オブジ…

Vue.jsディレクティブ

ディレクティブとは v-で始まる特別な属性のことです。 その名前の通り、vue.jsに何らかの指令を行う仕組みです。 ディレクティブの例 ・v-bind ・v-if ・v-show ・v-for ・v-on ・v-model v-bind v-bindを要素に追加すると属性のデータバインディングをして…

Vue.js例

a要素を設置して、Vue.js公式サイトへのリンク作成し、 dataオプションにurlプロパティを作成、初期値はhttps://jp.vuejs.org/、 a要素の属性hrefに、v-bindを使ってrulプロパティの値をデータバインディングします。 index.html (body部のみ) <div id="app"> <p> <a v-bind:href="url">Vue.js</a> </p> </div><script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> in…

Vue.js

Vue.jsを試してみているのでそのメモです。 とりあえず今回は"Hello Vue.js"とVue.jsを使って出力させてみます。 準備(ファイル作成) 以下のような構成でファイルを作成します。 vue_sample |--index.html |--index.js |--styles.css HTMLファイルにVue.jsを…

Reactを試してみる!!

エンジニアの先輩のおすすめで、udemyの「React + Redux を使用したモダンフロントエンド開発」を購入しました!! https://www.udemy.com/react-redux-basic/ その先輩は、 「progate ES&6講座 => Reactでカウンターを作る系のQiita記事 =>JS王のReactチュ…