開発日記 Vue編 ~v-for VueRouter~

vue

v-forとprop v-forのデータをpropするときは:○○にしなければいけない :がつくと変数で、つかない場合は文字列の認識になる。 <v-row v-for="p in placeholders" :key="p" :justify="justify"> <fieldInput :placeholder="p"></fieldInput> </v-row> VueRouterを複数ファイル VueRouter を複数ファイルで扱う場合は ...名前で書く import { RouteConfig } from "vue-router"; im…

英語長文 -第3章-

第7題(19/10/23) regardless of にも関わらず deprive を奪う come down with A A(病気)にかかる afford する余裕がある acre エーカー(面積の単位) proceed to do 次に..し始める life-saving 命を救う outrageous 著しく常軌を逸した、非道の anti-AIDS dr…

英語長文 -第2章-

第4題(19/10/16) signal 信号 help (to) do ~するのに役立つ openness 隠し立てないこと personal space 個人空間 while S V SがVする一方で replace A with B AをBと取り替える inter-office phone communication 社内電話 see O as C OをCとみなす medium …

英語長文 -第1記録- ~やっておきたい英語長文500~

英語長文 前回までに英文法を行ったので、 これからは英語長文を行った記録を残していきたいと思います。 やっていくのは「やっておきたい英語長文500」です。 1日1題を目安に行っていきたいと思っています。(時間の許す限りで) 第1題 (19/10/9) 分からな…

経営学 企業編 -第2章- ~M&A~

企業同士の協力 業務提携 複数の会社が協力して商品を作ったり、サービスを提供したりなどすることを業務提携という。 業務提携の種類には生産提携,販売提携,技術提携,資本提携などがある。 コーペティション経営 複数のお店が一つのエリアに出店するなどし…

経営学 企業編 -第1章- ~企業とは?~

株式会社 株式会社とは 企業が資金を調達するために 株式という証明書を発行し、買ってもらう。 そして株式の購入者を株主といい、株式の価値が上がったり、利益の配分を受ける配当を受けることができる。 また、株式を購入しても出資金額以上の責任は負わな…

Vue Vuetify編 -初学- ~デザインは価値!~

Vue

Vuetifyとは Vue.js用、マテリアルデザインのフレームワーク! まずマテリアルデザインとは シンプルなデザインでディスプレイサイズに合わせて最適化しやすくしよう というGoogleが発表したデザインガイドライン。(2014年) Vuetify使い方 <template> <v-app> <v-content> <v-container fluid> <v-layout wrap> <v-flex xs12 sm5></v-flex> <v-flex xs12 sm5></v-flex> </v-layout> </v-container> </v-content> </v-app> …</template>

Vue フォルダ構成編 -AtomicDesign- ~後々楽になる~

Vue

AtomicDesign 今回はAtomicDesignの考えのもと、フォルダ構成していきたいと思います。 AtomicDesignとは 一言で言うと5段階に区切って定義するUIデザイン手法。 5段階とは、Atoms(原子),Molecules(分子),Organisms(有機体),Templates(テンプレート),Pages(…

Vue TypeScript 新環境構築編 ~現時点の最新~

Vue

前提 Node.jsのインストールでnpmコマンドが使えること。 vue/cliより@vue/cliの方が新しいみたいなのでこちらも載せます。 インストール @vue/cliをインストール npm install --global @vue/cli プロジェクト作成 vue create [project naeme] その後にいく…

django configフォルダ構成編 ~最高のフォルダ~

config プロジェクト作成前 プロジェクト作成まであれば以下でできます。 django-admin startproject config . プロジェクト作成後 djangoでdjango-admin start projectをする際に プロジェクトフォルダの直下に配置されてしまうため それをconfigファイルで…

django postgresql編 ~sqliteからの変更~

前提 sqliteは色々と問題があるので postgresqlに変更したいと思います。 前提としてはpostgresqlをインストールしていること。 psqlコマンドを使えるようにしてください。 方法 pip install psycopg2-binary databaseの設定を変更します。 setting.pyの変更…

django 環境構築編 ~流行りのPython!~

前提 Pythonをインストールされていてコマンドが使える。 仮想環境 仮想環境とはパッケージの導入状態をプロジェクトごとに独立させます。 venvによる仮想環境。 1.まずフォルダを作成してください。 2.その後ターミナル or コマンドプロンプトを使用します…

Vue TypeScript 環境構築編 ~準備が大事!~

Vue

前提 プロジェクトが作成してあることが前提。 プロジェクト作成時にes-lintをNoにしてください。 vue init webpack プロジェクト名 実行 必要なものをインストール npm i -D typescript webpack webpack-cli ts-loader@3.5.0 css-loader vue vue-loader vue…

github 基礎編 ~必ず通る道~

git

始め方 まずgitがインストールされていること。 githubにsshの設定をしていること。 初期化 git init インデックスに反映 git add . コミット git commit -m 'first commit' プッシュ git push origin master 別のブランチを作成移動 git checkout -b 〇〇 …

TypeScript 型推論編 ~JavaScriptらしさ~

型推論 変数には型を必ず付与する必要はない。 宣言時に代入された値から、型の推論ができる。 const/letの型推論 letの型推論 let test = 'aiu' //推論 let test: string constの型推論 const test: 'aiu' //推論 const test: 'aiu' Widening Literal Types…

TypeScript 基礎編 -後編- ~クラスから列挙まで~

キーワード typeof typeofを使用して、宣言済みの変数の型を取得できる。 let asString: string = '' let test: typeof asString test = 'aiueo' //OK test = 0 //NG keyof keyofでLiteral Unionなどのオブジェクトのプロパティ名称を取得できる。 typeofと…

TypeScript 基礎編 -前編- ~JavaScriptの発展~

NaN NaN(Not-a-Number)はJavaScriptでいう「非数」(数字ではない値のこと)。 const val = '100' const val = val + 200 以上のような型が違う場合でもJavaScriptが内部で数値として変換してしまっていた。 このように型の不整合やバグを防ぐために登場TypeSc…

TypeScript 入門編 ~より高度に~

TypeScriptとは JavaScriptの進化版! Microsoftによって開発され、コンパイルするとJavaScriptに変換される。 インストール 事前にNode.jsのインストールが必要。 npm install -g typescript typescriptをインストールするとtscコマンド使える。 tsc --init …

Vue VueRouter編 -最終章- ~ありがとうVue.js~

Vue

ナビゲーションガード 遷移を操作するためのフックのこと。 遷移を中断させたりタイミングを操作する。 ナビゲーションガードの引数 next()関数が重要。 遷移をさせない時にはnext(false)にする。 複数のフックを併用できるが、それぞれのフックで解決した後…

Vue SPA VueRouter編 -第1章- ~最高の品質を!~

Vue

SPA SPA(Single-page Application)は一つのウェブページを使用して内容のみを変えて 画面遷移させるアプリケーション設計のこと。 Vue Routerインストール npm install vue-router src/router.js import Vue from 'vue' import VueRouter from 'vue-router' …

Vue SPA Vuex編 -第2章- ~Vuexの完全理解!~

Vue

ストアの分割 ストアはモジュール化し、分割することで管理しやすくする。 モジュールの使い方 オブジェクトで定義したモジュールを、ストアのmodulesオプションに登録する。 モジュール定義 const moduleA = { } const moduleB = { } ストアに登録 const st…

Vue SPA Vuex編 -第1章- ~VuexはDB!~

Vue

Vuex 状態管理の拡張ライブラリで、データとその状態に関する全てを一元管理する。 特徴 Vuexによって管理されているデータはリアクティブになっているため、 構造状態に関わらず常に同期されている。 またデータの管理や、状態を管理できるモジュール機能な…

Vue SPA 基礎編 ~フロントエンドへの一歩~

Vue

Vue CLI 環境構築編でも触れましたが、 Vue CLIとは開発支援のためのコマンドラインインターフェース。 アプリケーションのビルドなどの支援をする。 またwebpackに必要なファイルを自動的に作成もする。 webpack こちらも環境構築編で触れましたが、 複数の…

経営学 基礎編 ~社会で生き残る!~

経営とは 「人・物・金・情報」の4つを組み合わせて、顧客にサービスを提供する。 また株式会社では株主から資金を得て経営し、売り上げを一部を株主に配当金として渡す。 そのお金でさらに企業の株を買い、企業に投資する。 経営学と経済学の違い 1.経営学…

英語 挿入構文と重要表現編 ~文法は任せろ!~

挿入構文 挿入SV [S , S V , V X]のようなカンマで挟まれた挿入節は主節に相当するため S , S V , V X->S V [ that S V X ]と考える。 挿入 if ~ 挿入のif節はbe動詞や一般動詞を含むSVが省略されやすい。 if at all~ (~だとしても)やif not ~ (~でないにし…

Vue コンポーネントクライマックス編 -第3章- ~Vueマスター!~

Vue

スロット スロットは親から子コンポーネントにテンプレートの一部を差し込む機能で コンテンツやテンプレートの一部をカスタマイズする際に使用する。 デフォルトスロット HTML <parent>埋め込みたいもの</parent> HTML <div class="child"> <slot>埋め込まれる場所</slot> ->このまま実装すると[埋め込みたい</div>…

Vue コンポーネント親子関係編 -第2章- ~関係を制覇しろ!~

Vue

親子関係(親子コンポーネント) テンプレートで他のコンポーネントを使用すると親子関係になる。 propsとカスタムイベントを使用する。 親コンポーネント→子コンポーネント データバインディングで親のデータを子コンポーネントが使用できる。 props downとい…

Vue コンポーネント基礎編 -第1章- ~コンポーネントは核である!~

Vue

コンポーネント テンプレート(html)とJavaScriptをセットにして、 機能ごとに分割して管理できるようにする仕組み。 例:headerのセット,mainのセットとして最終的に組み合わせる。 コンポーネントの定義 Vue.componentメソッドでグローバルに登録しすべての…

英語 否定と倒置編 ~新しいことへの否定を乗り切れ!~

否定 no 比較級でも少し触れたがno=反意語が 過言ではないほど強い否定をする。 否定語+100%は部分否定 notなどの否定語が all(すべて),quite(まったく)などと一緒に使用される場合、 部分否定で[すべて~とは限らない]となる。 注意 very(100%ではない) [あ…

Vue 算出プロパティとトランジション編 ~自由なデザインを!~

Vue

算出プロパティ 算出プロパティとは処理を含めることができるデータのこと。 ゲッター(取得) セッター(代入) 算出プロパティへの代入を行う場合エラーになる。 しかし、getで値を取得し、setでプロパティに代入することで対応できる。 キャッシュ機能 算出プ…