【ロピタルの学習記録 3/14】疲れたぁ

Vue.js

フォロワーさんに教えていただいたVueのOSSを一通り見てみました。色々あるんですねぇ

medium.com

その中でもすごって思ったのがこのアプリ

github.com

使ってみると、UIもマテリアルでめっちゃ綺麗。操作性もわかりやすくて、動きもすごい早い。これはソースコード読んだら様々なことが吸収できること間違いないと思うので読んでみたいと思います💪

Vue-CLIでUIフレームワークはVuetifyを使っているみたいですね。使ったことがあるので一部模写してみるのもありかもしれないですね！でもまだBabelとかEslintとかはよくわかっていないので概要を把握してからうまく使っていきたいです

ということでまずはこの講座で環境構築から学習することにしました

初心者のためのフロントエンド環境構築入門～Gulp編

Nuxt.js

こちらのチュートリアルを進めていくことにしました🥰

www.storyblok.com

進めながら疑問が出て調べた記事など適当に載せておきます

www.asobou.co.jp

www.liferay.co.jp

お天気アプリ

一応このアプリは開発終了しました。と言っても一つのページしかないのでめっちゃ簡単でしたが笑

ですが、ソースコードがプロからみると多分汚いので、よければアドバイスいただきたいです。下にGithubを貼っておきます

github.com

特にこの、見るからに冗長で初心者的なコード。こうしたら良いよっていうアドバイス頂きたいですm(._.)m

function setInfo(info) {
    document.querySelector(".weather-card__location__text").textContent = info.name.toUpperCase();
    document.querySelector(".weather-card__temperature").textContent = Math.round(info.main.temp-273.15) + " °";
    document.querySelector(".weather-card__box__humidity__value").textContent = info.main.humidity + "%";
    document.querySelector(".weather-card__box__wind__value").textContent = Math.round(info.wind.speed) + " K/M";
}

function setDate() {
    const today = new Date();
    document.querySelector(".date__day-of-the-week").textContent = getWeekDay(today);
    document.querySelector(".date__day-and-month").textContent = `, ${today.getDate()}th ${getMonth(today)}`;
}

TDCカレッジ

下準備

Paypalのアカウントをビジネスアカウントにし、月額決済のための下準備をしました

GAS

Goolgeフォームから送信されたら、値をスプレッドシートに書き込み、入力されたメールアドレスに自動でメールを送信するという処理をGASを使ってやってみました

GASというものを今日知ったのですが、Javascriptをやっているからか結構簡単に実装できました。

皆さんに見せたいのですが、まだ後悔していないサービスに付与するので公開できません（ ; ; ）もう少々お待ち下さい。

その他

www.youtube.com

www.youtube.com

toshi.cardmics.com

明日

インプット

• Nuxt: StoryBlok
• 環境構築: Udemy

多分ここ数日はインプットばかりになると思います。StoryBlokのチュートリアルが終わったら自分で作成してみたいと思います。