フレームワーク
-
Reactにスタイルを当てる|React
当てる方法はいくつかある。 従来のHTML+CSS形式 classを設定してスタイルを適用する。 ただしclassが予約語のため使用できない。JSX中ではclassをclassNameと記述すればclassとして適用され […] -
React学習|StateとProps|React
State React.Componentで状態データを保持する変数。オブジェクトとして様々な値を持たせることができる。 setState()というメソッドを用いてプロパティを変更すると、その変更を検知して再レンダリング […] -
React学習|コンポーネント|React
ソースの一部を切り出してコンポーネント化することができる。 切り出し前ファイル 例として以下のソースからLayoutクラスを切り出して別ファイルにする。 コンポーネント用のファイルを作成。 コマンドで書いたけど普通にFi […] -
React学習|JSX|React
JSX ReactではhtmlをJSXでjs内に記述する。 複数のタグを最上位に記述することはできない。以下の記述はエラーとなる。 以下のようにラップするタグがあって、それが一つであればOK 変数、数式、関数などを{}で […] -
React学習|環境の下準備|React
下記ページを参考にまずはチュートリアル ほとんど参考サイトそのままになるが、記録のためにターミナルから入力した操作を転記。 下準備 フォルダ作成 react-turotrialというフォルダを作成し、その中にsrc/js […] -
vue-slickにyoutube|Vue
vue-slickにスライドの一つとしてyoutubeを埋め込む方法 動いたソースの必要箇所抜粋 実際に使用しているソースからの抜粋。 保存された画像一覧からデータを読み出してslickで展開する処理の一番うしろにyou […] -
Nuxt.js|スクレイピング
instagramの情報をスクレイピングして自動で整理できないかと目論んで、調べてみた。 結果としてinstagramのウェブページからはスクレイピングはできなかったが、スクレイピングの手法だけでもメモとして残す。 Nu […] -
Nuxt.js|LightBox
Nuxt.jsでLightBoxを実装 vue-image-lightboxを使用。 インストール plugins /pluginsフォルダ下にインポート用のjsファイルを作成する。 なおこの時点でvue-image-l […] -
Nuxt.js|画像の動的参照
画像はassetsとstaticに置くことができる。 assetsにおいた画像はwebpackに含められてbuildされるので、容量の大きなものは向かない。アイコンとか飾り程度向き。 写真など、普通にコンテンツとして画像 […] -
Nuxt.js|Vuetify
Nuxtのプロジェクト作成時にUIフレームワークを選択できるが、Vuetifyはその選択肢に含まれているのでcreate-nuxt-appの実行時に選べばそのまま使えるはず。 ? UI framework: Vuetif […]