Motomichi Works Blog

その日学習したことについて書いている日記です。誰かの役に立ったらそれはそれで嬉しいです。

display:flexの学習 その0001-01 ほんとに基礎のこと

参考にさせて頂いたページ flexible box の利用 CSS flexible box の利用 - CSS | MDN flexプロパティについて flex - CSS | MDN 用語について まずは「CSS flexible box の利用 - CSS | MDN」に書いてある用語を理解しておくとよさそうです。 その中でも以…

vue.js 2.x その0007 v-forのindexを使って連番のclassを付与する

参考にさせて頂いたページ vue.js, simple v-for / v-bind to add index to class name - Stack Overflow クラスとスタイルのバインディング - Vue.js サンプルコード 以下のように書いてみました。 <div id="vue-app"> <ul> <li v-for="(item, index) in items" v-bind:class="['hoge-' + index]"> {{item}} </li> </ul> </div> <script src="js/vue.js"></script> <script> …

vue.js 2.x その0006 refで要素を参照する

参考にさせて頂いたページ Vue.js サンプルコード 以下のように書いてみました。 <div id="vue-app"> <button v-on:click="clicked">click here</button> <div> <my-component ref="hogeElm" /> </div> <div ref="fooElm"> foo<br>foo </div> </div> <script src="js/vue.js"></script> <script> new Vue({ el: '#vue-app', data: { }, components: { 'my-com…

vue.js 2.x その0005 lodashのdebounce()とthrottle()で処理の実行を遅らせる

参考にさせて頂いたページ 公式チュートリアルから始めるVue.js vol.1「Markdown エディタ」 - to-R Media Vue 1.x からの移行 - Vue.js Markdown エディタ - Vue.js lodashの_.throttleと_.debounceの使用例 - Qiita はじめに vue.jsの0.xと1.xではdebounce…

vue.js 2.x その0004 アコーディオンを作る(jQueryのslideToggleみたいなものを作る)

サンプルコード(v-forで出力した要素にそれぞれ) v-forで出力した要素それぞれにアコーディオンを入れるイメージで、以下のように書いてみました。 <style> .accordion{} .accordion__trigger{} .accordion__contents-outer-wrap{ transition: max-height 2s; max-h</style>…

vue.js 2.x その0003-01 トランジション効果 簡単なフェードインとフェードアウトをやってみる

参考にさせて頂いたページ transitionについて トランジション効果 - Vue.js 動的コンポーネントについて コンポーネント - Vue.js サンプルコード 以下のような感じで書いてみました。 <style> .hoge-enter-active, .hoge-leave-active { transition: opacity 2s }</style>…

vue.js 2.x その0002 v-forで表示しているリストの並べ替え

参考にさせていただいたページ sortについて JavaScript つい忘れてしまう配列のソート方法 - Qiita v-forについて リストレンダリング - Vue.js ソースコードサンプル すごく適当にデータを用意して、以下のように書いてみました。 <div id="sort-app"> <h1>Vue.jsの練習 静的なペ</h1></div>…

vue.js 2.x その0001 カスタムフィルタ(Custom Filters)を登録する基本サンプル

参考にさせて頂いたページ カスタムフィルタ - vue.js Vue 1.x からの移行 - Vue.js Vue.js 2.xのフィルタについて調べてみた - Qiita ソースコードサンプル1 ソースコードサンプルは以下の通り。 <div id="filter-app"> <input type="text" v-model="message"> <div>{{message | reverse}}</div> </div> <script src="js/vue.js"></script> <script> Vue.filter('reverse',…

railsその0001 vagrantでrails5の環境構築をする

参考にさせて頂いたページ 全体的なインストール手順について Vagrant 1.8 + CentOS 7 + VirtualBox 5 + Ruby on Rails + Mysqlで開発環境構築 - Qiita Vagrant で Ruby on Rails 4 の環境構築 - Qiita はじめに ポイントとしては、手順のなかにある以下のコ…

GoogleAPIその0002 JavaScriptでSearchConsoleAPIからデータを取得する

参考にさせて頂いたページ Google Search Consoleについて サーチコンソール(Google Search Console)の使い方と登録方法教えます APIにリクエストする為のコードについて Sites: list | Search Console API (Webmaster Tools API) | Google Developers 認…

GoogleAPIその0001 JavaScriptでデータを取得するための認証とか基礎

参考にさせて頂いたページ 公式のGoogle People APIサンプル(認証して、Google People APIを使用するサンプル) google-api-javascript-client/authSample.html at master · google/google-api-javascript-client · GitHub はじめてのアナリティクス API: ウ…

React.jsその0006 FluxとReduxも合わせて考えていくので記事を集めて読んでみる

参考にさせて頂いたページ reactjs/redux の GitHub GitHub - reactjs/redux: Predictable state container for JavaScript apps reactjs/react-redux GitHub - reactjs/react-redux: Official React bindings for Redux FluxとReduxについてざっくり概要 結…

JSでテストコードを書く その0001 まずは記事を色々読んでみる

参考にさせて頂いたページ Mocha公式 Mocha - the fun, simple, flexible JavaScript test framework Chai公式 Chai 概要が書かれている日本語のページ 以下の三つと、そこからリンクされているページを読んだら全く知識の無い状態からなんとなくわかってき…

HTMLコーディング規約についてメモ

はじめに どこにあったか忘れたら嫌なのでメモしておきます。 参考リンク HTML Best Practices github.com

npmでeslint-config-airbnbを導入してみる

参考にさせて頂いたページ ESLintでReactとES2015の構文チェック(eslint-config-airbnb) - dackdive's blog ESLintをAtomに導入し、Reactの構文にも対応したAirbnbのJSスタイルガイドを使う | mae's blog これまでのこと 以前「gulp-eslintの.eslintrcを作成…

inline-blockの左右にできる隙間を解消する

参考にさせて頂いたページ display:inline-block;でできた隙間をなくす4つの方法 | webledge inline-blockを並べた場合に発生する「隙間」を消去するCSS » INSPIRE TECH 適切な方法は? 最近はletter-spacingの値に-0.40emを設定して埋めるのが検索上位に出…

Bootstrap3のbreakpointとcontainer幅とgrid内余白を変更する

はじめに breakpointとcontainer幅について復習します。 以下のURLの日本語リファレンスの表を参考にさせて頂きました。 グリッド・システム ≪ CSS ≪ Bootstrap3日本語リファレンス windowサイズが以下それぞれの数値のときに、container幅もそれに対応した…

WebデザインからCSS設計について考える その0005 SMACSSとMindBEMdingを組み合わせてCSS設計をする

はじめに SMACSSとMindBEMdingの良いとこ取りで混ぜます。 これによって長期的なメンテナンスがしやすく、担当者交代やメンバーの増員に強いCSS設計を考えていきます。 SMACSSによるカテゴリ分類を基盤として、接頭辞 + MindBEMdingのクラス命名規則を取り入…

sweet-styleguideで簡単スタイルガイド作成 その0002 sweet-styleguideの編集方法

はじめに 前回の記事「sweet-styleguideで簡単スタイルガイド作成 その0001 準備をする - MOTOMICHI WORKS BLOG」に沿って設定をした場合は、Apacheをstartした状態で、以下のURLにアクセスするとsweet-styleguideのサンプルページが表示されると思います。 …

sweet-styleguideで簡単スタイルガイド作成 その0001 準備をする

技術的なことがわからなくても簡単! sweet-styleguideを使用すると技術的なことがわからなくても簡単にスタイルガイドの作成と運用ができます。 XAMPPのインストール まずXAMPPをインストールします。 今回 xampp-win32-5.6.23-0-VC11-installer.exe をダウ…

WindowsでAtomを使ってみる

参考にさせて頂いたページ 縦線を消す wrap-guide Atomでエディター内の縦線を消す方法 | IDEA*IDEA 設定とかプラグイン、ショートカットキーのこと WindowsでAtomをインストールして使ってみる - Qiita 環境 Windows10 Atom v1.8.0 (2016-07-29現在) ウィン…

webpackを使ってES2015、Vue.jsのビルド環境を構築する

参考にさせて頂いたページ webpackのすごく基本 webpack で始めるイマドキのフロントエンド開発 - Qiita 以前書いたReact.jsの記事 webpackを使ってES2015、React.jsのビルド環境を構築する - MOTOMICHI WORKS BLOG Vue.jsでの記述例について vue.js + webpa…

webpackを使ってES2015、React.jsのビルド環境を構築する

参考にさせて頂いたページ webpackのすごく基本 webpack で始めるイマドキのフロントエンド開発 - Qiita 主に参考にさせて頂いたページ Webpackでイチから作るReact.js開発環境 - Qiita babelとwebpackを使ってES6でreactを動かすまでのチュートリアル - Qii…

さくらのVPSを使う その0015 HeidiSQLでMySQLホストに接続する

vagrantのMySQLホストに接続したときの過去記事 vagrantその0026 HeidiSQLでvagrant内のMySQLホストに接続する - MOTOMICHI WORKS BLOG 記事の為に、仮のユーザー名, パスワード, ポート, IP 例えば「さくらのVPSを使う その0001 申し込みからsshログインに…

vagrantその0026 HeidiSQLでvagrant内のMySQLホストに接続する

参考にさせて頂いたページ 今回のおおよそのこと VirtualBox Vagrant上のMySQLにHeidiSQLで接続する方法 | Lancork Vagrant vccw のMySQLデータベースにHeidiSQLで接続する – セルティスラボ Macでやってたときの記事 vagrantその11 SequelProで仮想環境内の…

gulp-eslintの.eslintrcを作成する

参考にさせて頂いたページ .eslintrcを公開してくださっているページ .eslintrc晒す - Qiita eslint eslint gulp-eslint gulp-eslint babelとか関係なくeslintについて包括的な基礎のこと [GitHub 奮闘記] gulp で eslint 設定とコード チェック環境の共有 -…

gulp+browserify+watchify+babelifyを導入してReact.jsのプロジェクトを作る

参考にさせて頂いたページ 以前作ったgulpのプロジェクト gulp+browserify+watchify+babelifyを導入してプロジェクトを作りなおしてみる - MOTOMICHI WORKS BLOG gulpを使う場合 React.js + Babel + Browserify + gulp の環境を作ってみた - Qiita WebPackを…

Chocolateyその0001 Windows10にChocolateyをインストールして少し使ってみる

参考にさせて頂いたページ Chocolatey - Installation windowsの開発環境は一瞬で整うwith chocolatey - Qiita Chocolateyを使った環境構築の時のメモ - Qiita Windowsソフトを管理!パッケージ管理システムChocolateyでインストール、アップデートを簡単に…

vagrantその0025 Windows10でvagrantを使う

参考にさせて頂いたページ Windows10にVirtualBoxとVagrantでCentOSの仮想環境を作ってみた / ユービックログ VagrantでBox追加時にエラーが出た時の話 - Naba Blog 今回の環境(使用したインストーラー) Windows10 vagrant_1.8.4.msi VirtualBox-5.0.24-1083…

WebデザインからCSS設計について考える その0004 BEMについて少し考えてみる

参考にさせて頂いたページ Naming convention / Methodology / BEM [CSS]BEMの方法論とMindBEMdingという記法 - Qiita 命名規則について MindBEMdingについて おそらく下記のような記法がBEMとして広く認知されていると思います。 block-name__element-name-…