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

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

仮想通貨マイニングとは

マイニングとは

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

日本語で採掘

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

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

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

 

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

 

 

体育大学3年生がプログラミングを5ヶ月やってみた

昨年、2020年9月、皆さんも一度は目にしたことがあると思われる

youtube厚切りジェイソン

「Why techacademy!」という広告に感化され、プログラミングに興味を持った。

そして次の日気づいたら奨学金返済のために貯めていた30万円を銀行からおろして、

macbook proを原宿のapple storeに買いに行っていき、

そしてかの有名なtechcampの申し込みに行っていた。

その時、全く知識がなかったので、

techacademyとtechcampは全く同じ会社が運営しているものだと勘違いしている。

でもtechcampは結局受講しなかった。理由は単純に評判があまり良くなかったからだ。

仕事にしてやろうとかは思ってなかったし、

何か適当な趣味みたいなものとしてできたらかっこいいな、

くらいにしか考えていなかった。

でもやってみると結構楽しく、5ヶ月も続いていることに自分でもびっくりしている。

自分は教育学部体育学科に所属しているので、将来は教員かトレーナーにでもなろうかと考えていたが、

5ヶ月もプログラミングをやってみるとバカでも意外となんとかなるものである。

フレームワークというものの存在を開始して2ヶ月くらいで知ったが、世の中には頭の良い方達がなんか良い感じのアプリを作れるように色々と最初から作ってくれているので、バカな僕はあとは組み合わせるだけで割と良い感じのアプリを作ることができる。

僕は現在phpのlaravelと、javascriptのvue.jsという言語を勉強している。

その辺を勉強している、もしくはプログラミングに興味あるけどなかなか一歩踏み出せないという人はぜひコメントしていただきたい。

一緒に勉強してくれる人がいれば最高だし、自分がプログラミングを始めた初期の頃に欲しかった情報を伝えることもできると思う。