基本を身につける→半分くらい理解出来たらとりあえず何か作ってみる」って流れが、プログラミングを早く上達させるコツなのかも。2018とにかく手を動かして、簡単なものから作っていくことが大切だと考えているので、簡単な「文字数チェッカー」を作ってみました。文字数チェッカーを作っているときに「新しく学んだこと」を備忘録として、このエントリーにまとめておきます。ボクはプログラミング超初心者なので、基本的なメモしかありませんが。JavaScriptアキラの文字数チェッカーということで、作ってみました!「アキラの文字数チェッカー」です。使用した言語は、HTML/CSS/JavaScriptの3つです。文字を入力すると、左下の「残り文字数」が減っていきます。こんなかんじ↓https://akilabo.com/wp-content/uploads/2018/07/letter_count_movie1.mp4最大文字数を140文字に設定しています。残り文字数が10文字になると、「残り○文字」というように、文字数の色が赤くなります。こんなかんじ↓https://akilabo.com/wp-content/uploads/2018/07/letter_count_movie2.mp4この、指定した文字数を下回った時に、文字を赤色にするのは、"ドットインストール"の「JavaScriptで文字数チェッカーを作ろう」を参考にしています。今回の「アキラの文字数チェッカー」は、基本的にドットインストールの「文字数チェッカーを作ろう」レッスンを参考に作りました。このレッスン通りに作成すると、改行やスペースも「1文字」としてカウントされてしまう仕様になっていました。改行やスペースを文字数に含めたくなかったので、そこを改善してみました。その成果がこちら↓https://akilabo.com/wp-content/uploads/2018/07/letter_count_movie5.mp4なんとか、改行やスペースをしても、文字数が減らないように改良することができました!これは、自分でいろいろ調べて機能を追加してみたので、想定していた通りに動いたときは、小さなことだけどものすごい達成感を感じました!そしてもう一つ、「自分で考えて&調べて」コードを打ったものがあります。右下の「チェック」ボタンをクリックすると、入力されている文字数を表示させる機能をつけてみました。それがこんな感じ↓https://akilabo.com/wp-content/uploads/2018/07/letter_count_movie6.mp4「チェック」をクリックすると、入力されている文字数を確認することができます。これも、ドットインストールのレッスンでは解説されていない機能です。自分で考えながら作ってみたので、上手くいった時はこれまた達成感を感じることができました!アキラ自分で考えたものが、実際に作れた時の達成感は最高!Progateとドットインストールだけで作れました!今回作った「文字数チェッカー」は、主にドットインストールの「JavaScriptで文字数チェッカーを作ろう」を参考にしました。プログラミング初心者は、マネをしながら「とりあえずモノを作っていく」ことが大切かなと思って、上のレッスンを参考に大まかなモノを作ったうえで、少しだけ自分で仕様や機能を変更するという練習をしました。今回の「アキラの文字数チェッカー」は、以下のような工程を踏めば、簡単に作れるのかなと思います。文字数チェッカーを作るまでの工程Progateで「HTML&CSS」の基礎的知識を身につけるProgateで「JavaScript」の基礎的知識を身につけるドットインストールの「JavaScriptで文字数チェッカーを作ろう」を1周やってみるドットインストールを参考に、自分の考える「文字数チェッカー」に仕様やデザインを変更していく分からないことや改善したいことはググるけっこうマネしている部分も多いですが、Progateやドットインストールでは触れられていないコードも利用しているので、ちょっとだけ「自分で作った感」を感じることができました。「調べればなんとかなる」ということです。「文字数チェッカー」を作っている際に自分で調べて学習したプログラミング知識を、ここにまとめていきます。プログラミングに詳しい人にとっては、当然の内容がほとんどだとは思いますが。「頭に定着させるためにはアウトプットが大事」なので、自分がプログラミング初心者から脱出するためにも、ここにメモしておきます。コメントをキャンセルメールアドレスが公開されることはありません。