jQueryのキホンのキをちょっと勉強したんでメモ
お仕事の手が空いたので、jQueryを少し勉強してみました。
なので、記録。
jQueryって何？
ざっくりというと「javaScript用のライブラリ」。
煩雑だったjavaScriptをめちゃくちゃ簡単に書けるようにしたもの。
クリックしたときのイベントやマウスオーバーしたときのイベントとかが簡単に書ける。
簡単に動きがあるWebページを作れちゃう素敵なもの。
どうやって使うの？
HTML上にjQueryを記述して、読み込むと使える。
<head>タグ内でjQueryの在り処を<script src="jQueryの在り処"></script>というふうに書いて読み込む。
読み込み方は（在り処のかきかた）2種類ある。
・Web上のソースを読み込む
→CDN(Contents Delivery Network)で配信されているもののリンクを貼って使う。
今回は、Google CDNを利用したので、以下のように書いた。
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
・ローカルにダウンロードしたソースを読み込む
→公式サイト(Download jQuery | jQuery)からダウンロードしたjquey本体を格納したフォルダのパスをHTML上に記載する。
HTMLと同じフォルダの場合は以下のような記述になる。
<head>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
</head>
jQueryの動きについては自分で書かないと動かない。
HTML上に直接書いてもいいけど、別ファイルにしてHTML上で呼び出すほうが見やすいと思う。
<body>タグの終わり直前に、実際の動きを書いたjsファイル(自分でイベントを書いたりしたプログラム)を呼び出す。
<body>
<!--なんかいろいろ書いた一番最後-->
<script src="○×.js(自分が作ったファイル)"></script>
</body>
HTMLは上から読み込むので、動作記述より先にjQueryを読み込まないと動かないので注意されたし。
jQueryの記述の仕方
画像をクリックしたら文字が消える簡単なプログラムを書いてみた。
HTMLファイル(今日の練習.html)
<!DOCTYPE html>
<html>
<head>
<title>練習</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<p>ああああああ</p>
<img id ="image" src="https://zukan.com/media/comment/original/comment_1344_20160604080437.jpg"width="300" height="200" >
<h1 id="unko">画像</h1>
<script src="script.js"></script>
</body>
</html>
jsファイル(script.js)
$(function(){
$('#image').click(function(){
$('#unko').fadeOut();
});});
jsファイルの書き方としては、セレクタ(要素的な？)を指定して、それに対して何か行動をしたとき（ここではid="image"をクリック）、どのような動きが起こるか(ここではid="unoko"がフェードアウト)を指定してやるカンジ。
セレクタについて
上記の例では、セレクタにidを使ったが、id以外でも指定できるので紹介。
idセレクタ
上記で使用したセレクタ。
$(function(){
$('#image').click(function(){
$('#unko').fadeOut();
});});
classセレクタ
クラスを指定する方法。
$(function(){
$('.image').click(function(){
$('#unko').fadeOut();
});});
要素セレクタ
要素を指定する方法
$(function(){
$('img').click(function(){
$('#unko').fadeOut();
});});
子孫セレクタ
$(function(){
$('div p').click(function(){
$('#unko').fadeOut();
});});
赤字部分は$('先祖 子孫')のように書いています。
参考
抑うつになって自由を求めてフリーランスになったら、お金で痛い目見たけど生活が充実した話
4月から都内でフリーランスエンジニアとして働いている。
フリーランスといっても自宅で受託開発しているわけではなく、エージェントを通して案件を紹介してもらい、客先常駐で仕事をしている。
前々職、前職もSESであったため、何も代わり映えはしないが、必ず定時帰りができるようになった。
定時後は買い物に行ったりジムに行ったりと自分の時間を持つことができ、大変快適な生活を現在は送ることができている。
抑うつになった
話は遡り2018年の12月末、残業50時間を毎月行っていたところ、仕事の効率が上がらない、集中できない、胸が痛い、会社に行くと下痢をする、眠れないなどの症状に悩まされだした。
休日に一歩も動けず仕事のことを思い出しては泣いていたため、心療内科を受診した。
診断結果は「中等度の抑うつ」。
診断書が発行され、すぐに休職へと入った。
11月より転職活動を行っていたため、休職に入っても転職活動を続けたところ、抑うつで休職している旨を伝えた途端、企業からはお祈りを食らった。
複数の企業から、「開発期間中に体調を崩されたとのことで、開発適性がないと伺えます」「人柄はとても魅力的でしたが、少々ストレスにかかりやすい印象を受けたため、お見送りさせていただきます。」との理由でお祈りされてしまった。
早く環境を変えたいと考えていたが、企業から「メンタルを壊した人は不要物」と烙印を押されたように感じて落ち込んでいた。
残業を毎月50-80時間してメンタルを壊すようでは、企業としては不要な人材と映るようだ。
そんな中、フリーランスのエージェントをTwitterのフォロワーさんから紹介してもらい、話を聞くことになった。
結論から言うと、転職で希望した「ワークライフバランス」と「年収アップ」が見込めそうなため、正社員に未練を残しつつもフリーランスになることを決意した。
貯金が底を尽きた
手取りが増えると喜んだのは束の間。
報酬の支払いがいつ行われるのかをよくよく確かめないままフリーランスになってしまったため、貯金を切り崩しながら極貧節約生活を送る羽目になってしまった。
2月末に退職し、フリーランスとして働き始めるのは4月。
フリーランスの報酬は、月末締めの翌々月支払いであったのだ！
予定報酬の半額程度を借りることができる、前借制度があるため利用したが、それでも3月4月は給与なし。
傷病手当ももらっていなかったし、待てど暮らせど離職票が届かなかったため、失業手当ももらえないまま開業となってしまった。
(後で判明したが、離職票が実家に届いていた)
極貧生活でメンタルをやられながらも、5月になり、前借とはいえ報酬が振り込まれたことに痛く感動したのはまだ記憶に新しい。
これからフリーランスになる人は、健康保険料も年金も家賃もしっかり払えるようにお金をたんまり貯めてからフリーランスになるようにしよう。
また、いつ報酬が振り込まれるか、というのは非常に大切なので聞きにくくてもがんがん質問するようにしよう。
手取りが増えた
結論から言うと、残業なしで手取りが20万ほどアップした。
健康保険料や年金に毎月戦々恐々としながら暮らしていたが、収入が落ち着いてしまえば大いに貯金ができる額をもらえるようになった。
案件を途切れさせなければ、猫を今年中に買うのも夢じゃない･･･。
エージェントを使ってSESをしているため生活の心配はないが、一般的には不安定で仕事の獲得や遂行が大変とされている。
しかし、毎日定時で帰ることができるようになったし、手取りも残業なしで20万ほど増えた。
世の中でよく言われる「会社ガチャ」ではずれをひくこともなく、ボーナスのための評価制度でストレスを受けることもないし、昇進試験で睡眠時間を削ることもない。
断りづらい飲み会もないし、部会で業績を気にすることもない。
SESするにあたって案件だって選び放題だ。
合わなければ最短の契約期間で抜けて、次の案件へ移ることができる。
前職では、残業が多いため現場を移動をさせてくれと訴えたが、なかなか動くことができずに自分のメンタルを壊してしまった。
しかし、フリーランスではそんなことは一切ない。
フリーランスになってよかった
世の中では、まだまだフリーランスは危ない橋を渡ることが多いとされている。
たしかに正社員に比べてデメリットもそれなりにあると思われる。
しかし、メンタルを壊した私にとっては欲しい条件がそろっていた仕事の仕方であり、実際になって良かったと実感できている。
お金のことでは痛い目を見たが、なかなか良い働き方だと思い、しばらくはフリーランスとして生きていこうと考えている。
エンジニアもすなる「退職エントリ」といふものをタケぽもしてみむとてするなり。
3月19日、フリーランスエンジニアとして歩むべく、開業届を提出してきた。
開業は4月1日だが、気持ちとしては踏ん切りがついたため、退職エントリをしたためようかと思う。
勤めていた会社に関して
勤めていた会社は、独立系のSIer。
東証一部にも上場しており、社員数もそこそこいる大きめの会社であった。
元弊社は自社開発のシステム、受託開発以外の部隊は基本客先常駐となる。
部署ごとに固有の顧客がおり、一度部署に配属されてしまえば、基本現場が変わらないような流動性が低く、また、異動願いはめったに受け入れられない、案件に関しても俗人化が激しい、お客様最優先な会社であった。
私も客先常駐部隊に配属されており、運輸業界のシステム開発に入社以来携わってきた。
この会社には開発がしたくて入社をした。
大きめの会社であるし、研修制度も充実し、マネジメントやスペシャリストなど志すキャリアパスに合わせて成長できると聞いていたため、ワクワクしていたのだが、開発を私生活がなくなる程度やることになってしまい、中等度の抑うつになってしまった。
抑うつが判明したのは、仕事中に涙が止まらなくなったり、肩こりがひどくなったり、希死念慮というよりは「消えたい」という感情が溢れてしまったり、休日は一歩も動けなくなったり…という症状が出たため、メンタルクリニックを受診したからだ。
ちなみに前々職もIT業界ではあったが、来る案件来る案件が庶務業務ばかりで開発業務に携わることができず、環境を変えるために元弊社へ転職した。
退職した時期、何故退職したか
19日に開業届を提出したものの、退職自体は2月末で退職をしていた。
自分としては3月末で退職するつもりで、2月中旬に上長に辞意を申し出たのだが、
会社の人事としては、2月末退職のほうが都合がよいとのことで2月末退職となり、少し予定が狂ってしまった。
最初から「治療のため故郷に帰る」と上長に言い訳をしていたため、引き止められずに済んだ。
休職を続けるという選択肢もあったが、正直傷病休暇中(最大2か月)は基本給の8割、それ以降の休職中は傷病手当を受給で基本給の6割程度が支給されるのみなので、大都会TOKYOでは身寄りのない独身女が暮らすのはきつすぎる。
かといって、元弊社では業務改善ができる望みは少なく、また休職をする羽目になるのではと考え、退職を選択し、フリーランスエンジニアになることにした。
(一度休職をしてしまうと、世間の企業はストレス耐性がないとみなし、採用されづらくなるため、選択肢がなかった。)
また、現在私は先述の抑うつ状態のため通院をしており、退職する際も休職をしていた。
抑うつの原因としては、万年お客様が「お金ない」というなか、無理なスケジュール、少ない人員で無理やり開発を行う案件に昨年1年間のほとんどアサインされてしまったためである。
昨年の平均残業時間は50時間を超えており、自分の私生活がほとんどない中、資格試験やスケジュールが押してるにもかかわらず評価面談や部会、研修、昇格試験などの自社業務が盛りだくさんで精神的にも追い詰められていた。
特に昇格試験の内容が論文であったため、22時まで仕事をし、日付が変わる頃に帰宅し、夕飯を口に詰め込みながら深夜2時まで論文に対する指摘対応や加筆、修正を行っていた。
24時間のほとんどを仕事が頭をよぎる状態で生活をするのは、私には荷が重かった。
今後の方針
今後は、Javaエンジニアとしてフリーでやっていくために、勉強会にどんどん参加して知見を広げていこうと思う。
また、前職では時間も心の余裕もなく取り組めなかったお弁当作りや、私生活での勉強・読書を少しづつやっていきたい。
ジムもさぼり気味なので再開していきたいと考えている。
フリーランスの最大のうまみである、時間に融通が利く部分を最大限に生かして、ワークライフバランスを保って充実した人生を送っていきたい。
はじめましてSpring & Spring Boot！勉強会に参加してきた話
勉強会の振り返りのため、資料を見返しながら自分流にまとめてみました。
勉強会のゴール
・初心者 ⇒ Springを知る
・経験者 ⇒ Springへの理解を深める。
☆今後Springを学習する際の土台作り
・資料
フレームワークとは
-システム開発で頻繁に使用する処理(データアクセス、セッション管理、認証etc.)を
提供してくれるもの。
‐フレームワークを利用することで、上記処理に対してパワーを割かずに、
ビジネスロジックに集中できるようになる。
簡単に言うとどんなシステムでも使う機能のプログラムのひな型であり、枠組みのこと、らしい。
Spring Projectとは
複数のコンポーネントを組み合わせできる。
よく聞くSpring FrameworkもSpring Projectの一部。
他にSpring Dataやら、Spring Batchやらある模様。
⇒今回の勉強会で利用したSpring BootもSpring Projectの一部
Spring FrameWorkの一部について
Spring core
‐Dependency Injection (DI) ※Springだけの機能ではない。
直訳すると「依存性の注入」。デザインパターン。
利用したいインスタンスを利用する側でnewして生成するのではなく、外部で設定する。
DIの流れとしては以下の通り(JavaConfigベース)
①Bean定義(＝Springに管理してほしいインスタンスだとわかるように定義すること )したらDIコンテナに登録される
②利用する側のクラスでBeanをインジェクション(＝クラス間の依存関係を外から入れてあげる事)して使う。
DIを採用することによって以下のような恩恵があるそうだ。
①インスタンスの作成や初期化処理などを切り出せるのでコードの見通しが良くなる。
②DIコンテナにインスタンスのスコープやライフサイクルを管理してもらえる。
③テストでインスタンスの差し替えがしやすくなる。
※今回のハンズオンでは使用していない。
用いて分離して記述すること(アスペクト指向プログラミング - Wikipedia
参考：
Spring MVC
SpringでWebアプリケーションを開発する際に利用するフレームワークの一つ。
アーキテクチャパターンとしてMVCパターンを採用してるもの。
基本機能は画面遷移と入出力パラメータの受け渡しの模様。
Spring Boot
Springをより手軽に、最小限の設定で使えるようにしたもの。
以下のような特徴がある。
• Auto Configuration
⇒ Springを使用するには多くの設定が必要であるが、その多くの設定がデフォルトで用意されている。
• Spring Boot Starter
⇒ 必要なライブラリをまとめてくれる仕組み。
• Stand-alone Application
⇒ jarを生成する際に組み込みサーバを含んでくれるので単体で実行可能。
参考：
Spring & Spring Boot まとめ
• Springの根幹はDIにあり
• Springをより手軽に使えるようにしたのが Spring Boot
参考
ハンズオン演習
今回利用したAPI
以下、勉強会中の参考情報（めもしたことなど）
・MavenProjectとは
Bildツールのこと
他にgradleというツールを使用することもある。
・Spring Bootを利用する際は、基本的にはSPRING INITIALIZRから落としてきたものに肉付けしてWebアプリケーションを作成する。
ハンズオンで作成したWebアプリの実行に失敗した。
以下の手順で解決していただいた。
①IJからコマンドプロンプロ操作ができるので、Terminalにて「netstat」コマンド(使用されてるポートを確認する)を叩く。
以下を使用するとズラーットでなくて済む。
「netstat -aon | find "8080"」
②「taskkill /pid 8756 /F」 を叩く。(強制的に8080をつかんでいたタスクをKillした)
