ぽの

ぽの

【アウトプット㊾】-Vue- v-modelを使用してフォームと値を接続する

■テキストフィールドにvue.jsから数字を表示する ▼HTML <div id="app"> 　//v-bindは省略可能 <input type="number" v-bind:value="number">=1</div> ▼vue.js let app = new Vue({ el: "#app", data:{ number:999 }}); ▼表示結果 ■テキストフィールドに入力した数字を取り出す ▼HT

ぽの

    • 【アウトプット㊽】-Vue- トランジションアニメーション

      Vue.js はデフォルトでトランジションという機能を提供していて、それを利用することでアニメーションを実装することができる。 ■フェードインで文字を表示してみる ▼HTML <div id="app"> <transition appear> <div v-html="message"></div> </transition> </div> <div v-html="message"></div>に対して<transiti

      ぽの

      • 【アウトプット㊼】-Vue- v-bind:classの使い方

        文字を赤くする ▼HTML <div id="app"> <p :class="error_class">こんにちは</p></div> ※値にマスタッシュ構文は使えない NG 　<p :class="{{error_class}}">こんにちは</p> ▼CSS .error { color: red;} ▼vue.js let app = new Vue({ el: "#app", data: { error_class: "e

        ぽの

        • 【アウトプット㊻】-Vue- Vue.jsとは

          Vue.jsとは ユーザーインターフェイスを構築するためのプログレッシブフレームワーク。 Vue.jsを使用するメリット ◎他のプログラミング言語と比べて学習コストが低い ◎MMVVMモデル型のため、レスポンスが早い ◎DOMを操作するコード量を減らすことができるため、開発スピードが早くなる Vue.jsを読み込む方法 ◎CDNで読み込む https://jp.vuejs.org/v2/guide/installation.html ▼HTML <body><scri

          ぽの

        • 【アウトプット㊾】-Vue- v-modelを使用してフォームと値を接続する

          ぽの

        • 【アウトプット㊽】-Vue- トランジションアニメーション

          ぽの

        • 【アウトプット㊼】-Vue- v-bind:classの使い方

          ぽの

        • 【アウトプット㊻】-Vue- Vue.jsとは

          ぽの

          【アウトプット㊺】-Sass- ミックスインの引数に初期値を定義する

          毎回値を定義するのは手間がかかるので、頻繁に使う値を引数の初期値として定義しておくと、初期値を変えたいときだけ値を書けば済むようになる。 ▼SASS //引数を使ったミックスインを定義する＠mixin box ($value: 3px) { padding: $value; background: #999; color: white;}//定義したミックスインを呼び出す.note { @include box;}.noteA { @include b

          ぽの

          【アウトプット㊺】-Sass- ミックスインの引数に初期値を定義する

          ぽの

          【アウトプット㊹】-Sass- ミックスインの基本

          スタイルの集まりを定義しておき、それを他の場所で呼び出して使うことができる。引数を指定することで、定義したミックスインの値を一部変更することもできる。 ▼SASS //ミックスインを定義する＠mixin box { padding: 15px; background: #999; color: white;}//定義したミックスインを呼び出す.note { @include box;} ▼CSS .note { padding: 15px

          ぽの

          【アウトプット㊹】-Sass- ミックスインの基本

          ぽの

          【アウトプット㊸】-Sass- スタイルの継承

          エクステンドという機能で指定したセレクタのスタイルを継承することができる。 エクステンドは一度使ったスタイルを継承して使いまわすことができるので、継承する数が増えれば増えるほど記述量を減らすことができ、同じスタイルを何度も書く必要がなくなる！ ▼SASS .box { margin: 0 0 30px; padding: 15px; border: 1px solid #ccc;}//boxで使ったスタイルを継承する .item { @ext

          ぽの

          【アウトプット㊸】-Sass- スタイルの継承

          ぽの

          【アウトプット㊷】-Sass- 変数の基本

          変数とはあらかじめ好きな名前を決めて値を定義しておくことで、任意の場所で変数名を参照して、値を呼び出すことができる。 例えば同じ色を複数の場所で指定することが多いが、色が覚えにくいと毎回コピーしてくる必要があるので手間がかかる。。デザインデータ側も同じ色のはずがケアレスミスなどで微妙に色がずれている場合もあるので、似たような違う色が増えてしまう可能性もある。。このような問題も変数を使えば好きな場所で参照することができる！ //色を宣言$red: #cf2d3a;.notes

          ぽの

          【アウトプット㊷】-Sass- 変数の基本

          ぽの

          【アウトプット㊶】-Sass- ネストの基本

          ネストとは。。ネストとは断層で組み合わせていく構文のこと（入れ子構造） ネストはSassの中でも一番よく使う機能で、CSSをHTMLの構造に合わせて入れ子で書いていくことができます。 ネストの基本▼HTML<div id="main"> <section> <h1>見出し</h1> <p>段落</p> <p class="notes">注意書き</p> <ul> <li>リスト</li> <

          ぽの

          【アウトプット㊶】-Sass- ネストの基本

          ぽの

          【アウトプット㊵】-Sass- Gulpを使ってSassをコンパイルする方法

          前回の記事でKoalaでコンパイルするまでの流れをまとめていたのですが、チーム開発などはGulpの方がよく使われるということで、方向転換してGulpでコンパイルする方法をまとめようかと思います。 ①Node.jsをインストールする →公式サイトからダウンロードする ②コマンドラインを起動する ③package.jsonファイルの作成 →プロジェクトフォルダーを任意の場所に作成し、コマンドラインでその場所に移動する。※あらかじめ「myproject」というフォルダーを用意

          ぽの

          【アウトプット㊵】-Sass- Gulpを使ってSassをコンパイルする方法

          ぽの

          【アウトプット㊴】-Sass- Sassってなに？

          Sassとは。。。 「CSSを拡張したメタ言語」 もっと具体的にいうと、CSSに対して機能を拡張した言語のこと（え、めっちゃすごい） Sassを使用するメリット ①入れ子（ネスト）できる ②変数が使える ③演算できる ④メンテナンス性を高められる ネストやミックスイン機能によりコードの記述量が減らせる＆作業効率が向上する！ Sassの導入方法 ①Rubyをインストールする ちなみにMacユーザーは標準で搭載されているらしい、、ずるい インストールはこちらのURL→h

          ぽの

          【アウトプット㊴】-Sass- Sassってなに？

          ぽの

          【アウトプット㊳】-jQuery- スティッキーヘッダーの実装

          スティッキーヘッダーとは。。。ヘッダやナビゲーション、サイドバーなど指定した要素をスクロールした際にぴたっと指定した位置に張り付けることができる。 下のコードでは画面のスクロール位置がfvを超えたらヘッダーが上部に固定される HTML<header class="header"> <div class="header-inner"> <nav class="header-nav"> <ul class="nav-list"> <li

          ぽの

          【アウトプット㊳】-jQuery- スティッキーヘッダーの実装

          ぽの

          【アウトプット㊲】-React- ローカル環境では表示されるのに本番環境だと画面が真っ白になる時の対処法

          ローカル環境ではきちんと画面に反映されていたのにbuildをしても本番環境が真っ白のまま。。 ナンデ。。ナンデ。。 解消するために試したこと①ファイル内のコメント部分「//～」をすべて削除 return 内にコメントがあると本番環境でうまく反映されないという記事を読んで実行してみた 結果：変わらず（泣） ②package.jsonに“homepage”: “./”,を追加する 結果：表示された！ 原因src="/static/js/main.8b6be9eb.ch

          ぽの

          【アウトプット㊲】-React- ローカル環境では表示されるのに本番環境だと画面が真っ白になる時の対処法

          ぽの

          【アウトプット㊱】-React- Cloud FunctionsでAPIを作ってFirestoreを利用する

          REST APIを作る 1.dataset.jsをjsonファイルに変える 2.Cloud Functionsでhttps関数の作成 importimport * as functions from 'firebase-functions'; import * as admin from "firebase-admin"; admin.initializeApp(); const db = admin.firestore();https.onRequestメソッドで関数作成

          ぽの

          【アウトプット㊱】-React- Cloud FunctionsでAPIを作ってFirestoreを利用する

          ぽの

          【アウトプット㉟】-React- ライフサイクルの活用

          とらハックさんのYouTubeを参考にチャットボットアプリの作成を始めたので、こちらのアウトプットはそちら動画で学習した内容となります。 自動スクロール機能チャットが更新されたときに、スクロールが自動で下まで移動する使用を実装する。 App.jsx//最新のチャットが見えるよに、スクロール位置の頂点をスクロール領域の最下部に設定するcomponentDidUpdate(prevProps, prevState, snapshot) { const scrollAre

          ぽの

          【アウトプット㉟】-React- ライフサイクルの活用

          ぽの

          【アウトプット㉞】-React- Material-UIのスタイルをカスタマイズする

          とらハックさんのYouTubeを参考にチャットボットアプリの作成を始めたので、こちらのアウトプットはそちら動画で学習した内容となります。 1.Hook APIMaterial-UIのサンプルコードと同じ 2.Style components APIコンポーネントのシンタックスに直接スタイルを適用 →コンポーネントとスタイルを紐づける 3.Hight-order component APIスタイルを当てたコンポーネントを返すコンポーネント Hook APIの使い方 np

          ぽの

          【アウトプット㉞】-React- Material-UIのスタイルをカスタマイズする

          ぽの