アラフォーからのプログラミングとデザイン

大人から始めたプログラミングとデザインについてのあれこれ

フレームワークに走る前に基本に戻ろうとJavaScriptの学習をしました

f:id:simpledancer:20210204122926j:plain

来月から入る(多分)予定の仕事がJSをゴリゴリかけるといいって話で(特にVueができるとなおよし)
今月の空き時間にはJavaScriptをしっかり勉強することにしました。
サイトでちょっと動きつけるくらいしか使ってなかったので。
今までUdemyでReactやVueも作ってみたけど、イマイチよくわからない、、、
だったのでこれはちゃんとJSがわからないとあかんやつでは、、、!?
ということで試しにいくつかJSでAppを作り直してみることにしました。

simpledancer.hatenablog.com

JS奥が深い

結果的に3つのAppを作りました。

  • quizゲーム
  • 戦闘ゲーム
  • バイクゲーム?

一番最後のバイクゲームはWebPackの設定などがあったり、私の環境下では厳しかったので、git cloneしてコードを読む、という感じで終わりましたがcanvasタグを初めて使いました。
あとの2つは最初から作って、完成。
少しcssをいじったり機能や問題を追加したりしてみました。
後、何でもそうなんだけど、興味の全然ないチュートリアルをするより「面白そう!」って思う題材をやったほうが楽しんでできますね。
今更ながら改めて感じました。

試しにVueも作ってみた

その後、Vue.jsを使ってappを作ってみたら、
以前は全然何やってるかわからなかったのに、、わかる。
自分で1からコード書けって言われるとまだ難しいけど、

理解しました。繋がりました。
パズルがうまくはまってきた感じがします。
やっぱり基本をおざなりにしてやってはいけなかった、、、(ってどの先生も言ってたじゃないか)


www.youtube.com

↑説明がめちゃくちゃ分かりやすかったです!
そういうわけで安易に流行りだからっってフレームワークに飛びつくのではなく、基本をしっかり確認しながらやるべきだなーって感じたのでした。
今月は後2/3残ってるのでやるべきことはたくさんあるので引き続き頑張ります。。

simpledancer.hatenablog.com

wacomのペンタブを購入したのでClipstudioのインストールしてお絵描きにハマる。

f:id:simpledancer:20210901173421j:plain

先日届いたwacomのペンタブ。
イラストを描くために購入したわけではないのですが、intuosを購入すると、無料でイラストを描けるソフトClipstudioをインストールできる!とのことでインストールしてみました。


製品のデバイスをPCに認証させる→シリアル番号を登録する→ソフトを選んでダウンロード、インストール、、、という手順があるのですが、どうも同じ画面にエンドレスに戻ってきてしまい、サポートに連絡してシリアル番号を登録してもらいました。

無事、ソフトもダウンロードできました。

simpledancer.hatenablog.com

お絵描き楽しい

もともと絵を描くのは好きだったのですが、大人になってからは描くこともなく。
小さい時はめちゃくちゃ絵が上手いと褒められていたのですが、描かないうちに下手になり、さらに興味はあったものの、美大なども「上手い人はたくさんいるし、芸大は無理だよなー」って感じで選択肢から外して生きていました。
しかし今全然関係ない仕事をしているものの、単純にやっぱり普通にお絵描きは楽しいし勉強というわけじゃないけど割と没頭できるものだなあと実感しました。
プログラミングやデザインは私の中では勉強の範疇だけど、絵については勉強じゃないなってなんとなく。

私はwebデザインや動画制作のinstagramも

https://www.instagram.com/yumikot_creator/?hl=ja

やっているのですが、そのうちそちらの方にもイラストをアップできることを目標にデジタル描画も合わせてやっていこうと思います。

simpledancer.hatenablog.com

 

新しいwacomペンタブとmoftのpcケースが届いた

f:id:simpledancer:20210901173425j:image

注文してた製品が届きました!

AEさわっていて、ノーパソのパッドでは限界があり、マウスよりもペンタブのがよいよ!ってなことで。PCケースは勉強会でかっこいー!っておもって教えてもらったケース。Moftってブランド。PC台にもできます。(15度と25度の角度に調整可能)

ペンタブの設定に思いの外時間がかかる

f:id:simpledancer:20210901173421j:plain早速PCと接続、、、
ワイヤレスだからBluetooth接続結果的にはできたのですが、USBケーブル、私のmacbookはそのまま繋げられないので「アダプタも買わないといけないかも、、」ってなってしょんぼりしてました。(単純に環境設定変更すれば良いだけでした。)

無事登録できたものの、今度はペンがなんか作動しにくい。
ペンも設定がwacomのデスクトップセンターから変更が可能でした。
これは使っていきながらちょっとずつ変えていくしかないかな?という感じです。
ちなみに現状まだペンで書くよりもmacbookのトラックポイント部分でベジェ曲線書くほうが楽なくらい。

intuosを購入すると無料で使えるclipstudioのダウンロードもなかなか手間取りました。(サポートに連絡した)なんやかんや3時間ぐらい設定に時間がかかりました
adobe製品を使いこなすためにペンタブを購入したのですが、いざclipstudioを触ってみるとなかなか楽しくお絵描きができるので、暇を見つけてイラスト制作の方もやっていきたいです。

 

 

AfterEffectsのオンライン講座を購入と必要出費について

f:id:simpledancer:20201001152646j:plain

先週からAftereffectsの勉強のためにカズノコさんという方のオンライン講座を購入しました。
3ヶ月の質問対応付きです。
正直結構難しいです。今までチュートリアルはそこそこやってきてたんだけれど、どうしても自分のできそうなものだったり好きなものに偏っていたり、速度グラフとか適当にしてたので、苦手なところとかも網羅されています。
そしてやってもすぐ忘れます。
プログラミングもそうだけど、すぐ忘れちゃうんだよね。。

追加のお買い物:ペンタブ購入予定

【Amazon.co.jp限定】ワコム ペンタブレット Wacom Intuos Smallワイヤレス クリスタ付き 黒 Androidにも対応 データ特典付き TCTL4100WL/K0

イラレを使ってた時から、マウスいるよな〜と思ってたのですが、荷物が増えるのが嫌で買ってませんでした(その後デザインよりも仕事ではコーディングになったので買わなかった)しかし、AEは今後仕事もちょっとしていきたいので、マウス買うかあ〜と思ったのですが、マウスよりもペンタブの方が慣れると断然使いやすいみたい。
そういうわけでペンタブを購入することにしました。
ペンタブ歴の長い人に相談したところwacomの出してるintiosというものを購入することに。amazonで11000円程度。
ペンタブは使ったことないので、慣れるまで時間がかかりそうですが、どうせ時間もあるので細々と練習していこうと思ってます。

AfterEffects難しい、私はどこに向かっているのか?

気がついたらプログラミングの仕事や勉強よりも先週からずっとAEを触ってます。
動画制作を仕事にしたい、、とちょっとは思ってるものの、そこまで熱烈な感じでもないような。でも興味があるから勉強してる。そんな感じかな。
コーディングは今受けてる案件が落ち着いてきたので、忘れない程度に色々勉強したりはしてるのだけれど、AEを触るだけで結構眼精疲労がやばくて、コードはほとんどかけてないです。日に日に忘れてる気さえする。
みんなどうやって知識を保持し続けているんだろう、、。

simpledancer.hatenablog.com

 

ReactのTodoリストに日付を表示させる

f:id:simpledancer:20210815172832p:plain

UdemyのじゃけえさんのモダンJavaSciptの基礎から始める挫折しないためのReact入門 チュートリアルを一通り作りました。

まだまだReactが全然わからないんですけど、ちょっとでも何か追加してみようとして以下のことを行いました。

  • 今日の日付を表示させる
  • SNSのシェアボタン
  • 見た目の変更

日付の表示

const today = new Date()
const year = today.getFullYear()
const month = today.getMonth() + 1
const date = today.getDate()

まず、こうして日付を取得してきます。はっきり言ってあまり分かってないんですReactここで取得したものをappの中で表示させます。

returnの(内に記述していきます。

<div className="date">
{year}{month}{date}
</div>

これは簡単。 日付に関してはこれはもう書き方がこんな感じなんだなと記憶しておけばいいかなと思います。

SNSシェアボタン設置

こちらについてはReact-shareと言うライブラリを取得します。

github.com

  1. react-shareをinstallする
  2. jsxファイルのimport文を書く
  3. 表示させたい部分に表示させたいアイコンのものを入れる。
import {

TwitterShareButton,
TwitterIcon,
} from 'react-share'

ひとまずtwitterアイコンのみです。海外の主要なSNSはコードがgithubに載ってます

<TwitterShareButton
url={['url']}
title={['タイトル']}
>
<TwitterIcon size={32} round />
</TwitterShareButton>

そうするとtwitterアイコンからシェアが可能に。タイトル部分は日本語にするとうまく表示されないので、英語で!

 

その他フォントはgoogleフォントから可愛いものをチョイス。

色味や大きさもちょっと変えてみました。サーバーに普通にアップしようとしたら、時間がかかりすぎてなかなかできなかったのでherokuでデプロイしてみました。

データはDBが無いので保持されません。リロードすれば消えます。

react-todo2021.herokuapp.com

一応udemyのtutorialだからgithubの公開は控えます!

vanillaJSとの違いを比べながら学べるのでオススメのUdemyです。

大幅に機能追加して、元とわからないくらいになったらgithub公開してもいいのかなと思いますが。

8月18日までUdemyが1270円〜のsale中です。

 最近はWeb制作の仕事が落ち着いてきたのでまたいろいろ勉強しようかなと思ってます。

simpledancer.hatenablog.com

派遣でWebコーダーをやってました。

f:id:simpledancer:20210204122926j:plain

3ヶ月ほど派遣のコーダーをやってました。
投稿するのを忘れていたので、まさにやっていた時に書いたものですが
派遣でコーダーってどうかなあ?って考えてる人にちょと参考になれば。
難しいコーディングは無いものの、gitを使わない、コーポレートサイトの修正やらが主な仕事です。


派遣やバイトでのコーダーのお仕事は、「時給が確実にある」ということです。
案件ベースだと、納品するまでお金もらえないし、(納品前にくれる場合もあるけど)やや不安定。
その点派遣社員だと、拘束はされるものの、確実な時給というのは駆け出しエンジニアにはかなりいいのかなと思いました。

simpledancer.hatenablog.com

最近見つけたデザインの修正指示がしやすいというサービス↓これはディレクターとかになったら使ってみたいかも。↓

派遣早々に感じたこと

そんなわけで初出勤した翌日から、まさかの誰も教えてくれる人がいないという事態に。
コーディング自体は自分で調べられるので問題ないのですが、どちらかというと私の入った企業はコーディングではなく、修正が主なので、このファイルはどこにあって、どういう流れで、誰に確認をとって、どういう仕事なのか、、?ということさえいまいちよくわからない状態のまま放り出されました、、。
一応だんだんなれてきて、なんとなくの流れはわかってきたものの、今度はコーディングすることがそんなに無いというフラストレーションが溜まってきました。
ちょうど仕事も閑散期に入ってきたのもあり、ここに居ても多分新しいことは学べないな、、というところもあったので早々に契約期間を終えました。
派遣は仕事内容が決まっているので社員さんほどできる内容も限られているし、権限もあまり無いことが多いので成長という意味ではやはり社員とか業務委託でフリーでやる方が良いかなって感じです。
でも働いてみないとわからないので、やってみてよかったなとは思います。(あと15日間頑張るぞ)

simpledancer.hatenablog.com

駆け出しだけど、細々とフリーでの仕事も増えてきた

覚えることも勉強することもたくさんあるけれど、0→1が終わると、意外と仕事ってちょこちょこ降ってくるんだなと感じました。
当初はクラウドソーシングで頑張って営業しよう!と思っていたのですが、クラウドソーシングするまでもなく、案件が立て続けに入り(でも結構重めのやつが数本)
1本数万円という単価だから時給にすると結構安いんだけど、、。
あと、実績ができるとクラウドソーシングも取りやすくなるのかな?と思っているので落ち着いたらまたクラウドソーシングも営業チャレンジしておこうと思います。

simpledancer.hatenablog.com

常駐終了してこれからはまた在宅複業へ

f:id:simpledancer:20201001152646j:plain

月末で常駐のコーダーのお仕事が終わります。
業務的にはコーディングスキル自体はそんなに困ることはなく、社内ルールが多少あるものの、平和な会社でした。
しかし並行して在宅の案件もあったり、ミーティングがあったりで、常駐しながらは結構疲れてしまったのと、このままだとスキルアップしないな、、と感じたため常駐をやめることを決意。

続きを読む

プログラミング学習のアウトプットの重要性について。

f:id:simpledancer:20210101143731j:plain

最近、ちょこちょこ案件が入ってきて、なんとなくこのままエンジニア職で生きていけるかもなあ、、なんて余裕をぶっこいています。
とはいえ、今は大したスキルもないし、実装するのにめちゃくちゃ時間がかかるしで(しかもweb業界は常に勉強ですし)
そして、最近はもともとやっていたダンスの仕事も定期的に行っているので、常に働いてる状態です。
で、最近はつくづく感じるのはアウトプットって大事だな〜と改めて感じました。

続きを読む

気がついたらエンジニアになっていたアラフォー

f:id:simpledancer:20201121155752j:plain

プログラミングと出会ってはや、、5年??
勉強したりしなかったり、就活したりしなかったり、、そうしているうち

  • フロントエンジニア業務委託パートナー1件
  • プログラミングスクールメンター
  • webサービス開発案件 2件

を掛け持ちするまでになりました。


いえ、まだ全然稼げてはいないですが、おこずかい程度に細々と昨年から実案件に着手しだしたら小さい案件の掛け持ちを色々するようになりました。
お金の額は気にせず(現在親族のベーシックインカムが最悪準備されている)興味のある、自分のスキルのちょっとだけ上目の案件、と探して実施していくうちになんか知らないけど仕事になってきました。
正直、夜のショークラブの仕事も復活したので、労働時間的には普通の会社員の人より働いてるかもしれないけど、、、。

simpledancer.hatenablog.com

エンジニア職への完全切り替えはしないことに決めた

この先はわかりませんが、動けるうちはダンスの仕事もしたいな、、と思っていたところ長期のダンスの仕事の出張案件が出ました。
と同時にダメもとでエントリーしたフルリモートの業務委託で内定をいただきました。
聞いたところによると、業務委託の作業自体はいつやってもいいとのこと。
同時期にメンターのお仕事も継続的にいただきました。
がっつり派遣社員または契約社員などになって、フル出勤でコーダーの仕事するか、、、とはんば諦めの姿勢で就活していたけれど、結局目標としていた、ダンスの仕事をしながら、フルリモートでプログラミングの仕事をする、、という目標がほぼ叶いつつあります。(たくさん稼げているわけではありませんけど)
意外な着地点で結構この1週間ぐらいがびっくりでした。

simpledancer.hatenablog.com

フルリモート、時間も自由なのが自分に適してる理由

もちろん本業で夜のショーの仕事をしているというのもありますが、
例えば夜中まで働いてるので、朝はゆっくり寝たい、とか。この期間は違う土地にいきたいとか、家族が体調が悪いから、家にいてあげたい、とか。
そういうのに対応できるから、(しかも電車乗らなくていいし)在宅で時間いつでもいいって最高だなと思いました。
時間が決まっていた方が、だらだらせずに済む反面、自由度が少ないのでリモートであってもがっつり9時−18時はしんどい。もしかしたら今後いい感じの常駐の仕事があれば、出社して定時まで働いて帰る、、という生活に切り替えるかもしれませんが、フルリモートだと食事のタイミングも自分で決められるし、通勤時間がなくていい。ある程度自分の生活にルーティンがあるのでそれに従って動けるのはありがたい。

爆速での成長はしていないけど、ゆるくエンジニア業でも生きていく

f:id:simpledancer:20210204122926j:plain
勉強を開始してから5年くらい経って、やっと月々おこずかい程度稼げるに至りました。もちろん集中したり就活したりをしていればもっと早くにエンジニアになっていたのだと思うのですが、これはこれで自分のタイミングなのだなと割り切ることにいたしました。
だらだらと必要な勉強もこのまま続けていこうと思います。

simpledancer.hatenablog.com

CSSで画面や文字の明度を変更する

f:id:simpledancer:20201113112455j:plain

画面を単純に薄くぼかしたいときは

opacityを使うことが多いと思うのですが、今回お仕事でコーディングをした時に、

  1. ベースになる背景画像→暗く
  2. その背景上の文字→白くくっきりさせたい
  3. その中に入ってるフォームなどのコンテンツ→明るいけどベースの背景をぼかしたい
  4. そのコンテンツに入ってる文字→ぼかさずくっきり見せたい
続きを読む