"プログラミング初心者"が「文字数チェッカー」作ってみた!

作ってみたのアイキャッチ画像 プログラミング
アキラ
"プログラミング初心者"ができるだけ早く上達するためには、とりあえず何か作ってみること!

だと思っています、アキラ(@akila_s8)です!

とにかく手を動かして、簡単なものから作っていくことが大切だと考えているので、簡単な「文字数チェッカー」を作ってみました。

また、文字数チェッカーを作っているときに「新しく学んだこと」備忘録として、このエントリーにまとめておきます。

まあ、ボクはプログラミング初心者なので、基本的なメモしかないとは思いますが。

アキラの文字数チェッカー

"プログラミング初心者"のアキラが作った文字数チェッカー

ということで、作ってみました!
「アキラの文字数チェッカー」です。

使用した言語は、HTML/CSS/JavaScriptの3つです。

文字を入力すると、左下の「残り文字数」が減っていきます

こんなかんじ↓

最大文字数を140文字に設定しています。
そして、残り文字数が10文字になると、「残り文字」というように、文字数の色が赤くなります。

こんなかんじ↓

この、指定した文字数を下回った時に、文字を赤色にするのは、"ドットインストール"の「JavaScriptで文字数チェッカーを作ろう」を参考にしています。

今回の「アキラの文字数チェッカー」は、基本的にドットインストールの「文字数チェッカーを作ろう」レッスンを参考に作りました。

ただ、このレッスン通りに作成すると、改行やスペースも「1文字」としてカウントされてしまう仕様になっていました。
改行やスペースを文字数に含めたくなかったので、そこを改善してみました。

その成果がこちら↓

なんとか、改行やスペースをしても、文字数が減らないように改良することができました
これは、自分でいろいろ調べてコードを打ち直したので、ちゃんと機能したときは、小さなことだけどものすごく達成感を感じました!

そしてもう一つ、自分で考える&調べて、コードを打ったものがあります。
右下の「チェック」ボタンをクリックすると、入力されている文字数を表示させる機能をつけてみました。

それがこんな感じ↓

「チェック」をクリックすると、入力されている文字数を確認することができます。
これも、ドットインストールのレッスンにはない機能で、自分で考えながら作ってみたので、上手く機能したときはとても嬉しかったです!

アキラ
自分で考えたものが、実際に作れた時の達成感は最高!

Progateとドットインストールだけで作れました!

プログラミングのイメージ画像

今回作った「文字数チェッカー」は、主にドットインストールの「JavaScriptで文字数チェッカーを作ろう」を参考にしました。

とにかくプログラミング初心者は、マネしながら、「とりあえずモノを作っていく」ことが大切かなと思って、上のレッスンを参考に、そして少し自分で仕様や機能を変更するという練習をしました。

今回の「アキラの文字数チェッカー」は、以下のような工程を踏めば、簡単に作れるのかなと思います。

文字数チェッカーを作るまでの工程
  1. Progate「HTML&CSS」の基礎的知識を身につける
  2. Progateで「JavaScript」の基礎的知識を身につける
  3. ドットインストール「JavaScriptで文字数チェッカーを作ろう」を1周やってみる
  4. ドットインストールを参考に、自分の考える「文字数チェッカー」に仕様やデザインを変更していく
  5. 分からないことや改善したいことはググる

"プログラミング"初心者は何から勉強を始めれば良いのか?

2018.07.06

"ドットインストール"を使えば「作る流れ」を体感できる!

2018.07.13

けっこうマネしている部分も多いですが、Progateやドットインストールでは触れられていないコードも利用しているので、ちょっとだけ「自分で作った感」を感じられています。

今回、実際にモノを作ってみて分かったのは、「調べればなんとかなる」ということです。
やっぱり、実際にコードを打って作ってみることが大事ですね!

アキラ
自分で考えた構想を実現できるのって楽しいですね!

"プログラミング初心者"アキラの備忘録

プログラミングのイメージ画像

「文字数チェッカー」を作っている際に、自分で調べて学習したプログラミング知識を、ここにまとめていきます。

もちろん、プログラミングに詳しい人にとっては、当然の内容がほとんどだとは思いますが。
「頭に定着させるためにはアウトプットが大事」なので、自分がプログラミング初心者から脱出するためにも、ここにメモしておきます。

HTML

dir属性
<textarea dir="ltr"></textarea>→左から右へ記述することを意味している

<textarea dir="rtr"></textarea>→右から左へ記述することを意味している(例:アラビア語、ヘブライ語)

placeholder属性
「placeholder属性」入力に関するヒントをユーザーに与えるための短めのテキスト(初期表示されるテキスト)

<textarea placeholder="ここに文字を入力してください!"></textarea>

CSS

box-sizingプロパティ
「box-sizing: border-box;」
指定したwidth,heightの通りに要素を合わせてくれる

例)width: 500px;の時→textarea{box-sizing: border-box;}なら、入力欄の幅も500pxになる

inputのbutton「border-radious」
Chromeだと、「border-radious」を指定してしまうと、変な影が登場してしまう→適当なborderを設定すると改善する

JavaScript

getElementByID
「getElementById」…指定したid要素Elementオブジェクトとして返すメソッド
クリックイベント
btn.addEventListener('click',function(){btnがクリックされた時に起きるイベント内容});
アキラ
これからもいろいろ作っていこうー!