体育大学生怒涛のプログラミング記

プログラミング知識ゼロがプログラマーになるまでの道のり

paizaでBランク達成までの経緯

paiza Bランク達成!

Cランク達成までの勉強

2021年4月20日に開始したpaizaラーニングのスキルチェック問題ですが、2021年5月4日にBランクを達成することができました。

4月20日にpaizaの中で一番下のランク帯であるDランク問題に挑戦した時は、phpについてほとんど知識がなく、

「入力値から値を取ってくる」というやり方がわからなかったため、D問題も解けなかった気がします。

そこから4月26日にかけての6日間、講座を受けまくりました。講座は一ヶ月¥1,078円で全ての動画が見放題となっております。

 

講座を8割ほど受け、(2周以上はしていません)4月26日にCランクの問題を解いてみました。(その間にDランクはクリアすることができていました。)その時は簡単なC問題だったのだと思います。一問解けばランクアップすることができるpaizaでは、さっき勉強したことが運よく出たり、自分の組み立てた構造が運よくハマったりするだけでランクアップすることができてしまいます。

その時の自分もそんな感じで、運よくC問題を突破することができ、Cランクに上がることができました。

Bランク達成までにかかった時間:約2週間

Cランク達成までは順調だったのですが、Bランクの問題は正直言ってC問題をギリギリ解けるレベルだった4月26日の時点では全く解ける気がしませんでした。全くBランクには太刀打ちできそうになかったのでそこから10日間ほどは

・C,D問題をたくさん解く

・Bランクレベルアップメニューを解く

後者のBランクレベルアップメニューは、Bランクにレベルアップするための問題がたくさん用意されています。D,C問題を順序よく解いていくことでB問題を解けるようにするという問題集です。B問題を解くために新しい知識はほとんど必要なく、Dランク、Cランク帯で学んだ知識の応用なので、ブロック的な考え方が身についていけば解けるようになります。先程言ったようにBランク問題は最初全く解けるようになる気がしませんでしたが、やっていくうちに「なぜか」B問題も解けるようになっていました。

ここで甘い自己分析が入ってしまいましたが、本当に自分でもよくわかりません。多分、構造的に考える力がついてきたんだと思います。

Bランクの全ての問題が解けるようになっているわけでは決してありませんが、Cランク帯の問題はかなり対応できるようになっていました。Bランクに上がることを目標にしていた僕にとっては満足です。

 

ここまでくると就活で募集をかけている企業に応募できる数がかなり増えてきます。

Bランク以上の人が応募できる企業となると数が結構増えてくるので就活もかなり円滑に進むのではないかと思います。(現在就活真っ只中なので結果は分かり次第ブログに掲載したいと思います。)

f:id:trapro11:20210505221021j:plain

phpの講座を受けた感想

動画内でかなり詳細に説明してくれます。一番最初に思った感想は、「小学校の教育みたいだな。」ということです。ずっと基本繰り返し。小学校の時はなぜ何度も同じところをぐるぐると授業するのか、なぜ同じ漢字を何度も書かなければならないのか。嫌になった経験がある方も多いのではないでしょうか。

paizaは、まさにそんな感じの授業をしてくれます。逆に、繰り返し学習することの大切さを大学生になって改めてpaizaに気付かされました

嫌になって学習をやめてしまう人も多いこのプログラミングの界隈でpaizaはかなりレベルの高いコンテンツを配信してくれているのではないか思います。progateなどがプログラミング学習サイトでかなり有名ですが、paizaの講座は音声付きの動画で講座を配信してくれているため、声があった方が学習効率が上がるという方にはおすすめできるものだと思います。

 

ここまで読んでいただきありがとうございました。

仮想通貨マイニングとは

マイニングとは

ブロックチェーンの承認作業をすることで報酬として新規発行したコインをもらうこと

日本語で採掘

ここではコインの発行の仕組み

現金は中央収集型(国や政府などのによって管理されている)

ATMも同じ

暗号資産のほとんどは非中央集権(P2P)誰にでも直接送れる。特定の発行元がない

 

どうやって安全性を保つのか→ブロックチェーン技術

代表例はビットコイン

まとめて暗号化され、暗号化を解いて送られる

暗号化を解いてくれた人に新しく発行したビットコインを報酬として送られる。暗号を解いただけで報酬を手に入れることができる。マイニングする人のことをマイナーという。ビットコインのネットワーク参加者全員が同じ記録を持っている。(改竄はできない)(分散台帳型)

マイナーが増えれば増えるほど安全性が強化される。

 

コンセンサスアルゴリズム

報酬をもらえる権利をどうやって決めるかというルール

PoW方式ブロックの暗号を一番早く解いた人のかち

PoS方式 コインをたくさん持っている人が暗号を溶ける

DPoS方式 コインを持っていなくても大丈夫

PoI方式 使用頻度により変わる

→ネットワークへ貢献したことへの報酬

 

リップルやステラはマイニングがない

 

ディフィカルティ 計算をするときの難しさを表す指標

ハッシュレート(計算能力)が高い方が賞金が得られやすい

2週間おきにディフィカルティが調整される(ビットコインの場合)

 

マイニングをするには

パソコン、インターネット、QTなどのソフト

PoW方式によりより性能の良いパソコンを使うようになった

ASIC→ビットコイン専用CPUみたいなもの、計算能力が高い

プールマイニング

クラウドマイニング マイニング工場を運営するところに投資、株式の配当のように配られる

laravel 簡単なtodoアプリケーションの作成

①laravel8(最新バージョン)をインストール

$ composer create-project laravel/laravel --prefer-dist プロジェクト名

 

②uiをインストール

$ composer require laravel/ui

 

③Vue.jsを利用するために以下のコマンドを実施

$ php artisan ui vue -auth

 

④Vue3とlaravel-mixのバージョん6を下記のコマンドでインストール

$ npm install -save-dev laravel-mix@next vue@next

$ npm install && npm run dev

 

⑤ @vue/compiler-sfc,vue-loader@^16.0.0-beta.9が追加されたため再度実行する

$npm run dev

 

⑥resoureces¥js¥spp.jsを以下に変更

require('./bootstrap');
import { createApp } from 'vue'
import ExampleComponent from './components/ExampleComponent.vue'
createApp({
    components:{
        ExampleComponent
    }
}).mount('#app')

⑦サンプルコードを使用する

https://vuejsexamples.com/

・今回はこちらを使用する

https://vuejsexamples.com/a-simple-todo-application-using-vue-3-composition-api/

⑧welcome.blade.phpを変更する

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
<title>ExampleComponent</title>
        <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    </head>
    <body>
        <div id="app">
            <example-component></example-component>
        </div>
        <script src="{{ asset('js/app.js') }}"></script>
    </body>

</html>

resources/js/ExampleComponent.vueを修正する

 
<template>
	<h1>ToDo App</h1>
	<form @submit.prevent="addTodo()">
		<label>New ToDo </label>
		<input
			v-model="newTodo"
			name="newTodo"
			autocomplete="off"
		>
		<button>Add ToDo</button>
	</form>
	<h2>ToDo List</h2>
	<ul>
		<li
			v-for="(todo, index) in todos"
			:key="index"
		>
			<span
				:class="{ done: todo.done }"
				@click="doneTodo(todo)"
			>{{ todo.content }}</span>
			<button @click="removeTodo(index)">Remove</button>
		</li>
	</ul>
	<h4 v-if="todos.length === 0">Empty list.</h4>
</template>
<script>
	import { ref } from 'vue';
	export default {
		name: 'App',
		setup () {
			const newTodo = ref('');
			const defaultData = [{
				done: false,
				content: 'Write a blog post'
			}]
			const todosData = JSON.parse(localStorage.getItem('todos')) || defaultData;
			const todos = ref(todosData);
			function addTodo () {
				if (newTodo.value) {
					todos.value.push({
						done: false,
						content: newTodo.value
					});
					newTodo.value = '';
				}
				saveData();
			}
			function doneTodo (todo) {
				todo.done = !todo.done
				saveData();
			}
			function removeTodo (index) {
				todos.value.splice(index, 1);
				saveData();
			}
			function saveData () {
				const storageData = JSON.stringify(todos.value);
				localStorage.setItem('todos', storageData);
			}
			return {
				todos,
				newTodo,
				addTodo,
				doneTodo,
				removeTodo,
				saveData
			}
		}
	}
</script>
<style lang="scss">
$border: 2px solid
	rgba(
		$color: white,
		$alpha: 0.35,
	);
$size1: 6px;
$size2: 12px;
$size3: 18px;
$size4: 24px;
$size5: 48px;
$backgroundColor: #27292d;
$textColor: white;
$primaryColor: #a0a4d9;
$secondTextColor: #1f2023;
body {
	margin: 0;
	padding: 0;
	font-family: Avenir, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-color: $backgroundColor;
	color: $textColor;
	#app {
		max-width: 600px;
		margin-left: auto;
		margin-right: auto;
		padding: 20px;
		h1 {
			font-weight: bold;
			font-size: 28px;
			text-align: center;
		}
		form {
			display: flex;
			flex-direction: column;
			width: 100%;
			label {
				font-size: 14px;
				font-weight: bold;
			}
			input,
			button {
				height: $size5;
				box-shadow: none;
				outline: none;
				padding-left: $size2;
				padding-right: $size2;
				border-radius: $size1;
				font-size: 18px;
				margin-top: $size1;
				margin-bottom: $size2;
			}
			input {
				background-color: transparent;
				border: $border;
				color: inherit;
			}
		}
		button {
			cursor: pointer;
			background-color: $primaryColor;
			border: 1px solid $primaryColor;
			color: $secondTextColor;
			font-weight: bold;
			outline: none;
			border-radius: $size1;
		}
		h2 {
			font-size: 22px;
			border-bottom: $border;
			padding-bottom: $size1;
		}
		ul {
			padding: 10px;
			li {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border: $border;
				padding: $size2 $size4;
				border-radius: $size1;
				margin-bottom: $size2;
				span {
					cursor: pointer;
				}
				.done {
					text-decoration: line-through;
				}
				button {
					font-size: $size2;
					padding: $size1;
				}
			}
		}
		h4 {
			text-align: center;
			opacity: 0.5;
			margin: 0;
		}
	}
}
</style>
➉home.blade.phpを変更
@extends('layouts.app')@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div id="app">
<example-component></example-component>
</div>
<div class="card-header">{{ __('Dashboard') }}</div> <div class="card-body">
@if (session('status'))
<div class="alert alert-success" role="alert">
{{ session('status') }}
</div> @endif
</div>
</div>
</div>
</div>
</div>
@endsection
⑪あとはお好みのデータベースを使用すればOK!

Vue.js 算出プロパティ computedについて

まず、プロパティについて

プロパティの日本語訳は、

・財産

・資産

・所有物

・特性

・属性

などの意味がある。特に、属性に注視すると、プロパティには

「プロパティにくっついているものがどのようなものなのかを説明している」

という意味がある。つまり、ファイルの情報を説明しているのである。

 

computedについて説明してみる。次のように記述する。

 

computed:{

ここにプロパティ名を記述 function() {

ここに処理内容を記述

return ここに処理後の表示させる値を記述

}

}

 app.js

var vm = new Vue({

el: '#example',

data: { firstNum:3, secondNum:4 },

computed: {

// 算出 getter 関数

resultNum: function () {

// `this` は vm インスタンスを指します

return this.firstNum * this.secondNum } } })

 

app.html

<div id="example">

<p>{{ resultNum }}</p>

</div>

結果には12が表される。

 

 

CDNとは

CDNとは、アプリケーションのファイルの一部を肩代わりしてくれるもの。

例えば、vue.jsを使いたい時、

・vueをダウンロードしてから使う方法

CDNとしてvue.jsのリンクを貼る方法

二つの方法があるが、アプリケーションを公開する時には基本的に前者の方法をとる。なぜかというと、CDNをリンクとして貼るだけだと、もしvue.jsを管理しているサーバーが壊れてしまった時にアプリケーションもそのままオジャンということになってしまうからである。

だから、本番時にはダウンロードしてから使う。

ダウンロードしてから使うための手順が少しめんどくさいのだが、ダウンロードしてしまえばインターネット環境がない場面でもvue.jsを使用することができる。

laravelの歴史

laravel とは

2011年6月 テイラーオットウェル(Tailor Otwell)

が開発したphpフレームワークである。

フレームワークの中でも歴史は浅いが人気は高い。GItHubでのスター獲得数がPHP,Ruby,Pythonなどのバックエンド系プログラミング言語フレームワークの中で最も多い。

最新のlaravel8から実装されたlaravel Jetstreamでは、ログイン、登録、電子メール検証、2要素認証、セッション管理、などを簡単に実装してくれる。

laravel uiは便利な認証機能

laravel-uiとは、laravel6からデフォルトで入っている、

モダンフロントフレームワークである。

laravelにおいて、uiを実装するだけで簡単に認証機能を使うことができる。

認証機能とは、

・会員登録

・ログイン

などの機能のことである。

これらの機能を、勝手に実装してくれる。

 

laravelのプロジェクトを作ったあと、

$composer require laravel/ui

 

を実行。その後、Vue.jsを利用するために以下のコマンドを実行する

$php artisan ui vue --auth

 

vue3とlaravel-mix6のインストール

$npm install -save-dev laravel-mix@next vue@next

$npm install && npm run dev

 

@vue/compiler-sfc, vue-loader@16.0.0-beta.9が追加されたため再度実装する

$npm run dev

 

あとは好きなデータベースと接続するだけで簡単に認証機能を利用することができる。