みみぺんブログ

WEBデザイナー、エンジニア、プログラマー向けの記事を投稿します

【コピペ用】HTML基本コード！覚えるべきところだけを解説

未経験でWEB業界 かなきち

HTML基本構造を解説！覚えるべき内容を簡潔にまとめました！ こんにちは、かなきち(@kanakichi0801)です

前回は超初級編と言うことでブラウザに文字や画像を表示させたり、リンク(URL)を設置しました。

今回は続きで使用したホームページを作る土台、HTMLの基本構造について解説をしていきます。 blog.mimipen.net

かなきち

この記事を読むと
ホームページの作り方の初歩が分かるよ！





!DOCTYPE htmlとは

<!DOCTYPE html>(ドックタイプ)とはDocument Type Definitionの略です。タグに見えますが、正式にはタグではありません。文章の宣言文の役割になります。

必ず文章の先頭に<!DOCTYPE html>(ドックタイプ)を設置すると覚えましょう。それだけで大丈夫です。

【参考】

<!DOCTYPE html>

htmlタグとは

<!DOCTYPE html>(ドックタイプ)の後に<html>(エイチティーエムエルタグ)を設置します。HTML文書を使うのでhtmlタグを使用する。そんなイメージです。htmlの文章を宣言するエリアをこれで決めます。全ての要素はこの<html>(エイチティーエムエルタグ)の中に記述します。

【参考】

<!DOCTYPE html>

<html lang="ja"><!-- ←htmlタグ(開始タグ) -->

</html><!-- ←htmlタグ(終了タグ) -->


lang属性(lang="")
<html>タグには、基本的にlang属性を追加します。lang属性の立ち位置が微妙でして...
W3Cでは、lang属性を推奨していますが、googleではクローラーが巡回するときにこの lang属性は見ていないそうです。
当ブログでは基本的にW3Cを参考にlang属性は記述していこうかと思います。

headタグとbodyタグ

<html>(エイチティーエムエルタグ)の中に、<head>(ヘッドタグ)と<body>(ヘッドタグ)を記述します。

headタグ

<head>(ヘッドタグ)は少々説明が難しい部分になります。

簡単に説明をすると、<head>(ヘッドタグ)の中にはホームページには表示されない内部設定が入ります。以下が例になります。

  • ホームページの内部設定
  • 外部ファイルの設定
  • 検索やSNSの表示設定

などなど

<head>(ヘッドタグ)は、SEO対策(=検索エンジン最適化)でも重要です。ただ覚えることが多いので、先ずは<meta charset="utf-8">(ユーティーエフエイト)と<title>(タイトルタグ)を記述すると覚えましょう。

※当ブログでは、detectionなどの説明は後に回します。先ずは、ホームページを表示する上で確実に必要なところから説明しています。

メタタグ utf-8とは

「UTF-8(ユーティーエフエイト)」という文字コードを設定するという意味。前回もチラっとお話ししましたが、文字化け防止のためにこのタグを使います。このタグを設置しないと「 æ–‡å—化ã ' 」や「譁 ｭ怜喧縺 」のように文字が化けて表示されます。これを文字化けと言います。

また、<meta>から始まるタグをメタタグといい、ホームページの内部設定はよくこのメタタグを使います。閉じタグはありません。

【参考】

<!DOCTYPE html>

<html lang="ja">

<head>

  <meta charset="utf-8"><!-- ←メタタグ utf-8 -->

</head>

</html>

titleタグとは

前回もお話したようにタイトルを書くタグです。主にブラウザのタブに表示されますが、検索の時のタイトルも以下のように表示されます。

Google検索結果のタイトルを変えるにはタイトルタグをいじろう。
[Google検索結果のタイトル]


余談になりますが、検索で表示されているタイトルを変えて欲しいとクライアントからあったら、こちらの<title>(タイトルタグ)を修正しましょう。ただ、googleの検索結果はgoogleのロボット(クローラー)が回って来ないと反映されないので反映までに遅くて2週間程度かかります。 ※サーチコンソールのURL検査かければ、比較的早く反映される可能性があります。

【参考】

<!DOCTYPE html>

<html lang="ja">

<head>

  <meta charset="utf-8">

  <title></title><!-- ←titleタグ -->

</head>

</html>



次に<body>(ボディータグ)の説明に入っていきます。

bodyタグとは

<body>(ボディータグ)に、ホームページに表示したい内容は、基本的にこの中に書いていきます。

まだまだ先になりますが、JavaScriptやjQueryなどの、ホームページに動きをつけるコードは<body>の閉じタグの直前に書き込むことがあります。

【参考】

<!DOCTYPE html>

<html lang="ja">

<head>

  <meta charset="utf-8">

  <title></title>

</head>

<body><!-- ←bodyタグ(開始タグ) -->

</body><!-- ←bodyタグ(終了タグ) -->

</html>



まとめ

いかがだったでしょうか？今回はホームページの土台ということで、HTMLの基本構造について解説させていただきました。なんとなくイメージが掴めたらそれで大丈夫です！

なんども言いますが、以下のコードはどこかにメモで残しておいてコピペするのをお勧めします。

<!DOCTYPE html>

<html lang="ja">

<head>

  <meta charset="utf-8">

  <title></title>

</head>

<body>

</body>

</html>

次回は、最低限覚えなくてはいけないHTMLタグを紹介していきます。たくさんのタグの種類がありますが、最低限4つのタグでホームページは作れるという内容になっております。

最後までご覧いただきありがとうございます。

この記事がいいなっと思ったら読者登録をお願いいたします♪



【ツイッターでは主に、仕事や技術系の内容をつぶやいています】 技術者の方ともっと繋がりたいっす！お気軽にフォローもお願いします！
かなきち(@kanakichi0801)
かずん(@kazoonLab)

Twitter APIを使って自動ツイートBotを作ってみよう(1) ~ API Keyを取得するまで~【使用言語PHP】

API かずん

Twitter Botの作り方 先ずはAPI Keyを取得しよう

はじめに

こんにちは、かずん(@kazoonLab)です。


私は今、このブログをより多くの方に読んでもらえるよう、Twitterで動くbot*1を作っています。


今回はbotを作るにあたって必要なこと、「Twitter API Key の取得」の方法をご紹介します。

かずん

この記事を読むと、Twitter API Key / Tokenの入手方法がわかるよ！



APIの取得

Twitter Developerにアクセス

まずはじめに、Twitterの開発者ページ(https://developer.twitter.com/)へアクセスしましょう。

アクセスできたら、右上の「Apply」をクリックします。

Twitter botの作り方 Developer トップ
Developer Twitterのトップ


クリックすると次の画面へ遷移するので、ここでは「Apply for a developer accout」をクリックします。
Twitter botの作り方 apply access
Apply for accessの画面
クリックすると、Twitterへのログインを求められるので、自分のもっているアカウントでログインしましょう。

利用目的について記入する

ログインすると、「APIを使う主な目的」を聞かれます。今回は「個人でbotをつくる」ため、「Hobbyist」の「making bot」を選択し、「Next」をクリックしましょう。

Twitter botの作り方 making a bot
Making a botを選択



クリックすると確認画面へ遷移します。自分のアカウント情報、利用目的を確認し、(1)今住んでいる国、(2)連絡できる電話番号を記入し、「Next」をクリックします。


次の画面では、今回作るbotについて様々なことが聞かれます。質問は全て英語で(ここまでもそうでしたが)、さらに回答の最低文字数も設けられています。根気よく答えていきましょう。

In your words(具体的な使用目的)を記入する

Twitter botの作り方 Botの利用目的
Botの利用目的を説明する


ここでは、「このアプリはどのように使用されるか」を聞いています。私は、「学習、およびブログの告知のため」といった趣旨を記入しました。

The specifics(特徴)について答える

Twitter botの作り方 仕様 説明
Botの仕様を説明する



2つ目の質問で、「作るアプリケーションがツイート、リツイートなどの機能を利用するか」を聞かれています。Yesのまま、テキストボックスにbotの仕様を書いていきましょう。


私は、「条件に合うツイートを取得して、それらをリツイートする」といったことを書きました。 その他に関しては、特に利用目的はないため、チェックを外してしまいましょう。


すると、下の「Next」ボタンがクリックできるようになります。ここをクリックすると確認画面へ遷移します。

記入事項の確認

確認画面の内容を読み、「Looks good!」をクリックすると、規約の確認画面へと遷移します。確認のチェックを入れ、「Submit application」をクリックすると、申請が完了します。

アプリケーションの登録

メールアドレスの登録

申請が終了すると、アカウントに紐づくメールアドレスにTwitterからメールが来ます。そのメールの「Confirm your email」をクリックし、メールアドレスをdeveloperサービスに登録します。


登録し、申請が通ると、アプリを登録できるようになります。https://developer.twitter.com/en/apps をクリックし、「Create an app」をクリックします。 (画像では、すでに私のbotが1つ登録されている状態です。)


クリックすると、アプリケーションの登録情報を入力する画面に遷移します。もう一息です。

Twitter botの作り方 bot 名前 概要 URL
Botの名前、概要、URLを記入する


ここでは、「アプリケーションの名前」、「アプリケーションの概要」、「APIを使用するURL」を入力します。名前はお好みで、概要はココの2つ目の質問と同じもので構いません。URLは実在するもの、例えば自分のTwitterの自分のアカウントのURLを入力しましょう。

上記の質問に答えたら、最後までスキップします。
Twitter botの作り方 何のために使うかを説明する
Botを何のために使用するかを


最後の質問は、「このアプリの利用目的」です。前の質問と似ているように見えますが、「作った人がどのように使うか」を聞いています。私はココと同じことを記入しました。


入力し、「Create」をクリックすると、登録済みのアプリの画面へと遷移します。この画面で「Keys and tokens」をクリックすると、2つの「Consumer API key」を確認することができます。


下の「Access token & access token secret」で「Create」をクリックすると、2つの「Access token」を表示できます。


API keyとAccess tokenを取得できたことで、bot開発の準備が整いました。お疲れ様でした！
Twitter botの作り方 key token 表示
KeyとTokenの表示画面

まとめ

ここまでで、bot開発に必要な情報を得ることができました。得た情報は、大切に、かつ他の人に知られないように保管しましょう。
最後までご覧いただきありがとうございます。

↓次の記事はこちら！ blog.mimipen.net

↓他にも作りながら学べる記事を日々更新中！ blog.mimipen.net blog.mimipen.net blog.mimipen.net

この記事がいいなっと思ったら読者登録をお願いいたします！

【ツイッターでは、仕事のことなどをつぶやいています】 技術者の方ともっと繋がりたいっす！お気軽にフォローもお願いします！
かなきち(@kanakichi0801)
かずん(@kazoonLab)

*1:自動化されたタスクを実行するアプリ。例えばTwitterでは、自動でツイートしたりフォローを返すものが挙げられる

ホームページ制作を10分で体験！HTMLをコピペで簡単にページ作成

未経験でWEB業界 かなきち

コピペができればホームページは作れる！超初級編 ブラウザに文字や画像を表示させる方法を解説

こんにちは、かなきち(@kanakichi0801)です



今回は、WEB業界を目指す第4回という事で、やっとコードを書いていくよ！



前回までは、WEB業界の職種とその役割、お金のこと。事前準備ということで、Chrome(クローム)というブラウザをインストールしてもらいました。
blog.mimipen.net




今回の内容は、WEBクリエイター育成学校で一番最初にやる授業とほぼ同じ。パソコンが触りたての方にもわかるように解説していくので一緒に頑張りましょう！




かなきち

この記事を読むと
ホームページの作り方の初歩が分かるよ！



テキストエディタを使おう

テキストエディタとは、その名の通りテキストを作るツールです。Windowsであれば[メモ帳]、Macであれば[テキストエディット]を開いてみましょう。
テキストエディタをを開く
[テキストエディタをを開く]



Macのテキストエディタの場合は、開いた時に左上のバーにある[テキストエディット]→[環境設定]→フォーマットの欄がリッチテキストになっていたら、[標準テキスト]に必ず変更してください。



そこに、好きな文字を入力します。

テキストエディタを文字を書く
[テキストエディタを文字を書く]


その時にファイル名を以下に変更してください。
［test.html］
[.html]とは拡張子の種類のこと。エクセルでは[.xlsx]、画像では[.jpg]などがあります。それと同じでブラウザに表示させるファイルには[.html]という拡張子を使います。



このファイルのことを[HTMLファイル]といいます。



※拡張子をつけて保存の時に消えてもそのまま作業を進めてください。パソコンの設定によっては拡張子が見えないことがあります。



ファイル名を変更したら、ファイルの種類を、Windowsの場合は[すべてのファイル]、Macの場合は[Unicode(UTF-8)]を選択しましょう。

テキストエディタを使ってブラウザに文字を表示させる まずはhtmlという拡張子をつけて形式を選択する
[htmlという拡張子をつけて形式を選択する]



終わりましたら【保存】します。



【※補足※】
［ファイルの種類を選択する］手順は覚えなくて大丈夫です。何もない状態からでもホームページ制作に触れてもらえるよう。標準搭載のテキストエディタを使用しているために多く作業が発生しています。今後、現場で実際に使うテキストエディタをダウンロードして使用していきます。



Chrome(クローム)起動して、できたファイルをChrome(クローム)に[ドラック&ドロップ]してください。

テキストエディタをブラウザにドラック&amp;amp;ドロップ
[htmlファイルをブラウザにドラック&amp;ドロップ]


文字は表示できましたでしょうか？へんな文字「 æ–‡å—化ã ' 」や「譁 ｭ怜喧縺 」のようになっていてもOKです。記号や漢字の羅列の状態=これを[文字化け]と言います。



Macの場合は、保存の際に[Unicode(UTF-8)]を選択していたので文字化けがありませんでした。



テキストエディタでファイルを作成し、[.html形式]で保存、それをブラウザに[ドラック&ドロップ]をする。これが最も簡単にホームページを表示させる方法です。



これなら自分にもできそうと思ったらそれでOK！小さいことから積み上げて行くのが大切です。



次は少し難易度を上げて[タグ]を使ってみましょう！

簡単なホームページを作ってみよう

文字、画像、リンクをタグを使って、簡単なホームページを作りましょう。

文字を表示させよう

先ほどの[test.html]を開いてください。



先ほどの文字を消ます。そして以下のコードをコピペしてください。

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title></title>

</head>

<body>

</body>

</html>

これを見て「うげっ」て思った方、大丈夫です。



コピペするだけで覚えなくて大丈夫！このコードをメモなどに保存してそれをコピペすると覚えましょう。



一気に覚えようとしないことがコツ！
今回は「やってみよう」という回なので、覚えられたら覚えるぐらいの感じでゆったりやっていきましょう。



コピペしたものがなにかというと、ウェブサイトを作るための土台 といったところです。



以下のタグをみてください。

<title></title>


見たままですが、こちらがタイトルを入れる部分で[タイトルタグ]と言います。



また、<>で囲まれたものをタグと言います。基本的にタグは【２つで１つ】。始まりのタグを[開始タグ]終わりのタグを[終了タグ]といいます。



終了タグには、開始タグと区別するために[ / ]がつきます。これは覚えておいてください。



開始タグと終了タグの間に[好きな言葉]を打ち、【保存】してください。



【参考 コード】

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>かなきちブログ</title>

</head>

<body>

</body>

</html>



そしてブラウザの【リロード(更新)】を押します。

Chrome(クローム)のリロードボタン
[リロード(更新)]



タイトルタグを編集してタブに文字を表示させる
[タイトルタグを編集]



どうでしょう。タブに文字が反映されましたか？


わかりにくいですかね？(笑)


では、<body>(ボディタグ)の間に次のタグ<h1>(エイチワンタグ)を貼り付けて、<h1>(エイチワンタグ)の間の[だみーてきすと]を好きな言葉に打ち替えてください。終わったら【保存】をして、ブラウザの【リロード(更新)】をしてください。

<h1>だみーてきすと</h1>

【参考 コード】

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>かなきちブログ</title>

</head>

<body>

  <h1>かなきちブログのタイトル</h1>

</body>

</html>



h1タグを使い大きな見出しを表示させる
[h1タグを使い大きな見出しを表示させる]



入力した文字が大きめに表示されましたね。バッチリです！

画像を表示させよう

イメージタグを使い画像を表示させます。



次の画像をtest.htmlと同じ場所に保存してください。
画像の名前は「sample.jpg」とつけてください。
※保存方法は、右クリック→名前をつけて保存でも、画像をドラック＆ドロップで落としてきても大丈夫です。



画像を貼り付けるには<img src="">(イメージタグ)を使います。このタグの特徴は【２つで１つ】でないこと。イメージタグのように単独で行動するタグも稀にあります。



先ほどコピペしたh1タグの下に以下のコードを貼り付けてください。

<img src="sample.jpg">

【参考 コード】

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>かなきちブログ</title>

</head>

<body>

  <h1>かなきちブログのタイトル</h1>

  <img src="sample.jpg">

</body>

</html>

そして【保存】→【リロード(更新)】。

imgタグで画像を表示させる
[imgタグで画像を表示させる]



画像が表示されましたね！サイトみたいになってきましたね！

リンク(URL)をサイトに貼ろう

最後に[リンク(URL)]を貼ってみましょう。
[リンク(URL)]というのは、ネットワーク上での住所のようなものです。他ページを見て欲しい時や参考サイトを見て欲しい時に使うことができます。



今回は、先ほど貼り付けた画像にリンクを貼ってみましょう。リンクは<a href="">(エータグ)を使います。リンクを貼りたい文字や画像を開始タグと終了タグで囲むように設置します。
また、href=""の[ ” ]の間にリンク(URL)を貼ります。

<a href="【リンク(URL)】">【文字とか画像が入ります】</a>

【参考コード】

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>かなきちブログ</title>

</head>

<body>

  <h1>かなきちブログのタイトル</h1>

  <a href="https://mimipen.hateblo.jp/"><img src="sample.jpg"></a>

</body>

</html>

そして【保存】→【リロード(更新)】。

画像や文字にリンク(URL)を貼る方法
[画像や文字にリンク(URL)を貼る方法]



画像の上で矢印から指差しマークに変わりましたか？指差しマークがリンクを貼れたことの印です。そして、画像をクリックすると指定したリンク先にきちんと飛びましたかね。

まとめ

いかがでしたでしょうか？難しいと思いましたか？わからないところはありませんでしたか？わからないところがありましたらお気軽にご質問ください。



今回は第4回目として、超初級編 ブラウザに文字や画像を表示する方法を書かせていただきました。



今回の内容は、テキストエディタを.htmlと言う拡張子で保存し、Chrome(クローム)にドラック＆ドロップしてファイルを表示させました。そして最後に、ファイルを再編集して文字や画像、リンクをタグを使って表示させましたね。



次回は、今回出てきたタグの説明をしていきたいと思います。
最後までご覧いただきありがとうございます。



この記事がいいなっと思ったら読者登録をお願いいたします♪



【ツイッターでは、仕事のことなどをつぶやいています】
技術者の方ともっと繋がりたいっす！お気軽にフォローもお願いします！
かなきち(@kanakichi0801)
かずん(@kazoonLab)

JavaScript【let / const】をサンプル付きで解説！

JavaScript かずん

JavaScriptの第一歩　変数宣言(var / let / const)について
こんにちは、かずん(@kazoonLab)です。


前回の記事では、「JavaScriptのスコープ」についてお話ししました。


今回は、スコープと密接にかかわる、「var / let / const」についてです！



かずん

この記事を読むと次のことがわかるよ！

  • var / let / constそれぞれの使い方
  • かずん流　宣言のベストなやり方



はじめに


そもそも変数とは何か、という話に関しては今回は触れません。今回は、「var / let / const」それぞれの振る舞いが、どのように異なるかを見ていきたいと思います。


変数の基礎的な部分が分からなければ、このリンクが参考になるかと思います。


それぞれの使い方

varとは

varは、古くから変数宣言に用いられてきました。


varは、以下の特徴を持ちます。
・初期化不要
・関数スコープである
・巻き上げが発生する
・再定義できる
・再代入できる


スコープについては以下の記事にて触れていますので、そちらをご覧ください。
blog.mimipen.net


それでは、例を見てみましょう。

// グローバルな変数を定義
var global;(1)
global = 'global';

function globalFunc () {
	// 関数内でローカルな変数を定義
	var local = 'local';(2)
	console.log(global); // --> global
	console.log(local); // --> local
};

console.log(global); // --> global
console.log(local); // --> (Error)(3)

// グローバル変数に再代入する
global = 'global2';
console.log(global); // --> global2

// グローバル変数を再定義する
var global = 'global3';
console.log(global); // --> global3(4)

// 巻き上げを確認する(5)
console.log(newGlobal); // --> undefined
var newGlobal = 'newGlobal';
console.log(newGlobal); // --> newGlobal;


変数の初期化とは、変数宣言と同時に値を代入する行為を指します(上記②のように)


(1)では変数宣言のみ行い、値の代入はしていません。この場合、変数globalはデフォルト値undefinedで初期化されます。


関数globalFunc()内で変数localが宣言されている(2)ため、この関数の外からは変数localは参照できません。(3)


(4)のように、varで宣言された変数は再定義できます(できてしまいます)。変数を多重に宣言することは、意図しないコードの挙動(バグ)の原因となり得ます。


また、varには「巻き上げ」という仕様があります。これは、「あるスコープの中で宣言された変数は、スコープのどの位置で宣言されようとも、スコープの戦闘で宣言されたことになる」というものです。


(5)以下の挙動は、以下のコードと同じになります。

var newGlobal;
console.log(newGlobal); // --> undefined(6)
var newGlobal = 'newGlobal';
console.log(newGlobal); // --> newGlobal;


(6)でundefinedな値を参照していますがエラーになっていません。これも、意図しない挙動といえるでしょう。


では、次にletを見ていきましょう。

letとは

letは、varの不安定な箇所を補うべく誕生しました。


letは、以下の特徴を持ちます。
・初期化不要
・ブロックスコープである
・巻き上げが発生するが、エラーになる
・再定義できない
・再代入できる


例を見てみましょう。

// 初期化せず宣言
let global;(1)
// 代入前の変数呼び出しはエラーになる
console.log(global); // --> (error)(2)
global = 'global';(3)

// 初期化して宣言
let global2 = 'global2';
console.log(global2); // --> global2
global = 'global';

if (true) {
	// ブロック(if文)の中でローカル変数を宣言
	let local = 'local'
	console.log(local); // --> local
}

// ブロックの外からは、ローカル変数は参照できない(4)
console.log(local); // --> (error);

let global3 = 'global3';
// 再定義はNG
let global3 = 'global4'; // --> (error)
console.log(global3);

let global4 = 'global4';
// 再代入はOK
global4 = 'global5';
console.log(global4); // --> global5


varと同様、初期化せず宣言した変数はundefinedで初期化されます(1)。ただし、(3)で初期化する前に変数の呼び出しをするとエラーになります(2)。ここがletとvarで異なるポイントです。


厳密にいえば、巻き上げは発生しているのですが、代入前の参照はエラーになるという仕様となっています。


(4)のように、ブロック内で宣言した変数は外から参照できません。このため、ブロック外での意図しない更新を防ぐことができます。


最後に、最も厳密な宣言「const」を見ていきましょう。

constとは

constは、letよりも厳密な変数宣言を行うべく誕生しました。


constは、以下の特徴を持ちます。
・初期化が必要
・ブロックスコープである
・巻き上げが発生しない
・再定義できない
・再代入できない(例外有り)


例を見てみましょう。

// 初期化しない変数宣言はエラー
const global; // --> (error)

const global = 'global';
// 再定義はエラー
const global = 'global2'; // --> (error)
// 再代入もエラー
global = 'global3'; // --> (error)

const global = 'global';
if (true) {
	const local = 'local';
	console.log(local); // --> local
}
console.log(local); // --> (error)


constで宣言される変数は、宣言と同時にに初期化しなければならず、また再代入・再定義できません。


またブロックスコープであるため、ブロック外からの参照もできません。巻き上げについても、宣言と


一見すると不便なように見えますが、実はとてもありがたい存在なのです。その理由を考えてみましょう。


ある変数がconstで宣言されていて、かつソースコードにエラーが発生していない場合、


「この変数は絶対にほかの場所では使われていない。また、この変数は常に最初の値のままである」


と考えることができるでしょう。つまり、ソースコードを書く人は、意図しない参照を防ぐ(しようとするとエラー)ことができます。


一方。ソースコードを読む人は、ブロック内のconst変数は常に変わらない(*)と信じて読むことができます。


まとめると、constを利用することで、書き手・読み手双方の心理的負担、また費やす時間を削減することができるのです。


(*)プリミティブな値(数字、文字列、...)は再代入できませんが、オブジェクトや配列の中の値の更新はできてしまいます。

const obj = { key: 'value' };
// 中の値の更新はエラーにならない
obj.key = 'value2'; // --> (ok, { key: 'value2' })
// オブジェクトそのものの更新はエラーになる
obj = { key: 'value2'} // --> (error)

// 配列も同じ
const arr = [0, 1, 2];
arr[0] = 1; // --> (ok, [1, 1, 2])
arr = [3, 4, 5]; // --> (error)


まとめ


ここまで、var, let, constそれぞれの特徴について見てきました。


あくまで私の意見ですが、コーディング時にきちんとエラーを出してほしい、また読むときになるべく苦にならないように、


「原則宣言はconstで行い、再代入の必要があればletを使う」


のが良いのではないかと思います。varには別れを告げてしまいましょう。


この記事を読んでくださった方のソースコードが、よりよくなることを願ってやみません。


最後までご覧いただきありがとうございます。


この記事がいいなっと思ったら読者登録をお願いいたします♪


【ツイッターでは、仕事のことなどをつぶやいています】
技術者の方ともっと繋がりたいっす！お気軽にフォローもお願いします！
かなきち
かずん

Google Chromeオススメ拡張機能 3選！WEB担当必見です！

未経験でWEB業界 かなきち

ブラウザとは？からGoogle Chromeのダウンロード方法・オススメ拡張機能を画像付きで解説！

こんにちは、かなきち(@kanakichi0801)です


技術系記事、第３回目です。


↓この記事の続きです
blog.mimipen.net


今回は、web業界の方だけではなく、仕事でパソコンをという方全てに向けての記事になります。



かなきち

この記事を読むと次のことがわかるよ！

  • ブラウザとは？
  • グーグル クロームのインストール方法
  • グーグル クロームのデベロッパーツールと拡張機能の紹介




ブラウザとは？

「ブラウザ」っ聞いたことありますか？ 聞いたことない人もこの言葉は覚えてくださいね。


ブラウザとは、インターネット上にあるウェブページの情報、表示する閲覧ツールのことです。


ホームページを作るものとして、このツールが使えない、またはネットが使えないと仕事になりません。ホームページを作る上で最重要ツールと言っていいでしょう。


Windowsであればパソコンを購入した時点で[Internet Explorer(IE)]が、macであれば[Safari(サファリ)]が標準搭載されています。


しかし、この２つはWEB開発者にとって使いにくいブラウザとなっております。。。


そこでオススメするのが「Google Chrome(グーグル クローム)」と言うブラウザです。WEB業界で仕事をしている方の9割は、こちらのブラウザを使っていることでしょう。それぐらい使いやすく、WEB開発者向けの便利な機能がそろっています。


※今後このブログでは、Google Chrome(グーグル クローム)ではなくChrome(クローム)と略します。

Chrome(クローム)をインストールしましょう

さっそく、Chrome(クローム)をインストールしてください。
インストールリンク


URLをクリック後、【Chromeをダウンロード】をクリックします。

【Chrome(クローム)のインストール画面】
【Chrome(クローム)のインストール画面】


画像を見てもダウンロードの仕方がわからないという場合は、以下に参考サイトを載せておきます。
参考リンク


ダウンロードしたらChrome(クローム)を開いてみましょう。


【Chrome(クローム)最初の画面】
【Chrome(クローム)最初の画面】
このような画面が立ち上がりましたか？
立ち上がったら[Googleで検索またはURLを入力]部分に文字などを入力して検索をしてみましょう。検索ができましたら、これでChrome(クローム)の準備は完了です。


よく使いますので、Chrome(クローム)を既存ブラウザに設定しておきましょう。
既存ブラウザに設定する方法は、以下を参照してください。
参考リンク

知らないと損！Chrome(クローム)の便利機能

Chrome(クローム)には、便利な機能が検索やブックマークなどの標準機能の他にもたくさんの機能が備わっています。その中でもよく使う機能のさわりを２つ説明して今回は終わりにしたいと思います。


  • デベロッパーツール(開発者ツール)
  • 拡張機能(Extensions)

デベロッパーツールとは？

全部説明すると本が書けるので、簡単に説明するとホームページを表示させるためのコード(文字列)を表示し、どのようにコードがブラウザに反映させているか一目でわかるようにする機能です。


例えば機械を組み立てるとして、機械の中身がどんな部品で出来ていて、どのように配置されているかわからないと作れませんね。ホームページも同じで中身がわからないと作れません、ではどのように中身を知るのか？


デベロッパーツールが、ホームページの部品や配置を教えてくれる役割をします。


デベロッパーツールには、他にもたくさんの機能がありますが、またの機会に説明させていただきます。

拡張機能とは？

簡単にいうと、Chrome(クローム)の機能を増やしたり強化したりする追加ツールです。ツールの種類は、ショッピングやブログ、仕事の効率化まで様々。


私がよく使うツールを3つピックアップしました。

Awesome Screenshot

chrome.google.com
ページをキャプチャーする拡張機能ですが、キャプチャーした画像にその場で文字を入れれるすぐれもの。仕事の効率化に一役買っています。


ページをキャプチャーし、指示をそこに直接書いて、外注さんとやり取りしています。文章でやり取りするよりもわかりやすく時短にもなります。

The QR Code Extension

chrome.google.com
ページのバーコードを表示してくれる優れもの。


パソコンで見ていたサイトをスマホでも見たいそんな時ありませんか？スマホのカメラ機能か、バーコード読み取り機能を使えば簡単にそのサイトにアクセスすることができます。


スマホで同じサイトをまた調べたり、URLをいちいち入力する手間が省けますね。

Chrome Add-on for Hatena

chrome.google.com
はてなブログユーザー専用ですが、ブログの装飾やSEO対策にもなるちょっとした拡張機能。


はてなブログの記事で[大見出し]をクリックするとタイトルがh3タグになり、h1→h3と並んでしまいます。タグの順番として、h1→h2→h3の順番にしないとGoogleがらペナルティを受けます。


この拡張機能はh2に設定してくれる機能や背景をグレーにしてくれるなど、痒いところに手が届く拡張機能です。


他にも拡張機能はたくさんあるので、気になった方はぜひ、以下のリンクから見てみてください。
参考リンク


最後までご覧いただきありがとうございます。


この記事がいいなっと思ったら読者登録をお願いいたします♪


【ツイッターでは、仕事のことなどをつぶやいています】
技術者の方ともっと繋がりたいっす！お気軽にフォローもお願いします！
かなきち
かずん

WEB業界への転職をお考えの方へ初任給相場とおすすめのPCを紹介！

未経験でWEB業界 かなきち

WEB業界の職種とその役割とは？初任給の相場も公開ちゃいます！

こんにちは、かなきち(@kanakichi0801)です


技術系記事、第２回目です。




かなきち

この記事を読むと
WEB業界の職種とその役割、各職種の初任給相場が分かるよ


関わる職種とその役割

WEB業界の主な職種は3種類。


・WEBディレクター
・WEBデザイナー
・コーダー


役割はそれぞれ違いますが、作るといった部分では同じでしょうかね。


会社によって職種が少なかったり、多かったり。


役割が若干違うなどもありますが、基本となる説明をしていきます。


ちなみに私の会社は少人数なので、役職はWEBデザイナーですがディレクション、デザイン、コーディング全て行います。

WEBディレクターとは

WEBディレクターとは
案件をまとめ、デザイナー、コーダーに指示を出すお仕事です。


また、スケジュール管理やクライアント先に行って必要な情報を聞き出すことも仕事の一つです。

WEBデザイナーとは

WEBデザイナーとは
ディレクターが作りたいものを、目に見える形にデザインするお仕事です。


会社によっては、デザイナーがワイヤーというサイト設計図を描くことがあります。


作業ソフトは、Photoshop・Illustrator・最近だとXDなど

コーダーとは

コーダーとは
デザイナーが作ったデザインをブラウザ(検索して出てくる画面)にWEBページとして表示させるお仕事です。


作業ソフトは、テキストエディタ、FTP／SFTP／FTPS接続するソフト。


職種ごとの転職難易度

WEBディレクター(☆☆★)

他のWEBデザイナー、コーダーと比べれば、比較的なりやすい職種でしょう。


ただ、入社後は努力が必要な職種です。


なぜか？


デザインのこと、コーディングのことを理解しないといけないからです。


なにより理解していないと、クライアント先に行っても話になりません。


クライアントが求めていることは、WEBのプロとしての着目点や問題に対しての提案です。


未経験からのWEBディレクターの給料は、25万〜といったところでしょうか。


ディレクターは、クライアントと話すことが多いので、営業職からWEBディレクターになる人も多くいます。面接などでは、コミュニケーション能力について問われることも多いでしょう。

WEBデザイナー(★★★)

厳しいことを言いますが、未経験からWEBデザイナーに簡単になれるものではありません。


WEBデザイナーになるには、最低でもポートフォリオ(作品集)とデザイン学校を卒業したことが必須条件でしょう。


現役デザイナーと同じレベルの作品が作れれば話は別でしょうが。


未経験からWEBデザイナーの給料は、23万〜といったところでしょうか。


お給料にもそんなに差がないのに、WEBデザイナーの敷居がなぜ高いのか？


デザインはホームページの顔となる部分です。デザインがよくてサイト制作を依頼されることもあります。そのため採用が慎重になります。

コーダー(☆★★)

転職難易度は中です。就職前にホームページが作れれば内定も夢ではありません。


未経験のコーダーの給料は、21万〜といったところでしょうか。


私は最初、デザイナーになりたかったのですが、採用の基準がやはり高く最初はコーダーとしての内定でした。


その後、コーディングをやりながらデザインの仕事を少しずつもらい、転職のタイミングでデザイナーとして採用されました。


頑張ればデザイナーになることはできますが、デザイン経験がないのであれば、まずコーダーを目指すべきだと思います。


コーダーといってもコーディングだけではホームページは作れませんね。


多少デザインも入れていきますし、物作りが好きであればコーディングも楽しい仕事です。


また、WEBデザイナーになるのにも、コーディングの知識は必要ですので、参考にしていただければ幸いです。


コーダーになるために必要なもの

最初に必要な知識はありません！マウスが動かせて文字が打てれば大丈夫です！また、言うまでもなくパソコンは買いましょう。


新しく買うのであれば、イラストレーターやフォトショップが使えるものを購入してください。


Windowsであれば、CPUとグラフィックを重視して買いましょう。


また、同じぐらいの値段であれば、私はMacを推奨します。


一番最初にMacを購入しました。

Apple iMac (27インチ, Retina 5Kディスプレイモデル, 3.0GHz 6コア第8世代Intel Core i5プロセッサ, 1TB) (最新モデル)

Apple iMac (27インチ, Retina 5Kディスプレイモデル, 3.0GHz 6コア第8世代Intel Core i5プロセッサ, 1TB) (最新モデル)


今では、MacBook Proをディスプレイに繋げて作業しています。

Apple MacBook Pro (13インチ, 第8世代の2.4GHzクアッドコアIntel Core i5プロセッサ, 256GB) - スペースグレイ (一世代前)

Apple MacBook Pro (13インチ, 第8世代の2.4GHzクアッドコアIntel Core i5プロセッサ, 256GB) - スペースグレイ (一世代前)


家で作業するのが決まって入ればiMacを、持ち歩きたいのであればMacBook Proをオススメします。
※MacBook Airでは、イラストレーターやフォトショップは動きませんのでご注意を！


まとめ

今回は、WEB業界の職種や転職のしやすさについて説明させていただきました。WEBデザイナーが一番難しいなんて意外だったのではないでしょうか？ デザイナーにもいろんなパターンがいて、感性で作るデザイナーと考えて作るデザイナーがいます。私はおそらく後者でしょうね。
次は「コーディングの初歩」について記事にしていきます。


最後までご覧いただきありがとうございます。


この記事がいいなっと思ったら読者登録をお願いいたします♪


【ツイッターでは、仕事のことなどをつぶやいています】
技術者の方ともっと繋がりたいっす！お気軽にフォローもお願いします！
かなきち
かずん

JavaScriptのスコープ(scope)を解説！【global・functional・block】

JavaScript かずん

JavaScriptのスコープ(scope)を解説！【global・functional・block】
JavaScriptの「スコープ」について


はじめまして、かずん(@kazoonLab)と申します。


私の担当する記事では、主にJavaScript(JS)まわりの技術や、各種ツールの紹介をしていく予定です。プロフィールはこちらに載っているので、そちらをご覧ください。


本日は、JavaScriptの基本、「スコープ」について紹介していきます！


スコープとは


JavaScriptのスコープ(scope)とは、「ある変数や関数の引数を参照・更新できる範囲を示したもの」です。


スコープ内で定義された変数はスコープの中でのみ参照することができます。逆に言えば、スコープの外では参照することはできません。


JSには様々なスコープがあります。まずは、一番大きな「グローバルスコープ」の例を見てみましょう。

グローバルスコープ(global scope)

// グローバルな変数を定義
var global = 'global';

// グローバルな関数を定義
function globalFunc () {
	console.log('This var is ' + global);
};

// 関数を呼び出す
globalFunc();  // --> This var is global

// 変数を更新し、関数を呼び出す
global = 'grobal2';
globalFunc();  // --> This var is global2


グローバルな変数は、プログラムのあらゆる場所から値を参照・更新できます。


一見よさげに見えますが、意図せず値を書き換えてしまったりする恐れがあります。


変数がどこまで有効であるかをハッキリさせるため、JSには「関数スコープ」というものがあります。


サンプルソースを見てみましょう。

関数スコープ(functional scope)

// グローバルな関数を定義
function globalFunc () {
	// 関数内でローカルな変数を定義
	var local = 'local';
	// 関数内でローカルな関数を定義
	function localFunc () {
		console.log('This var is ' + local);
	}
	// ローカルな関数を呼び出す
	localFunc();
};

// グローバルな関数を呼び出すと、ローカル関数が呼び出される
globalFunc();  // --> This var is local

// グローバル関数を経ず直接ローカル変数・ローカル関数を参照・実行することはできない
console.log(local);  // --> undefined
localFunc();  // --> undefined

// ローカル変数と同じ名前で変数を定義しても、ローカル変数には影響はない
var local = 'not local';
console.log('This var is ' + local);  // --> This var is not local
globalFunc();  // --> This var is local


関数スコープを用いると、影響範囲を関数の中だけに限定した変数・関数を定義できます。


関数の外で値が更新されることはないため、プログラムの保守性がぐんとあがります。


大事なこととして、変数を宣言する際、必ず「var」をつけてください。こちらは、後ほど出てくるlet, constと合わせ、次回の記事で紹介したいと思います。


最後に、関数スコープと似て非なる「ブロックスコープ」を紹介します。

ブロックスコープ(block scope)

ブロックスコープとは、{}を書く文で作られるスコープを指します。
具体的には、if, else, for, while, switch, try, catch, ... などです。
例を見てみましょう。

// グローバルな関数を定義
function block() {
        // var を用いてローカル変数を宣言
	var localVar = 'localVar';
        // let を用いてローカル変数を宣言
	let localLet = 'localLet';

	if(true) {
                // ブロック(if文)の中でローカル変数を上書き
		var localVar = 'localVar2';
		let localLet = 'localLet2';

		console.log('if文の中ののlocalVarは' + localVar);  // --> if文の中ののlocalVarはlocalVar2
		console.log('if文の中ののlocalLetは' + localLet);  // --> if文の中ののlocalLetはlocalLet2
	}

        // ブロックを通った後、localVarは更新されているのに対し、
        // localLetは最初に宣言したままの値が入っている
	console.log('if文を抜けた後のlocalVarは' + localVar);  // --> if文を抜けた後のlocalVarはlocalVar2
	console.log('if文を抜けた後のlocalLetは' + localLet);  // --> if文を抜けた後のlocalLetはlocalLet

}

block();


ブロックスコープを用いることで、ブロックの中でのみ参照できる変数を作ることができます。


関数スコープよりさらに小さい感じがしますね。


なお、ブロックスコープを作る際は、変数をlet、もしくはconstで宣言する必要があります。


let、constの説明は、次回の記事でより詳細にしたいと思います。


まとめ

様々なスコープを見てきましたが、より影響範囲の小さい(バグの出にくい)変数を作るため、なるべくブロックスコープを使えると良いかと思います。


当然、関数全体で使用するなら関数スコープを使わなければなりませんし、windowオブジェクトのようにそもそもグローバルな変数なものもあります。


「この変数はここでしか使わない」という小さな判断の積み重ねが、可読性の高い、整然としたソースコードにつながっていくことでしょう。


次回の記事では、接頭辞(var / let / const)の性質についてとことん語ります！


最後までご覧いただきありがとうございます。


この記事がいいなっと思ったら読者登録をお願いいたします♪


【ツイッター】
技術者の方ともっと繋がりたいっす！お気軽にフォローもお願いします！
かなきち
かずん

現役WEBデザイナーがWEB業界のお給料や転職のしやすさなど、よくある疑問に答えます！

未経験でWEB業界 かなきち

WEB業界のよくある疑問からお給料や転職のしやすさまで大公開！
こんにちは、かなきち(@kanakichi0801)です


技術系記事、第１回目です。



かなきち

この記事を読むと
手に職をつけるべき理由とWEB業界の残業事情、給料の上がり方、転職のしやすさが分かるよ




はじめに、手に職をつけるべき理由

現在AIの技術が進んでいます。ロボットに職が奪われるのがSFだけの話ではなくなってきているのです。これまでパソコンを触れなくても働いて来れた人もそうでなくなる時代が来ます。


パソコンを触ったことがない人は、使い方がわからない、ネットサーフィンしかしてないなど。活用しきれていない人も多いのではないでしょうか？


WEB業界も今後必ずなくならないとは言いませんが、パソコン活用するきっかけとして楽しみながらホームページ作りをしてみませんか？


ホームページは難しいイメージがあるかもしれませんが、私がブログで少しずつ解説していきます。


参考書をお金を出して買うのもいいですが。


私のブログでは、今の現場で実際に使っている知識や勉強法を、パソコン触りたての人でもわかるように解説していきます。

今後書いていく内容

最初に、私の説明をさせていただきます。


未経験・独学でWEB業界に入り、今はコーダー・デザイナー・ディレクターとして小さい会社で働いています。ほんとかよ！と思うかもしれませんが、人数が少ない分できる人が全部やる感じです。あと動画の編集もやりますね(汗)


これまで大手(上場企業)から小さい会社(10人〜30人)まで計4社経験してきました。今の会社では、採用時のスキルチェック行っています。また、3社で会社のコーディングガイドラインを作りました。


そのため、「未経験でWEB業界」というカテゴリーでは、HTML・CSSの書き方、ホームページのデザイン方法(Photoshop・Illustrator)、プラグインの使い方、ポートフォリオの作り方、面接対策までを記事にしていきます。


特に以下の人に向けて記事を書いていきます。

  • 手に職をつけたい
  • パソコンを買ったけど活用方法がわからない
  • 独学でWEBデザインを勉強したい
  • 未経験でWEBデザイナーになりたい
  • 未経験でWEBコーダーになりたい
  • ブログのカスタマイズをしてみたい
  • 簡単にできるSEO対策を知りたい
etc...

ブログのコンセプト

コンセプトは２つあります。

コピペができればホームページは作れる

「コピペができればホームページは作れる」。現場の人に怒られてしまいそうですが、周りやこれまでの後輩にも同じことを言ってきているのでこれは崩さずにいきます。ブラインドタッチができなくてもホームページは作れますし、やる気さえあればWEBデザイナーにもなれます。最初はコピペができればOK！少しづつやって行きましょう！

覚えるべき知識だけ載せる

「覚えるべき知識だけ載せる」。参考書や個人のブログにある現場で使わない知識は載せません、覚える時間が無駄になるので。このブログを読めば最短でホームページが作れるようになるという内容を書いていきます。

WEB業界の裏話

最近の話だと、「わたし、定時で帰ります。」など、WEB業界の話が身近ですよね。


WEB業界って残業が多いの？ お給料っていくらなの？目指すならこんなことも考えますよね？

WEB業界って残業が多いって本当？

WEB業界ってブラックなの？残業は多いの？休めるの？
残業はそんなに多くないです。休日出勤もありません。


これまで、4社に勤めてきましたが、残業が多かったのは最初の会社のみ。


それも働き方改革の前でした。


3社は、基本定時で上がっていましたね。残業代つかないので。


え！？残業代つかないの？


完全にないとは言いませんが、「みなし残業」や「裁量労働制」を取り入れている企業が多いです。


クリエイターは、作業をこなしていれば仕事が終わるわけではありません。納期があったり、アイディアが出なかったり、戻しがあったり。


残業時間が想定できないぶん、この制度が許されている業界なんです。
みなし残業とは？


残業して稼ごうと考えている人は向かないですね。。。

お給料の上がり方について

お給料の上がり方について。WEBデザイナーの昇給、給料アップ
私の話でいいますと、新卒当時と比べると4年で年俸が150万上がりました。


将来は独立もできるし、在宅ワークや副業もしやすい業界なので悪くない金額かと。


私の友人のWEBエンジニアは28歳で年収1200とか言ってましたね。夢がある業界だと思います。


ただ、実力社会ではあるので人によっては給料が上がらない場合もあります。


年功序列ではない業界です。

転職について

転職について WEB業界の転職事情
転職はしやすいです。


未経験から入るのには勉強が必要ですが、一度業界に入れば転職しやすいです。ちゃんとやっていれば面接でまず落ちません。


特に、人手不足なのが要因かもしれませんね。

どんな人が向いてるの？

ものづくりが好きな方なら、楽しみながら仕事ができると思います。


他の記事でもよく書いているように、業界の移り変わりが激しいので、常に情報を吸収できる人が向いています。


たくさんの技術が常に生み出されているので、学ぶことにつきない業界です。

まとめ

WEB業界のよくある疑問について説明させていただきました。次の記事は、「WEB業界に携わる人の職種と役割と職種ごとのお給料の相場」について記事にしていきます。


最後までご覧いただきありがとうございます。


この記事がいいなっと思ったら読者登録をお願いいたします♪


【ツイッター】
技術者の方ともっと繋がりたいっす！お気軽にフォローもお願いします！
かなきち
かずん

はじめまして、みみぺんクリエイターズ(MiMiPEN)と申します。

みみぺんクリエイターズ 商品開発アプリ開発をしています。


はじめまして、「MiMiPEN(みみぺんクリエイターズ)」と申します。
「クリエイター仲間で集まって、なんか面白いことしようよ」というコンセプトのもと。


クリエイター仲間でブログを始めました！


「二人で一人の天才」という著書に共感してます。
自分一人では到達できない答えに仲間で挑めば怖くないとの考えのもと、固定概念にとらわれないでアイディアを出し合っています！

POWERS OF TWO 二人で一人の天才

POWERS OF TWO 二人で一人の天才

グーグルもアップルもソニーも、なぜ「2人で起業」? あらゆるイノベーションは、「2人組」から生まれる?


ブログは主に、WEBデザイナー、エンジニア、プログラマー向けの記事を投稿します。

ライターを紹介

No.1 かなきち(24♀)

制作会社勤務現役WEBデザイナー


Youtubeがとにかく大好きで、気づくと見てます(病的)


みみぺんの活動が気に入ったらツイッターにリプライで[最初の記事を見た]とください！まずは、お知り合いから！

経歴

コーディング育ちなのでデザインもやるけどコーディングのが得意。進行管理とかアイディア出すことが比較的得意なので、みみぺんクリエイターズで製品の企画やブランディングを主にやっております。

記事コンセプト

未経験からWEB業界に入っているので、未経験からWEB業界に入るにはというコンセプトで初心者向けの記事を書いていきます。

分野

  • 言語・CMS（HTML、CSS、PHP、jQuery、WordPressなど）
  • デザイン（Photoshop、Illustrator、XD）
  • 動画（AE）
  • その他ディレクション・仕事の効率化・転職・面接対策など

No.2 かずん(24♂)

SIer勤務WEBエンジニア


お酒とラーメンとゲームが大好き。


最近、お腹周りが気になるのでプチ断食＋筋トレ始めました。

経歴

大学卒業後、SIerに勤務。といいつつも、本業はフロントエンドで、サイトコーディングやWEBアプリ開発業務に関わっています。 みみぺんクリエイターズでは製品の設計・開発を担当しています。

記事コンセプト

私が普段利用するJavaScriptを中心に、フロント周りの技術やツールの紹介をしていきます。

分野

言語・CMS（HTML、CSS、JavaScript(Native、React)、Movable Type）


No.3 いちご(24♂)

ゲームプログラマー

のちのち登場します。


真面目に書いていきますので
読者登録いただけたら嬉しいです！


技術者の方と積極的に繋がりたいので
ツイッターも積極的にやっていきますので！
お気軽にフォローをお願いいたします！
かなきち🍣webデザイナー (@kanakichi0801) | Twitter
かずん🍺webエンジニア (@kazoonLab) | Twitter