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

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

プログラミングスクールはRubyが多いが実際の企業は、、

f:id:simpledancer:20210204122926j:plain

最近、面談に行くことが増えました。(未だ決まってはおりません)
最近はプログラミングというよりも、web制作の範疇で探しています(将来的にフロントエンドの方に行けるような案件)


そこで、ポートフォリオにRubyの件を載せていると

「へー、Ruby、珍しいねー」と言われたり、「Rubyは、、あまり仕事ないですよ、特に関西」をしょっ中聞くようになりました。
私自身もphpやJavaの方が仕事が多いのは知っていましたが、Rubyをやる意味とは、、?くらいなことを言われることが多い。

simpledancer.hatenablog.com

じゃあ、Rubyはやらない方がいいのか?

言語は基本的な考え方は共通しているので、ある程度理解していればどの言語にスイッチしても大丈夫とも聞きます(書き方全然違うけど)。
私は対して知見もないのですが、初期学習コストを下げて就職しやすくするとしたら、もしかしたらphpをやってる方が日本においてはいいのかなと思いました。
もしくはpythonが今はいいのかも。
できることが違うから自分のやりたいことから逆算必要だと思いますが。
私の場合なんだかよくわからないうちにRubyで始めてしまい、やたらと浮気するよりは一つの言語の方がいいかな?とRuby on railsで開発したりしたのですが、
今学習初期に戻るならサーバサイドの言語はphpを選んでいたのではないかと思います。(Javaは今やってたとしても多分挫折している)
でもここまでRubyだめだ扱いをされるとは思わなかったので若干ショックですが。(まあそこまでrubyもわかってるわけじゃないけど)

 

simpledancer.hatenablog.com

プログラミングスクールの話は半分くらい聞いておく方がいいかも

学習が始まってからはさておき、多くのプログラミングスクールの広告は参考程度に聞いている方がいいのかもしれないなーと思いました。
個人的に、スクールよりも今だったら業務内容は慣れていても未経験で入れるweb関連の企業に就職するとか、webデザインだけちょっと習って簡単な案件だけ受けて実績を作っておくとか、そういうのを初期にしておくと学習コストがぐんと下がると思います。

私はテックアカデミーも行ったし、個人の開発メンターも雇ったし、web制作のメンターも雇ったし、課金祭りした割に全然仕事に結びつかなかったので(本人のやる気次第というのもありますが)
しかし、巷のプログラミングスクールは高い割にひどいところが結構あるので本当に気をつけた方がいいと思う、、。twitterとかで情報収拾するのもいいかもしれない。

 

行ってよかったところもあると思う有名どころのプログラミングスクール

ちょっと今だと違う使い方をするかもしれませんが、テックアカデミーいいなと思ったところが

  • メンターさんの質が今思い返しても結構高かったし、レスが早かった(現在はわかりません)
  • 教材が期間終わっても見れる(某大手は期間が終わると見れなくなる)
  • TechAcademy 無料体験 1週間もついてる(多くのスクールは1回のメンタリングのみ、とか)

 

 

私は1ヶ月だけしか受けてないのだけれど、メリットとしては上記かな?と思いました。ただ、全くの初心者で1ヶ月というのはめちゃくちゃ短いので期間は3か月は最低でも欲しいところ。

私が20代だったら多分迷わず転職でweb業界にポテンシャル採用してもらう。
30代以降ならweb系未経験で入れる簡単な仕事をまず入りながらオンラインでメンターをつけながらポートフォリオ作ったりする、またはwebデザインからスタートする

40代以降なら本業をしっかりやりながら(もちろん未経験でも転職できる会社があればしてもいいかも)仕事以外の時間をwebデザインか制作の勉強をしつつ、副業案件を探す。

かな。
私はのっけが、30代中盤でJava0円スクール→大手プログラミングスクールだったので、今だったら絶対に歩まないコースです。(時間が許すなら就職前提の0円スクールなどはありだったと思いますがJavaがやっぱり好きに慣れなかった)

simpledancer.hatenablog.com

まとめ

  • 日本で普通に雇用型で就職するのであればRubyよりPHPかも
  • でも若いなら職業訓練校かポテンシャル採用で何もわからない状態で一旦入ってしまって経験積むのもあり。(JavaやC言語)
  • プログラミングいきなりやるよりwebデザインor 制作から入る(wordpressがphpなのでおいおい慣れたらphp)

結局、PHPかよ!って感じですね。
もしも私がプログラミングゴリゴリできるタイプならRubyでそのまま突き進んでバックエンドに、、、ですがコーダーなどから入るにも結構「PHPわかる?」って普通に聞かれます。なので時間をかけるならPHPのがよかったかなと思ったりしてます。コスパ的にはそれが良いのかな、、などと思ったりする今日この頃です。

simpledancer.hatenablog.com

ノーコードツール(無料)でポートフォリオを作ってみる

f:id:simpledancer:20201128114221p:plain
こんにちは!Yumiko(@engineerman8)です。
最近ノーコードが何かと話題です、shopifyとか、案件も結構たくさんあるらしいです。
shopifyはちょっと置いておいて、先日、「画像加工や、デザイン関係のものでまとめてるポートフォリオみたいなのありますか?」と派遣会社の人に言われて、
「あ、そういえば、、ピンタレストにちょっとまとめてはいたけど、、ないといえばないな、、」ということで、せっかくなのでノーコードツールを使用してみることにしてみました。

続きを読む

railsで静的ページをルーティングしてくれるgem

f:id:simpledancer:20210204122926j:plain

今参加してるプロジェクトはフロント部分の担当なのですが、一部「ルーティングとコントローラー作ってやっちゃってください」的な指示が。
静的部分なのでコントローラに書く内容は特にないのですが(アクションを書くだけ)
ルーティング、どうしたらいいかなーなんて色々悩んでるうちに
自分で作らなくても勝手にルーティング作ってくれるgemがあったのです。(今回は結局大きめのプロジェクトでバックエンドは本来触らない予定だったので使いませんでした)

続きを読む

モジュールについて調べてみた

f:id:simpledancer:20210204122926j:plain

cssは勉強始めた頃は、単純に色やサイズ、見た目を調整するものだから、見た目がうまくいけばいいよね!くらいの甘い考えでした。
もちろん自分一人のポートフォリオやホームページを作るくらいなら、修正するのも自分だし、命名規則なんて決めなくてもざっくりで問題なかったのだけれど、いざ、仕事やコードレビューになると人の作ったものがわからない、、、ある程度設計がわかってる人が書いているコードも自分に知識がないと今ひとつ何が何やらわからない、、ということが多々発生しました。


そしてモジュールという単語が頻発するのに、え、ところでモジュールってなんなのさ??状態だったので調べてみることにしました。

www.yoheim.net

developers.karte.io

 

cssは深い。

命名規則とってもいろんな考え方があるし、実際自分も他の人のコードを見たとき、

「ん、、、?これってこの命名規則だとちょっとわかりにくいかも、何をさしてるのか、、」とわかりにくかったりします。
前に自分が仕事でやったのはほんと、修正される方に多大な迷惑をかけたかと思います。(まるでルールのほぼない命名規則がゆえ自分でも見返したらどれがどれに対応するのかわかりにくい)

www.6666666.jp

基本的にスネークケースを使っていたのですが、もしかしたらキャメルケースももっと使った方がわかりやすいのでは、、と思うようになりました。
cssでキャメルケース使うんだって知ったの最近ですし。。

 

改めてモジュールとは?

モジュールって、で結局なんやねん、ってなった時に言語化いまいちできない、、
CSS設計の本に

使いまわすことを前提としたひとかたまりの単位
モジュールという発想により同じコードを何度も書かなくて済む、効率的なweb開発を実現 

うん、簡潔。でも1回この文章読んでたはずなんだけど、初見並みにわかってなかった。色々サイトを読んだりして今なんか腑に落ちました。 

とはいえ、まだcssの記法については恐る恐るやってるところがあるので、大規模なサイトとかは太刀打ちできない。。

simpledancer.hatenablog.com

Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)というエラーを解決

f:id:simpledancer:20210204122926j:plain

新しく参加したプロジェクトでgit cloneしたら色々エラーが出ていきなり心が折れました。
Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)

こんなエラー。


今まで出たことがなかっったのですが、どう考えてもlocaLなので私のPCの方の設定問題だと思いました。

まず、railsのバージョンが無いよ!から始まり、冒頭のエラーを解決するためにやったことを書きます。(色々やりすぎて行方不明)

 

simplelifedancer.hatenablog.com

MySQLサーバーをなんとかする

mysql -u root

このコマンドを叩くと、

Error!

と吐き出されます。
エラーは心が折れますが、絶対なんとかなると信じて。
$ sudo mysql.server restart

こちらのコードでリスタートしてみてはどうだろう??と思いコマンドを打ってみたところ

Starting MySQL
. ERROR! The server quit without updating PID file (/usr/local/var/mysql/MacBook-Pro.pid).

またエラー。
pidファイル?なんだなんだ、、、?ということで以下を参考にファイルを作ってみたりしてみたのですが。

mysql 起動時のThe server quit without updating PID file エラーの回避法 - Qiita

どうやら違うっぽい。

斯くなる上は、でmysqlサーバーをアンインストール、再インストールすることにしました。
$brew uninstall mysql

そして

$brew install mysql

したところ、それでも変わらず。

/usr/local/var

これで

drwxrwxr-x   4 yumiko  admin   128 11 17  2019 homebrew
drwxr-xr-x 4 yumiko admin 128 8 3 2020 log
drwxr-xr-x 27 _mysql _mysql 864 2 5 10:34 mysql
drwx------ 26 yumiko admin 832 1 9 15:58 postgres
drwxr-xr-x 4 yumiko admin 128 9 13 2019 rbenv

mysqlのところだけ_mysql

権限問題かな?

sudo chown -R yumiko mysql

すると変わりました。

drwxr-xr-x  27 yumiko  _mysql  864  2  5 10:48 mysql

これでいける、、はず!

$ mysql.server start
Starting MySQL
SUCCESS!

サクセスしました。

$ mysql -uroot
Welcome to the MySQL monitor. Commands end with ; or \g.
Your MySQL connection id is 11
Server version: 8.0.23 HomebrewCopyright (c) 2000, 2020, Oracle and/or its affiliates. All rights reserved.Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

これでmysqlの方はうまくいったみたいです。もう、サーバー関係勘弁してくださいって感じです。

railsと繋げる作業

はい、この辺もよくわかってませんでした。
database.ymlには環境変数でローカルのユーザーネームやパスワードを入れるようになっているのですが、.envファイルを私はまず作っていなかったので、こちらを作りました。

DB_USERNAME = 'mysqlのユーザーネームを記入'
DB_PASSWORD = '設定したパスワードを記入'
DB_HOST = 'ホスト名を記入、localhostとか'

ここで私は時間を食ったのですが、

Puma caught this error: Cannot load database configuration:
YAML syntax error occurred while parsing /Users/tezukayumiko/Desktop/creator_match_pf/config/database.yml. Please note that YAML must be consistently indented using spaces. Tabs are not allowed. Error: (<unknown>): found unexpected end of stream while scanning a quoted scalar at line 5 column 13 (RuntimeError)

syntaxエラーがdatabase.ymlにあるよ!みたいなことを書かれていますが、そもそもこのapp自体はチームのものをcloneしてきているし、他の人は普通に使えているのでどう考えても私がおかしい、、、。

rootユーザーでパスワードを設定してなかったので、本来ならパスワードは必要なかったのですが、macのパスワードを勘違いして入れてました。なのでrootユーザーであればパスワードは無しで大丈夫。

これで,railsと繋がったので

$rails db:create

$rails db:migrate

で、めでたくサーバーが立ち上がりyeh rails画面が表示されました。
いやー、長かった、、、。

まとめ

  • エラーを読もう。
  • 焦らず一つずつ潰そう
  • 悩んで手詰まりなら、人に聞く。

私はメンターしてもらってる人もいるので無理ー!って時は聞くようにしてます。
ある程度はググればできるようになってきましたが、やっぱり聞くと早い。

simpledancer.hatenablog.com

 

cssのちょっと困った:aタグの色が変わらない!

f:id:simpledancer:20210204122926j:plain

あれ、この記述であってるはずなのに、なぜかcssが反映されない、、!?

学習初期の頃 aタグ(リンクタグ)に青色がついてて、それ以外は元々の設定されている色がついているのに、、

と思ったことはありませんか?
単純にリンクの部分にブラウザ設定の色が指定されているせいなのですが

aタグ自体に

a {

color: #333;

}

などとしていたのですが、それでも変わらない事案が発生。!importantするのもちょっと避けたい。
その際やったことを記述します。

simpledancer.hatenablog.com

親要素の色を引き継ぐ

a {

color: inherit;

}

を指定したところ無事親要素の色を引き継ぐことができました。これさえつけておけば、毎度aタグに色を指定する必要もありません。
ページ全体で、この指定をしておいて、一部違うところにはaタグにクラスをつけ、色を変える、、という指定でいいかな?と思いました。
ただ、今回の場合は、なぜか

  • aタグ自体に指定しても色が変わらない
  • aタグのクラスを記述して指定しても色が変わらない
  • watch sassをしてるから関係ないかもしれないけれど、キャッシュの削除も済み。

だったのでちょっと謎が残るところではありますが、、、通常はaタグ自体に色指定で変わるかと思います。でも大抵はaタグだけ色変えるってことはないかと思うのでグローバルで指定してしまうのがスッキリするかもしれません。

参考にしました↓

CSS tips - a タグの色が変わらないときは color: inherit を指定しよう | phiary

実際制作してると、全く歯が立たなかったのでcss設計本勉強中です。

simpledancer.hatenablog.com

Adobe XDの機能に驚く1週間

f:id:simpledancer:20210117123150p:plain

最近、自分でデザインカンプを作れた方がいいなーとCocodaというサービスを使ってXDの練習を始めたのですが、触り出してこんなにXDって便利だったの!?と驚いています。


むしろ、photoshopで前はLPデザインを作っていたのですが、XDの方がめちゃくちゃ便利ではないですか!?
しかも、コードを書く人もXDの方が断然わかりやすいし。
そもそもphotoshopの画面だとpxとかわかります?わかりませんよね。

simpledancer.hatenablog.com

XDは感覚的に触れる

photoshopやイラレだと、レイヤーがあって、(もちろんそのおかげでデザインの幅も広がるのですが)
webサイトのデザインに関してはXD(またはfigma)で十分。
基本的なショートカットキーを覚えて、左側に表示されてるツールも限定的だし、なんなら何も説明ない状態でも「こうかな?」って感じで基本的な部分は作れるような気がする。。(もちろん複雑なことは無理だけど)

アニメーションもできる

いわゆる、モックアップみたいなものを作るときに、
スマホ画面などで「ここをタップしたらこの画面に遷移する」のようなものを作成することができます。
再生ボタンを押すとちゃんとタップすると遷移後の画面に切り替わるという。
これは一番びっくりしました。
自分は仕事でUIとかめんどくさそうだし、やりたくないなーと思っていたけれど、XDが自由に触れると結構もしかしたら面白いのかもしれないと思いました。

需要としても、おそらく普通のデザインより、UIデザインができた方が仕事的には良さそうです。(私はデザインよりもコードを書くほうが好きなのですが)

XDの勉強ができるサービス

私はCocodaというサービスを利用して使っていますが、XDは無料で使えるサービスがもう一つ、Daily UIという海外のサービスがあり、毎日(100日連続)メールに課題が届きます。これは割とレベルが高そうなため、Cocodaである程度できてからやろうかなと思います。

cocoda.design

www.dailyui.co

 

コーディングもデザインもバランス良く

プログラミングだけしてると考える時間が多くて脳みそがしんどいです。
逆にweb制作やデザインだと考える時間よりも手を動かす時間が圧倒的に高い気がします。
その中でもXDは脳みそよりもとにかく手を動かして行くことができるので息抜きにもなるし、作ることで、自分がコードを書くときのヒントにも(多分)なると思いました。
ここ1週間はXDを1日に1作品作って、Cocodaに投稿、合間にプログラミングしたりweb制作したり、、って感じで過ごしてます。前はデザインもプログラミングも中途半端になるかなあ、、って思ってたけど、いい感じにバランスとってやってる方が私にはあってるのかなと思っている次第です。

現在の仕事・就活状況

  • 在宅のrailsのサイト制作 1件
  • Web制作の派遣の企業の結果待ち 1件
  • web制作在宅の受託案件面談予定 1件
  • webデザイン受託案件面談 結果待ち 1件
  • 派遣の企業面談予定待ち 1件


と、以前の私にしたら頑張ってる方かな?と思っています。
緊急事態宣言が出てるので夜のショーの仕事は2月上旬まではお休みの方向です。
アラフォーでちょっとずつ仕事の方向転換を測っていますが、今のところやはり正社員は考えてなくて、派遣をしながら在宅案件をしつつ、フロントエンドエンジニアに(バックエンドは微妙かもと案件やってて気づく)移行するのが目標です。

simpledancer.hatenablog.com