クモのようにコツコツと

フロントエンドエンジニア イイダリョウのブログ。略称「クモコツ」

JS

【Vue.js】Nuxt.jsプロジェクト router-linkで下層ページに往来

JS

Vue.jsの続きです。前回はNuxt.jsプロジェクトのTOPページのコードを読み解きました。今回は下層ページを作ってみたく。それではいきましょう!

【Vue.js】Nuxt.jsのプロジェクトファイルを見てみる

JS

Vue.jsの続きです。前回はNuxt.jsのプロジェクトを作成しました。今回はそのプロジェクトファイルの中身を見てみる。それではいきましょう!

【JS】モジュール(import / export)でどんなことができるのか事始めてみた

JS

Vue.jsやNuxt.jsを理解する上で重要なJSの「モジュール」という仕組みを先に理解する。外部JSファイルの一部の機能を読み込むようだが、どんなことがことができるのか。それではいきましょう!

【Vue.js】Nuxt.jsのプロジェクトを作成する

JS

Vue.jsの続きです。前回はNuxt.jsのインストールと簡易ページを作成しました。ハローワールド的なペライチページでした。今回は本式なプロジェクトをつくってみる。それではいきましょう!

【Vue.js】Nuxt.jsをインストールして簡易ページを作成した

JS

Vue.jsの続きです。前回までVue CLIをインストールしてみた。今回はNuxt.jsをインストールしてみる!途中、何度かエラーが起こったが、調べながらなんとか進めた。それでは行きましょう!

【JS】Web Speech APIを使ってページのテキスト読み上げボタンを実装してみた

JS

テキスト読み上げのスクリーンリーダーについて調べたところ、なんとJSで「Web Speech API」というのがあることを知った!どんな風に読み上げられるのか、実際にやってみた。それではいきましょう!

【Vue.js】Vue CLIのダッシュボード(GUIツール)を開く

JS

Vue CLIの続きです。前回はVue CLIのプロジェクトを作ってみました。今回はプロジェクトのダッシュボード(GUIツール)を開いてみます。それではいきましょう!

【Vue.js】Vue CLIのプロトタイプとプロジェクトを作る

JS

Vue.jsの続きです。前回はVue CLIをインストールしてみました。今回はプロトタイプとプロジェクトを作ってみます。それではどうぞ!

CodePenでHTML、CSS、JSを体験しよう【クモコツ一人もくもく会-1】

先日、Youtubeで初ライブ配信を行いました!いつも愛用しているCodePenを紹介しつつ、HTML、CSS、JSの基本を解説しました。こちらに概要とソースコードを掲載します。またCodePenのおすすめ設定やYoutubeでライブ配信する方法についてもご紹介。それではどう…

【Vue.js】Vue CLIをインストールしてみる(CDN、Nuxe.jsとの違い)

JS

Vue.jsの続きです。前回はNuxt.jsで何ができるか調べました。今回はNext.jsのインストール…の前にVue CLIが未体験だったのでこちらのインストールをやってみます。それではいきましょう!

【HTML】PugでFizzBuzzる!(テンプレートエンジンの変数、for文、if文)

以前の記事で紹介したテンプレートエンジンPug。Node.jsでトランスパイルできます。このときはタグの省略記法のみだったので今回はもう少しロジック的な変数、for文、if文を試しました。JSとの書き方の比較もしています。それではいきましょう!

【Vue.js】Nuxt.jsで何ができるのか調べた(SSR、ルーティング、静的ファイル生成など)

JS

Vue.jsの続きです。前回まではVue.jsのUIフレームワーク、Vuetifyにトライしました。今回からはWebアプリケーション開発のフレームワーク、Nuxt.jsにトライ。今回は概要を掴むために調べたことについて。それではいきましょう!

【p5.js】基本書式とsetup(キャンバス描画)、draw(四角、線、四角の原点) Coding Train(p5.js 1.3)

JS

p5.jsの続きです。前回から、Dan先生のCoding trainのp5.js系の動画の副教材を目指してオンライン写経を始めました。今回は「1.3」。JSとp5.jsの基本書式。setup関数によるキャンバス描画、draw関数の中に四角や線を描いて四角の原点変更、という内容。それ…

【Vue.js】Vuetifyにパンくず、スライダー、タイル、アコーディオン、カレンダーを配置(v-carousel、v-carousel、v-card、v-expansion-panels、v-calendar)

JS

Vue.jsの続きです。前回はVuetifyのヘッダー、フッターを配置してみました。今回はさらにいろんなパーツを配置してみます。パンくず(v-carousel)、スライダー(v-carousel)、タイル(v-card)、アコーディオン(v-expansion-panels)、カレンダー(v-cale…

【Tone.js】コード切り替えボタンと鍵盤の連携

JS

Tone.jsの続きです。前回はコード切り替えボタンを設置しました。が、まだ鍵盤の音とは連携できていません。今回はその連携にチャレンジ。それではいきましょう!

【Vue.js】Vuetifyにヘッダー、フッターを配置(v-app-bar、v-footer)

JS

Vue.jsの続きです。前回はボタンを配置してみました。今回はヘッダー、フッターを配置してみます。v-app-barとv-footerを使います。それではいきましょう!

【Vue.js】Vuetifyでボタンを並べてみる(v-app、v-content、v-container、v-layout、v-flex、v-btn)

JS

Vue.jsの続きです。前回はVuetifyを事始めました。今回はもう少し進んで、ボタンを3つ並べてみました。v-layout、v-flex、v-btnなどを使いました。

【p5.js】楽しく学ぶ重要性:Coding Trainのダン先生に付いていく!(p5.js 1.1〜1.2)

JS

p5.jsシリーズの続きです。前回、「Generative Design with p5.js」のコードを見てみました。今回からはYoutubeの「Coding Train」チャンネルのp5.js動画をレビューしてみます。それではいきましょう!

【Vue.js】UIフレームワーク「Vuetify」をCDNリンクで事始めた

JS

Vue.jsの続きでず。前回まではコンポーネントについて触れましたが今回からはVue.jsのUIフレームワーク、Vuetifyにトライしてみます。CDNリンクで事始めることができました。それではいきましょう!

【Vue.js】コンポーネントにpropsオプションで値を渡す

JS

Vue.jsシリーズの続きです。前回はコンポーネントにカウンターを仕込みました。今回はコンポーネントに値を渡してみます。propsオプションを使います。それではいきましょう!

【Tone.js】コード切り替えボタンを設置(鍵盤とは未連動)

JS

Tone.jsシリーズの続きです。前回は一箇所の打ち換えでメジャーコードとマイナーコードを切り替えできました。次は画面上で切り替えられるようにするために、ラジオボタンを設置しました。

【Vue.js】コンポーネントにカウンターを仕込む(※dataオプションを無名関数に!)

JS

Vue.jsシリーズ続きです。前回はコンポーネントでハローワールド的一歩を踏みしめました。今回はコンポーネントにカウンターを仕込んでみます。ポイントはdataオプションの値を無名関数にすることです。それではいきましょう!

【p5.js】Generative Design with p5.js「色 P_1_0_01」のコードを読み解く

JS

p5.jsの続きです。前回まではドットインストールのコードを紐解きました。今回からは「Generative Design with p5.js」のコードを見ていきたく。最初は「色」編です。それではいきましょう!

【Vue.js】コンポーネント事始め(グローバル登録とローカル登録)

JS

Vue.jsシリーズの続きです。前回まではlocalSltrageとの連携でしたが、今回からコンポーネント。コンポーネントって部品を一まとめにする機能ですが、独自のタグ名を命名できます。これを見かけるとJSフレームワーク感が高まるんですがw、いよいよ自分でも実…

【Vue.js】localStorageと連携したTodoリストを読み解く(JS編-3)

JS

Vue.jsシリーズ、公式サイトのサンプルにあったlocalStorageと連携したTodoリストのコードを読み解く。前回はJS編その2としてVueインスタンス以外のコードを見ていきました。localStorageを読み込む箇所も見受けられました。今回がラスト。Vueインスタンス本…

カスタムデータ属性をCSSやJSで読み込む(テキストをHTMLに集中させる)

HTML5から追加された「カスタムデータ属性」。data-hogeといった形式で独自の属性を作れます。これを使うと、これまでCSSやJSの中に直接書いていたテキスト情報をHTMLに集中させて、CSSやJSはカスタムデータ属性からテキストを読み込む形にできます。テキス…

【Vue.js】localStorageと連携したTodoリストを読み解く(JS編-2)

JS

Vue.jsシリーズ、公式サイトのサンプルにあったlocalStorageと連携したTodoリストのコードを読み解く。前回はJS編その1としてコードの全体像を見ていきました。今回から詳細編。ひとまずVueインスタンス本体以外の部分を見ていきます。localStorageの設定も…

【Vue.js】localStorageと連携したTodoリストを読み解く(JS編-1)

JS

Vue.jsシリーズ、公式サイトのサンプルにあったlocalStorageと連携したTodoリストのコードを読み解く。前回はHTML、CSS編でした。今回はJS編。localStorageと関わる部分を見たかったけどボリュームがあったのでまずは全体像から。それではいきましょう!

【Tone.js】3コード楽器を1オクターブに拡張する

JS

Tone.jsシリーズ、前回は3コード楽器のコードを拡張しやすいようにリファクタリングしました。今回は鍵盤を1オクターブ分に拡張しました。また、和音の一箇所を打ち替えるだけでメジャー調をマイナー調に変更することにも成功。それではどうぞ!

【Vue.js】localStorageと連携したTodoリストを読み解く(HTML、CSS編)

JS

Vue.jsで単純なものを作るとリロードしたときに初期状態に戻ってしまって儚い(はかない)。。かといってデータベースと連携したものをつくるのはまだハードルが高い。前段階として以前にも触れたLocalstrageと連携して値を保存してみたい。公式サイトのサン…