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

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

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

Vue.jsの続きです。前回まではVue.jsのUIフレームワーク、Vuetifyにトライしました。今回からはWebアプリケーション開発のフレームワーク、Nuxt.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-cale…

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

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

スナップ（ひっかかり）のあるスクロールをするのに昔はJSを利用してましたが、CSSのscroll-snapだけでも実現できるようです。実際に作ってみたら、まったくカン・タン・だった。それではいきましょう！

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

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

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

フォームのCSSって結構手間がかかったり、効いてくれなかったりで苦心しますね。TwitterでTAK（@tak_dcxi）さんがフォーム用のリセットCSSをツイートしていたので、実際に試してみました。それでは行きましょう！

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

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

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

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

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

「Webエンジニア」と「フロントエンド エンジニア」「バックエンドエンジニア」とか「IT業界」と「Web業界」などの位置付けが曖昧だったので調べてているうちに、総務省の資料に辿り着き、日本産業界全体の中での位置付けも把握できました。それでは、どうぞ…

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

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

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

CSSのグラデーションで最近追加されたconic-gradient。これを使うと放射状の光線を表現できるようなので、前々から存在は気になっていました。実際に触ってみた。光線ということで「太陽」を作ってみました。それでは、いきましょう！

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

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

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

前回に引き続き、AWSについて調べていきます。前回調べたWebサイトホスティングに該当する実際のAWSのサービス「EC2」「RDB」「ELB」「S3」などについて。それではいきましょう！

AWS（アマゾンウェブサービス）について詳しくなりたくいろいろ調べています。当面の目標はステージング環境を作ること。AWSの「いろは」的なスライドがあったのでその中に出てくるわからない単語を調べながら読み進める。今回はWebサイトホスティングの一般…

Google Chartsの記事で描画したグラフとVue.jsの連動に挑戦。入力した数字

p5.jsシリーズ、前回、挑戦したドットインストールの「p5.jsクリエイティブコーディング」の続きです。今回は「# 07」以降、「色」と「動き」です。