2020-03-16

【ロピタルの学習記録　3/16】2人っきりで宮島旅館にお泊まり+Googleカレンダー開発始めます

昨日は友達と宮島の旅館に泊まりました🍁めっちゃ久しぶりに泊まりましたけど、やっぱ旅館っていいですねぇ

f:id:ropitaru:20200315183509j:plain — ホテル

f:id:ropitaru:20200315195402j:plain — 部屋

f:id:ropitaru:20200315184933j:plain — ホテル内装

f:id:ropitaru:20200315192249j:plain — 穴子重

宮島近いからまた近々行きたいと思います。めっちゃはまってしまいそう笑　宮島に行きたい時は案内するのでよかったら声かけてください^^

応用情報

午前問題を淡々と解いております。

UMLはオブジェクト指向プログラミングのためだけのものかと思っていたけど、業務プロセスの改善にも使えるというのは驚きました。

Vue

この前、オープンソースを読むと言いましたが、良いものみつけたのでこっちをやっていくことにしました。

Googleカレンダーです。模写とかよりも、答えがないものを自分で考えながら実装することが一番成長できると思うのでGoogleカレンダーを開発してみたいと思います。

まだ実装ロジックはよくわかっていませんが、とりあえず環境構築をしました。ブログ新しく作って記事を書いたのでよかったら参考にしてみてください。

ropitaru.hateblo.jp

明日

インプット

応用情報: 午前復習

アウトプット

Googleカレンダーデモ: VueCLIでプロジェクト作成と確認
応用情報: 午前過去問

旅館泊まりたい欲がすごい。将来稼がねば...

2020-03-14

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

Vue.js
Nuxt.js
お天気アプリ
TDCカレッジ
- 下準備
- GAS
その他
明日
- インプット

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

toshi.cardmics.com

明日

インプット

Nuxt: StoryBlok
環境構築: Udemy

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

2020-03-11

【ロピタルの学習記録　3/11】MOS試験合格しました

今日は、MOS(Excel)試験がありましたが、思ったより簡単で結構楽々受かりました

でも、取ったほうが良いかと言われると、IT系の人は正直いらないです。　どっちかというと事務系かな？もし仕事で使うとしても、パソコン得意な人なら適当に使えばできると思いますし、取るとしても２日〜7日ぐらい対策したら受かると思います。

あと、今日は面談をしたり、大企業にエントリーしましたので後ほどお話しします！

Javascript

今はPromiseのアウトプットとしてHTTP通信を用いたデータの取得などを使って天気アプリを作っているのですが、もっと深く知識をつけられるタイミングかなと思ったので、MDNのページを見てみました

developer.mozilla.org

結構定着してきて、スムーズに、シンプルに捉えられるようになってきたかなと思います。中に少しだけAsyncの説明もあって少し理解できたので気になった方はみてみてください

お天気アプリ

今日はほとんど進めてないですが、日付だけ追加しました。便利なクラスがあるおかげで簡単に実装できました。あざましゅ

f:id:ropitaru:20200311220621p:plain — お天気アプリ

就活

今日もキャリアセレクトさんと面談しました。３つ企業を紹介していただきました。Web系の受託や自社開発など。ここだな、っていうところはないですが、検討して見ようかなと思います。

ちなみに、IT業界のエンジニアの就活についてはそこまで影響ないそうなので（オンラインでやればかも？）、とりあえず、夏休み前を目標に詰め込みで頑張ります。

最初に言った大企業についてですが、Yahooさんにエントリーしました。適正検査などあって、正直不安です。SPIなども全然やってないから本当に受かる気がしないけどとりあえずやることやっていきます

まず、お天気アプリの開発とPoetaの開発。TDCカレッジのホームページの開発はとりあえず終わったのでOKです。あとは、モダンなデザインの作成物が欲しいので、自分のポートフォリオページをモダンな感じで作成したいと思います。

できれば、バックエンドのGraphQL、Docker、AWSも組み込んだ成果物も作りたいですが、多分間に合わないので2年生になってゆるめにやろうと思います。

明日

インプット

応用情報: 午前復習

アウトプット

応用情報: 午前過去問
お天気アプリ開発

とりあえずお天気アプリの開発と応用情報に集中して頑張ります。Poetaに関しては、開発環境が復旧し次第頑張ります！おやすみなさい

2020-03-10

【ロピタルの学習記録　3/10】お天気アプリ開発はじめました

今日はキャリアセレクトさんと面談しました。話しやすい男性の方で、全て正直に話すことができたので、願望に沿った企業さんを提案してくださるのではないかと期待しています☺️

余談的な感じで話している時に聞いたのですが、キャリアセレクトさんは、Web系の企業さんと結構脈があって、サイバーエージェントさんいん５人も通しているそうでかなりびっくりしました笑

僕もいきたいなぁ...（ ; ; ）

天気アプリ

デザインはこの記事を参考にしています↓

medium.com

今はこんな感じ↓

f:id:ropitaru:20200310214029p:plain — ロンドンの気象

見た目はこんな感じですが、場所を検索して、Ajaxでデータを取ってきて表示まではできるようになっています。Gridの練習もできるし、非同期処理の練習もできるし良いアプリだ。

応用情報

今日は昨日解いた問題の復習をしました。復習したの全部載せるとあまりにも多いので、少しだけ

センサ

モバイル機器のモニタ表示の縦横切り替えに利用されるセンサは加速センサ
サーミスタセンサと赤外線センサは温度を測定
地磁気センサは地磁気を検知するセンサで、電子コンパスなどとして利用される

ディスプレイ

有機ELディスプレイは電圧をかけると発光する物質を利用
液晶ディスプレイは反射光とバックライトうを使用
プレズマディスプレイパネルは視野角が広く、高い電圧が必要

OSS

BSD(Berkely Softoware Distribution)はOSSに修正を加えて作成したソフトウェアの配布に際して、ソースコードを公開しなくても良いライセンス

ユーザビリティ評価法

ヒューリスティック評価法は専門家が操作して評価

明日

明日はMOSのExcel試験があるのですが時間が取れなかったため、かなりの確率で受からないします。が頑張ります

インプット

MOS: 試験対策

アウトプット

面談: キャリアセレクト
MOS: 試験
天気アプリ: 開発

天気アプリ開発が結構楽しくて、実用的なアプリにしていこうか迷っていますが、とりあえず企業に見せる最低限のものは作って置こうと思います。あと、もしかしたら作成方法を記事にするかもしれませんのでお楽しみに！ではおやすみなさい😪

2020-03-09

【ロピタルの学習記録　3/8】Javascriptに苦戦中

最近学校がないので特に最初に話すことがありませんのでさっさと報告に参ります💨

応用情報
TDCカレッジ
Javascript
- Async Function
明日
- インプット
- アウトプット

応用情報

今日は52/80で前回と同じくギリギリ合格。まだ復習をしていないので分析はできていないですが、とりあえず間違えたところの範囲を網羅的に学習して午前問題はどんどんインプットしていきます。

TDCカレッジ

とりあえずホームページの作成は終わったので、ひと段落...　

でもまだ支払い関係の下準備ができていなくて、ホームページの公開はできないので終わり次第公開します

CSSが汚いけど小さいプロジェクトだからいいかなって思ったけど一応今度整理しておこっと

Javascript

Async Function

jsprimer.net

Async Functionは必ずPromiseインスタンスを返す
Async Function内ではawait式が利用できる

次に記述した場合、Promise.resolve("値")を返したのと同義になる

async function asyncFunc() {
  return "値";
}

Await式を活用することで同期処理のように記述できる

ここら辺で色々と疑問が出てきたので、PromiseとAwaitの使い方を頭に叩き込むために、素のJavascriptでWheather APIを使用して簡単なアプリを作成しようと思います

明日

インプット

応用情報: 午前復習

アウトプット

Javascript: 天気アプリ開発

明日はこの二つに絞ってやることになると思います。Javascriptで書く時とフレームワーク使った時の感覚が結構違うのでまだまだですね。きちんとJavascriptを理解せねば。頑張ります。おやすみなさーい😪

2020-03-08

【ロピタルの学習記録　3/8】Javascriptと応用情報

GraphQLを取り入れたアプリ作ってみたいなぁ...　小さいプロジェクトじゃ真価は発揮できないかもやけど勉強として一回作ってみたい

そしてフォロワーさんのツイートでRubyのコード見てみたらクラス変数の定義方法すら忘れてました笑　こんなのあったっけって感じでした。やっぱ人間は忘れる生き物なのね

Javascript
応用情報
共有
明日
- インプット
- アウトプット

Javascript

久しぶりにJavascriptやりました。Promise理解したことによって結構ブラックボックスだった部分が見えてきて嬉しくなりました。

てか非同期とPromiseの関係を理解させてくれる記事がほとんどないから本当にjs-primerはおすすめです。

エントリーポイント

jsprimer.net

Webアプリケーションにおいて、エントリーポイントは常にHTMLとなる

HTTP通信

jsprimer.net

ブラウザ上でJavascriptからHTTP通信をする場合、Fetch APIを使用する
HTTP通信は、XMLHttpRequestでもできるが、Fetch APIの方が強力で柔軟
URLのクエリ部分は、セキュリティ上エンコードするのが定石
エンコードとは、特殊な意味を持った記号を文字列に変換する

上の記事の説明で気になったのは

const userId = "js-primer-example";
fetch(`https://api.github.com/users/${encodeURIComponent(userId)}`)
    .then(response => {
        console.log(response.status); 
        // エラーレスポンスが返されたことを検知する
        if (!response.ok) {
            console.error("エラーレスポンス", response);
        } else {
            return response.json().then(userInfo => {
                console.log(userInfo);
            });
        }
    }).catch(error => {
        console.error(error);
    });

このコード.thenに登録したコールバック関数で、response.okで条件分岐していますが、そもそもステータスコードが200番台以外だった場合、.thenが実行されないから意味がないのではと思いました（後々意味がわかりました）

データを表示する

jsprimer.net

テンプレートリテラルのタグ付けのところが理解できませんでしたが今は飛ばします。

Promiseを活用する

jsprimer.net

エラーを外側に伝えるためにPromiseオブジェクトを返し、catchでエラーをキャッチし処理する。

応用情報

今日は午後問題を解きましたが、めっちゃ不調で多分５割くらいしか取れませんでした。

セキュリティ

表の部分をきちんと読んでいれば取れた問題でした。いつも、問題文は全文読むようにしているのですが、表の説明は必要になったときに必要な場所だけ読むようにしています。

必要になったときに読むのは総合的に見て良いのですが、必要な部分だけ読むというのは、なかなか判断が難しいの、必要になったときに全部読むようにしたいと思います。

システムアーキテクチャ

初めて解きましたがボロボロでした。アルゴリズムができず焦ってこの問題を解いたのですが、今回の場合、知識があれば時間もかからず満点近く取れたとは思います。これからも演習をしてみて、こういう感じの問題が多かったら、対策しても良いかなって感じです。

今回は稼働率が出たのですが、うまい考え方ができず、取れませんでした。午後の稼働率は毎回単純化できると思うので、しっかり取っていこうと思います

ネットワーク

前回は全然できずあまりとりたくないと思ってましたが、今回は簡単でした。でも、もうちょっと考えろよ的な不正解もしていたので、反省です。というか今回は全問題頭の回転が悪く、考えが浅かった気がします。

データベース

これはただ単に僕の頭が悪くて解けないところがあったのでどうしようって感じです。データベースって、復習しても、それが身についているのか判断しづらいので、問題演習してなれるしかないですね。

情報システム開発

初めて解きました。今回はテストケースについての問題で、コツコツやる系で自分にはあまり合わないなと感じました。やっているうちに間違いがないか不安になって、全然問題が進まないという感じにいつもなります。しかもハマったら結構な時間ロスになります。

まだ初めてなのでどんな問題が出題されるのかわかりませんが、コツコツ系の問題だったら解かない方針でいきます

qiita.com

明日

インプット

Javascript: js-primer
応用情報: 復習

アウトプット

応用情報: 過去問
TDCカレッジ: 開発(ヘッダーのアニメーション)

久しぶりにJavascriptインプットやったら忘れてる部分あったのでコツコツ復習も頑張ります。おやすみん😴

2020-03-06

【ロピタルの学習記録　3/5】いつも行っているカフェに可愛い店員さん初登場

明日からコロナの影響で学校が休みになりました。そして課題が応用情報の過去問ともし合わせて大体20回分

正直自制心のない僕は学校がないと受かる自信はあまり持てませんが、できるだけ毎日過去問解いて復習を繰り返したいと思います！

春休みの目標は、

応用情報: 課題全部終わらせる
Javascript: js-primer修了
TDCカレッジ: ホームページ完成
Poeta: ユーザ周り完成(SNS認証まで)
就活: 面談受けまくる

多分朝とお昼は全部応用情報で潰れるので、夕方と夜で頑張って開発とインプットをしていきたいと思います。

今回は長期休みだけど実家には帰らずこもって勉強します。

CSS
色々
TDCカレッジ
明日
- インプット
- アウトプット

CSS

今日はFlexBox。しまぶーさんイケメンですねぇ...しかも元Yahooエンジニア。話も上手。優しい。好き。

www.youtube.com

カエルのゲーム良き。カエルの楽園を思い出す。

flexboxfroggy.com

色々

ssl.sakura.ad.jp

www.youtube.com

TDCカレッジ

今日はこのホームページのデザインと詳細作りに大半の時間を使いました。

もともとはVueCLIでホームページ作成しようと思ってましたが、ページが１枚でただ面倒になるだけだったので単純にHTML&CSS&JSで書くことにしました

すでに自動デプロイできるようになっていて(Netlify)、ホームページも公開していますが、まだ開発中なので実際に始めるときにお見せしようと思います。

明日

明日から春休みなので、気を引き締めて頑張ります。

インプット

応用情報: 復習
Javascript: js-primer

アウトプット

応用情報: 過去問
TDCカレッジ: ホームページ開発

気引き締めますが、明日はあまり詰め込まず、無理せず習慣づける感じでコツコツとやっていきます。おやすみんっ😪

応用情報

おすすめアプリ

Vue

明日

インプット

アウトプット

Vue.js

Nuxt.js

お天気アプリ

TDCカレッジ

下準備

GAS

その他

明日

インプット

お天気アプリ

就活

明日

インプット

アウトプット

天気アプリ

応用情報

センサ

ディスプレイ

ユーザビリティ評価法

明日

インプット

アウトプット

応用情報

TDCカレッジ

Async Function

明日

インプット

アウトプット

エントリーポイント

HTTP通信

データを表示する

Promiseを活用する

応用情報

セキュリティ

システムアーキテクチャ

ネットワーク

データベース

情報システム開発

共有

明日

インプット

アウトプット

色々

TDCカレッジ

明日

インプット

アウトプット