Motomichi Works Blog

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

Electronその0001 HelloWorldまでやってみる

参考にさせて頂いたページ electron electron/docs-translations/jp at master · electron/electron · GitHub 【2017年1月版】今からでも遅くない!Electron入門 - Qiita 環境 Windows10 node 6.11.4 npm 5.5.1 electron 1.7.9 プロジェクトのディレクトリを…

webpack-dev-serverのCannot find module addDevServerEntrypointsを解消する

参考にさせて頂いたページ node.js - webpack-dev-server Cannot find module 'webpack' - Stack Overflow webpack-dev-serverを実行してエラー bin/webpack-dev-serverを実行したときに以下のようなエラーが出ました。 Error: Cannot find module '../lib/u…

vagrantその0028 ファイルをゲストマシンからホストマシンに同期する

参考にさせて頂いたページ vagrantでゲストOSからホストOSにファイルを同期する - Qiita 実行する前に注意すること 同期なので、ゲストのファイルで上書きされたり、ホスト側のファイルが削除されたりすることにもなると思うので、実行する前には注意が必要…

Lodash 4.x その0001 個人的index

はじめに 個人的に少しずつ公式ドキュメントを読んで学習を進めます。 公式ドキュメントを読んで解りにくかったり、こういう場合はどうなのかと疑問に思ったものはサンプルを自分で書いてみるかもです。 Array _.chunk(array, [size=1]) 配列をn個ごとに分割…

gitその0001-04 git rebase入門 ブランチを統合する

参考にさせて頂いたページ Git - リベース はじめに 公式ドキュメントからの引用ですが。 Git には、あるブランチの変更を別のブランチに統合するための方法が大きく分けて二つあります。merge と rebase です。 ということで、mergeとrebaseについて少しや…

gitその0001-03 git rebase入門 いくつか前のコミットメッセージを修正する

はじめに いくつか前のcommitメッセージを修正する方法について書いています。 vimの操作方法についてはこのページでは細かくは触れません。 gitのコミットidはご自身の環境として読み替えてください。 git commit –amend についても触れません。 準備 以前…

gitその0001-02 git rebase入門 commitをまとめる

参考にさせて頂いたページ 5. rebase -i でコミットをまとめる【チュートリアル3 コミットを書き換えよう!】 | サルでもわかるGit入門 〜バージョン管理を使いこなそう〜 | どこでもプロジェクト管理バックログ はじめに commitをまとめる方法について書い…

gitその0001-01 git rebase入門 indexと準備

はじめに シリーズみたいな感じで、実際にコマンドを実行してみながらrebaseの学習をしていきます。 rebase入門 index gitその0001-01 git rebase入門 indexと準備 - Motomichi Works Blog gitその0001-02 git rebase入門 commitをまとめる - Motomichi Work…

vagrantその0027 Windows10にvagrant_1.9.7_x86_64.msiでインストールしなおしてvagrant sshまでやってみる

参考にさせて頂いたページ windows10のvagrant環境や使い方メモ - Qiita はじめに 久しぶりにvagrant upしたらエラーが出て起動できませんでしたので、最新版のVirtualBoxとVagrantをインストールすることにしました。 今回の環境(インストーラーなど) 以下…

package.jsonのあるディレクトリパスを指定してnpm installを実行する

参考にさせて頂いたページ node.js - npm - install dependencies for a package in a different folder? - Stack Overflow node.js - How to npm install to a specified directory? - Stack Overflow はじめに CircleCIで自動的に実行されるコマンドで、np…

JSでテストコードを書く その0003-02 package.jsonをリポジトリのrootに配置せずにCircleCI上でユニットテストを実行する

参考にさせて頂いたページ package.jsonをroot以外のディレクトリに置いてnpm installする方法について node.js - npm - install dependencies for a package in a different folder? - Stack Overflow karmaのconfファイルを指定して--single-runする方法に…

JSでテストコードを書く その0003-01 karma+mocha+chaiの組み合わせでCircleCI上でユニットテストを実行する

参考にさせて頂いたページ 全体的なこと Sprockets管理のJavaScriptを強引にユニットテスト | Money Forward Engineers' Blog karmaのこと Karmaを試してみる - Qiita はじめに Railsで生成されるapplication-xxxxxxxx.jsみたいなのをテストしたい目的があり…

JSでテストコードを書く その0002 mochaとchaiでテストを書いてブラウザでテストを実行する

参考にさせて頂いたページ 日本語の参考ページ mochaとchaiの最も基本的な使い方 - 30歳からのプログラミング mocha の checkLeaks と globals の使い方 | それなりブログ mocha公式 Mocha - the fun, simple, flexible JavaScript test framework chai公式 …

vuex2.xその0005 namespaced:trueにしたmodule用のオブジェクト構造をひとつ定義して使いまわす

参考にさせて頂いたページ モジュール · GitBook はじめに namespaced:trueにプロパティ設定したオブジェクトをstore.registerModule()で複数回登録します。 ひとつのmodule用オブジェクト、ひとつのcomponent用オブジェクトを使いまわしできるようにしてみ…

vuex2.xその0004 modulesによるstoreの分割と、mapGetters()でmoduleを跨いだgettersやstateの参照をしやすくする

参考にさせて頂いたページ モジュール · GitBook ゲッター · GitBook はじめに babelは使用せずに、Chromeで動作確認をしています。 参考ページのmapGetters()のサンプルで、オブジェクトのスプレッド演算子(Spread Operator)が使用されていますが、エラー…

CLIP STUDIO PAINT DEBUT その0001 タブレットPCで線の入り抜きができない問題を解消する raytrektab DG-D08IWP

参考にさせて頂いたページ 筆圧感知、入り抜きができません。 | CLIP STUDIO PAINTのみんなに聞いてみよう | CLIP STUDIO 解決したいこと ドスパラで raytrektab DG-D08IWP を購入して、CLIP STUDIO PAINT DEBUT が付属していたので使ってみたら線の入り抜き…

vuex2.xその0003 vuex入門的な感じでToDo管理アプリケーションを作る

参考にさせて頂いたページ Vue.js + vuexによるToDoアプリケーションの実装 : アシアルブログ Vuex 入門 · GitBook はじめに APIにリクエストする非同期な処理を想定して、actionsからcommitしています。 実際にAPIとか作ったらもう少し違う実装が適切かもし…

vuex2.xその0002 mapStateのこと

参考にさせて頂いたページ ステート · GitBook はじめに storeを複数使うような規模のものを書いていないのでmapStateはまだ自分には必要なさそうですが、少し書いてみました。 サンプルソースコード こんな感じかなー。と書いてみました。 <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8"> <title></title> <meta name="description" content=""> </meta></meta></meta></head></html>

vuex2.xその0001 公式ドキュメントにあるカウンターアプリを作ってみる

参考にさせて頂いたページ 公式ドキュメント Vuex 入門 · GitBook ソースコード Edit fiddle - JSFiddle はじめに 色々な事情でwebpackなどを使用できない環境下でスタンドアローンビルドのvuexを使用するような想定で書いています。 サンプルソースコード …

railsその0002 vagrant+rails5の環境でmodelやcontrollerのファイルを編集しても反映されない問題を解決する

参考にさせて頂いたページ vagrantのrsyncのエラーについて VirtualBox - ローカルとvargrentをrsyncしたくvagrantfileを編集したところ、vagrant up中に以下のエラーメッセージが発生しました。何が原因かアドバイスを頂けないでしょうか?(36200)|teratai…

Windows10にmsys2をインストールして使ってみる

参考にさせて頂いたページ ダウンロード http://www.msys2.org/ 環境変数を継承する MSYS2 で PATH が引き継がれない その他 Windows10 に msys2 + pandoc をセットアップ - Qiita Git for Windowsを64bit版にしたらrsyncが使えなくなったのをどうにかしたメ…

JavaScript学習日記 その0005 ブラウザバック時の挙動と対策について考えてみる

参考にさせて頂いたページ ブラウザの戻るボタンで戻ったときに呼ばれるイベントとかキャッシュとかそこらへんのこと - koumiyaの日記 ブラウザバックで元の画面が復元される問題 - Qiita まずa.htmlとb.htmlを作成する a.html a.htmlはbody内に以下のように…

vue.js 2.x その0003-02 トランジション開始前、進行中、完了後、途中キャンセルのタイミングで任意のjs処理を実行する

参考にさせて頂いたページ 公式ページ トランジション効果 - Vue.js 以前書いた記事 vue.js 2.x その0003-01 トランジション効果 簡単なフェードインとフェードアウトをやってみる - Motomichi Works Blog はじめに 以前簡単なトランジションのサンプルを作…

vue.js 2.x その0009 watchで配列(array)や連想配列(object)を監視する

参考にさせて頂いたページ vue.js $watch array of objects - Stack Overflow Vue.js tips - $watch を使ってデータの変更を監視しよう | phiary サンプルコード 連想配列のObjectを丸ごと監視したい場合は、処理はhandler: function(){},の方に記述して、de…

vue.js 2.x その0008 テキストフィールドに数字だけ入力を許可する (郵便番号フィールド)

参考にさせて頂いたページ HTML5におけるinput要素のpattern、type属性のおさらい - Qiita サンプルソース 以下のように書いてみました。 <div id="vue-app"> <h1>Vue.jsのサンプル 静的なページ</h1> <input type="text" v-model="postcode1"> - <input type="text" v-model="postcode2"> </div> <script src="js/vue.js"></script> <script> var vm = new Vue({ el: '…

display:flexの学習 その0001-06 cross axis方向の余白の配分(flexアイテムの配置)を設定する align-content、align-items、align-selfについて

参考にさせて頂いたページ MDN align-content - CSS | MDN align-items - CSS | MDN align-self - CSS | MDN その他の記事 CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス はじめに 今回は、大雑把にいうと、cross axis方向の余白…

display:flexの学習 その0001-05 main axis方向の余白の配分(flexアイテムの配置)を設定する justify-contentについて

参考にさせて頂いたページ MDN justify-content - CSS | MDN その他の記事 CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス はじめに 今回は、大雑把にいうと、main axis方向の余白の配分についてです。 main-start側にflexアイテ…

display:flexの学習 その0001-04 flexアイテムの並び順を個別に指定する orderについて

参考にさせて頂いたページ order - CSS | MDN orderについて flexアイテムに設定するプロパティです。 直感的にわかりやすいので、参考ページから特に補足することもありませんでした。

display:flexの学習 その0001-03 flexアイテムの伸縮比率とベース幅 flex-grow、flex-shrink、flex-basis、flexについて

参考にさせて頂いたページ MDN flex-grow - CSS | MDN flex-shrink - CSS | MDN flex-basis - CSS | MDN flex - CSS | MDN その他の記事 CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス 【CSS】Flexboxのプロパティ(flex-grow、f…

display:flexの学習 その0001-02 並べる方向と改行 flex-direction、flex-wrap、flex-flowについて

参考にさせて頂いたページ MDN flex-direction - CSS | MDN flex-wrap - CSS | MDN flex-flow - CSS | MDN その他の記事 CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス 【CSS】Flexboxのプロパティ(flex-grow、flex-shrink、fle…