寝て起きて寝て

プログラミングが出来ない情報系のブログ

Dockerでプログラミング環境の構築をする

目的 Dockerコンテナ内で各言語の環境を構築し、2分間コーディングが簡単にできるような環境を作成したい。 TL;DR 実際に環境構築したものはこちら 導入言語など(git側は随時更新して行く予定) ベースイメージ:debian-buster(10.0系) C C++ nodejs vue ty…

Vue Styleguidist の導入

Vue Styleguidist コンポーネントのプレビューができるようになるツール ローカルホストで立ち上げられるので、ブラウザ毎でコンポーネントの検証ができる Atomic Designで開発しているならコンポーネントが多くなり管理が大変になるので使おう propsの説明…

Dockerで環境構築してみるその2

今回の目標 前回環境構築を行なったが、 前回の状態だとソースコードを更新してもイメージの再作成を行わないと反映されないので反映されるように設定を行う。 また、起動周りをDocker Compose で行うようにdocker-compose.ymlファイルの作成を行う 今回の目…

Dockerで環境構築してみるその1

今回の目標 DockerFileを作成し、Docker内でVueが動くようにする 次回 docker-compose を使い複数のコンテナを制御できるようにする為記事を分割 今回の目標 環境 vueのプロジェクトを作成 Dockerfile作成 イメージの作成 コンテナ作成 補足 参考記事 環境 M…

Vue環境のフォーマットを設定し開発する

自分用のメモ 何をしたいか 環境 手順 必要なものをインストール VScode 拡張機能 必要なパッケージをインストール typescript を使用するなら 設定 jsconfig.json setting.json .eslintrc.js .prettierrc.js .stylelintrc.js .editorconfig 何をしたいか 人…

カスタムディレクティブ

Vue

カスタムディレクティブとは 使い方 グローバルの場合 ローカルの場合 記載方法 bind inserted update componentUpdated unbind 省略記法 実際に設定する 修飾子も指定できる カスタムディレクティブとは v-ifやv-showなどのディレクティブを自分で作成し使…

仮想DOMメモ

Vue

仮想DOMとは 仮想DOMの経緯 仮想DOMとは DOM要素を模したJavaScriptのオブジェクトのことで 仮想ノード(VirtualNode:VNode)の集合体みたいなものと考えるとわかりやすそう 仮想DOMの経緯 document.createElementなどで直接DOM要素にアクセスして編集を行う…

Fire baseの認証とデータベース機能を使ったアプリケーション制作のメモ

Vue

Fire baseとは セットアップ Vueで使う場合 Firebaseの認証機能(Authentication)の設定 Vue内でログイン機能を実装 ログインユーザーの取得機能 ログアウト機能を実装 ログイン状態による表示の切り替え ログイン状態による遷移の制御 Cloud Firestoreを利…

Vuexメモ

Vue

Vuexとは Action Mutation State Getter 使い方 コンポーネントからストアを呼び出す方法 Actionの呼び出し方-dispatch Actionの呼び出し方-mapActions Getterの呼び出し方-mapGetters Vuexとは 公式 コンポーネント間でデータのやり取りをすると、親子のネ…

Vue Routerのメモ

Vue

Vue Routerとは Vue Routerを追ってみる どこで宣言されているか? ./router/index.jsでは何をやっているか router-viewとrouter-link router-view router-link ※ここに書かれているのはVueの新規プロジェクトの作成から立ち上げまで で作成した後のファイル…

単一ファイルコンポーネントの使い方

単一ファイルコンポーネントとは 単一ファイルコンポーネントの作成 単一コンポーネントの利用 単一ファイルコンポーネントとは ※コンポーネントに関してはここ コンポーネントごとにファイルを分割したもの 適度に分割して書く為、再利用しやすくコンポーネ…

Vueの新規プロジェクトの作成から立ち上げまで

プロジェクトの作成 プロジェクトの作成 下記コマンドを実行 vue create 'プロジェクト名' その後下記画面が出る Vue CLI v3.9.3 ? Please pick a preset: (Use arrow keys) ❯ default (babel, eslint) Manually select features これはデフォルトのプリセッ…

Vueインスタンスのライフサイクルメモ

Vue

ライフサイクルとは 各ライフサイクルフックについて beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed ライフサイクルとは Vueのインスタンスが生成されてから破棄されるまでの流れ ダイアグラムが公式にあるのでこ…

watchメソッドとwatchオプション

Vue

watchメソッド watchオプション どっちも変数の監視を行うものだが、書き方が違うのでメモ watchメソッド 記載するには下記のように扱う。 $watchの引数には二つの関数を設定できる。 第一引数では、監視対象の変数を指定。 第二引数では、監視対象が変更さ…

MacにVue CLI3を導入する

Vue

環境 Node.jsの導入 nodebrewのインストール nodebrew経由でNode.jsをインストール PATH通し Vue CLIのインストール 環境 macOS Catalina 10.15.4 VSCode nodebrew 1.0.1 Node.js 12.16.2 Node.jsの導入 Vue CLI3を入れるためには、最低でもNode.jsのバージ…

コンポーネント

コンポーネントとは ローカルで定義 グローバルで定義 コンポーネントの親子構造について コンポーネント間のデータのやり取り propsオプション $emitメソッド 親コンポーネントから子コンポーネントへデータを渡す 子コンポーネントから親コンポーネントへ…

v-modelのinputタグ+修飾子

inputタグ チェックボックス(単体) チェックボックス(複数) ラジオボタン セレクトボックス(単数選択) セレクトボックス(複数選択) 修飾子 .lazy .trim .number inputタグ チェックボックス(単体) チェックボックスに設定するv-modelの値をブーリアン型にす…

Vueのクラス系バインディング基礎

booleanでの制御 単数 複数 クラスを配列に格納 クラスをオブジェクトで管理 三項演算子を使ったCSS操作 インラインスタイルを使ったバインディング オブジェクトを使ってインラインスタイル booleanでの制御 単数 isLargeがTrueの場合はlageClassを適用する…

算出プロパティと監視プロパティ

算出プロパティ メソッドと算出プロパティとの違い getterとsetter 監視プロパティ(ウォッチャ) 算出プロパティと監視プロパティの違い 基本 deep immediate 算出プロパティVS監視プロパティ 算出プロパティ 算出プロパティとは複雑な処理をかけるメソッド…

Vueのfilterの使い方

ローカルフィルター グローバルフィルター 引数が2つ以上ある場合 1回でフィルターを複数使う場合 Vueのフィルターはインスタンスで宣言するローカルフィルターと、 グローバルで設定し使用できるグローバルフィルターがある。 ローカルフィルター ローカ…

Vueその他のディレクティブ

v-once v-pre v-html v-cloak v-once 要素とコンポーネントを一度だけ描画し、その後は静的コンテンツとして扱われスキップすることができる。 以上のことから更新性能を上げることができる 下記コードではボタン押下後内部のmessageプロパティは変化してい…

VueJS入門メモ

どうやったらVueを使えるのか 基礎知識 データバインディングとは Mustache構文 汎用的なディレクティブ ディレクティブとは v-bind v-if v-show v-for v-forの問題点 解決方法 v-on インラインイベントハンドラ 引数が複数あり、イベントオブジェクトを受け…

VBAメモ書き

VBAでよく使うもののメモ VBAでよく使うもののメモ 基礎処理系 画面描画停止 列の最終行を取得 FunctionとSubの違い(ざっくり) 演算子系 算術演算子 比較演算子 論理演算子 処理構文 ・For文 ・If文 久々に書いたら書き方をもう忘れたのでメモ 基礎処理系 …

ES6のデフォルト引数メモ

ES6では関数にデフォルトで引数をつけることができる ES5 function Wallet(money){ if(!money){ money = 1000; } return money; } Wallet();//1000 function Wallet(money = 1000){ if(!money){ money = 1000; } return money; } Wallet(500);//500 ES6 デフ…

Promiseメモ

Promiseとは ある処理が完了したら呼ばれる関数 Promiseは3つの状態を持っている ・ unresolved(実行待ち) ・ resolved(成功) ・ rejected(失敗) thenで成功時の処理を実行 catchで失敗時の処理を実行する promise = new Promise((resolve,reject)=>{ …

generatorメモ

generatorとは 何回も入ったり出たりできる関数 generator内でyieldを使うたびに一度関数の外へ出て、 再度generator関数を呼ぶと抜けた箇所から処理を始める事のできる関数 宣言の仕方 function* 関数名 or function *関数名 のようにして書く 具体的な使い…

動的プロパティ

動的プロパティとは 動的プロパティとは、でKeyを設定すると、 内の処理が評価された後それがKeyとなる動作のこと 例1: const obj = { [1+2]:'key' } obj//{"3":"key"} 例2: const id = 'column' const obj = { [id]:'コラム' } obj//{"column":"コラム"…

ES6継承メモ

使い方 ・ ES5 function Book(options) { this.title = options.title; this.ReadFlag = false; } Book.prototype.isRead = function () { return this.ReadFlag; } function Takashi(options) { Book.call(this, options);//Bookを継承 this.price = option…

分割代入(Destruicturing)メモ

分割代入とは ・ 参照元がオブジェクトの場合 代入元と代入先のkeyと変数名が”””同じ”””であれば、 {key名} = オブジェクト名で代入することができる 存在しないkeyを指定した場合はからの変数が作られるだけで、エラーにはならない(参照するとundefinedにな…

Rest演算子とSpread演算子メモ

Rest演算子 引数を可変にしたい場合使う 引数に「..."変数名"」と記載すると引数が複数個合った場合 配列として引数に格納される function restTest(...num){ console.log(num); } restTest(1,2,3,4,5,6,7); 出力結果 (7) [1, 2, 3, 4, 5, 6, 7] Spread演算…