寝て起きて寝て

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

Angularでアプリケーションを作るときのメモ

Angularの色々な機能を使う時どんなのだっけなってなるので事前にメモっておく 機能が多いが故に色々なライブラリがあるので基本的には持っているものを使いたい 双方向バインディング クリックイベント DatePipe カスタムパイプ item$ | async as item pipe…

Angular CLIメモ

基本的には helpを見るといい感じ ng help するとわかるが、ng [command name] --help すると そのコマンドの詳細がわかる ng new [プロジェクト名] ng n [プロジェクト名] でも実行できる 実行してみると下記操作が発生する $ ng n test ? Would you like t…

RxJSのSubjectメモ

Subjectとは 通常subscribeしたタイミングでデータは流れていってしまう またobservalだけでは1度しか実行することができない 任意のタイミングでデータを流したい場合に使える機能 これはobservableを継承していて任意のタイミングでデータを流せる特徴を持…

RxJSオペレーターメモ

of 何もせずデータを流す為のもの 受け取り側でsubscribeしているときに使う map 受け取ったデータを加工する時に使う Observable.pipe( map(value => `map: ${value}` ) filter 大体データ検証の目的で使う 下記の場合受け取った文字列が 'test' の場合後ろ…

RxJSの基礎

そもそもRxJSとは リアクティブプログラミングを行うJavaScriptライブラリ これを使ってAngularのリアクティブプログラミングを行う これを実現するために使うのが Observable これによってデータを流すための 川のようなものを作る 流れてくるデータ(ユー…

InterfaceとType

追記 githubに書かれていた すごい端的に書くと拡張する予定があるならinterfaceしないならtypeっぽい ほんへ 最近TypeScriptを真面目に勉強しようと思いTypeScript Deep Dive日本語版の型エイリアス(Type Alias)を読んでいた時のこと こんな感じで書かれて…

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の認証とデータベース機能を使ったアプリケーション制作のメモ

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 デフ…