Perl入学式に参加してきた

Perl入学式とは


Perl入学式は2012年に大阪で発足した、プログラミング初心者やPerl入門したい人を対象とした勉強会です。1年を通じて全5回のカリキュラムが行われ 5回目のカリキュラムではPerlを使って簡単なwebサービス(twitter風1行掲示板)を作れるようになろうという内容です。 今年2017年は大阪、東京、沖縄、札幌の4都市で開催される予定です。

詳しくはこちら Perl入学式とは

1回目でやったこと、教わったこと


Perl入学式 in札幌 第1回は3部構成になっていました。第1部ではwindowsユーザー向けの環境構築の部、 第2部はmacユーザーも参加しターミナルやエディタなど開発環境の構築。第3部ではPerlの歴史やPerl入学式の話、 ターミナルやエディタを使って実際にHello,worldを出力したり簡単なプログラムを書いてちゃんと出力されるかなどの内容でした。

僕はmacユーザーなので第2部からの参加。windowsユーザーの方々はVirtualBoxubuntuをインストールしているところでした。 無事、皆さんがインストールを終えた後に第2部スタート。ターミナルの基本操作の説明などを経て、 実際ホームディレクトリの下にmkdirコマンドでディレクトリを作成しtouchコマンドでファイルを作成したり、rm , open . , cdなどの基本的な操作を教わりました。
また、エディタでHello,world!を出力するプログラムや自己紹介を出力するプログラムを作成して出力するなど練習問題形式ですすんでいきました。

参加した感想


参加した感想としては「参加してよかった!」でした。自分自身、プログラミング初心者で参加者の方々に顔見知りがいない状況だったので 正直不安でしたが、入学式というだけあってしっかり初心者にも気を配ってくれていると感じました。
また講師の方の他にサポーターという方々が3〜4名いて、わからない人は近くのサポーターの方に声をかければ即座に教えてもらえる 体制となっていました。これは「質問する」という行為のハードルを下げてくれる良いシステムだなと感じました。
Rubyist(ルビイスト)やPythonista(パイソニスタ)のようにPerl使いはPerl Monger(パール・モンガー)というようで Perl入学式の校長であるpapix氏から「家に帰ったら家族にPerl Mongerになったって言うといいよ」と言われたので さっそく言ってみたけどまあ反応は無かったですw
全5回制覇してPerl Mongerを名乗れるように頑張りたいと思います。講師やサポーターの方々ありがとうございました!

ProgateでLv.100突破

大した事じゃないんですけど、ProgateでLv.100をようやく突破したのでやったことまとめ。

やったこと


f:id:ameroe:20170405211948p:plain

HTML , CSS , jQueryを1ヶ月くらいかけてやりました。

f:id:ameroe:20170405212339p:plain f:id:ameroe:20170405212348p:plain

クリアしたコースはこんな感じ。☆の数がクリアした回数なので2回目の復習をしているうちにLv.100を超えてました。

実は実践コースは全然クリアできてなくて、現在悪戦苦闘中です。実践コースになると一気にレベルが上がるけど何とかクリアできそうな気持ちにさせてくれるのがProgateのすごいところだと思う。

次の目標


GW前までにRubyRuby on Railsのコースを1回はクリアしておきたい。

その前に残ってるHTMLとjQueryの実践コースをやっつけたいと思います。

jQuery 上級編1

上級編 その1


ProgateでjQueryの上級編に進んでからかなり進むスピードが遅くなってきたので少しづまとめる。

eqメソッド、indexメソッド


<ul>
  <li>その1</li> <!--0-->
 <li>その2</li> <!--1-->
 <li>その3</li> <!--2-->
</ul>

このような「li」要素にはjavascriptの配列のようにインデックス番号をもっている(0から始まる)。
eqメソッドを使用してjQueryで3番目の「li」要素を取得しcolorをredにする場合は下記のようにする。

$('li').eq(2).css('color','red');

また、インデックス番号を取得したい場合はindexメソッドを使用する。

<ul>
  <li>その1</li> <!--0-->
 <li class = "active">その2</li> <!--1-->
 <li>その3</li> <!--2-->
</ul>

上記の「li」要素から「.active」のインデックス番号をindexメソッドで取得する。

$('li').index($('.active'));

とすると、インデックス番号の「1」が取得できる。

jQuery 中級編

中級編クリア


ProgateでjQuery 中級編をクリアしたけど中身がわかってないので振り返り

thisの構文


thisはイベントが起こった要素を取得することができる。

<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>

のようなli要素に対しクリックしたli要素のみcolorをredにしたい場合は以下のようにする。

$('li').click(function(){
  $(this).css('color','red');
})  

clickイベント時にモーダルが表示、非表示されるようにする


clickイベントの時にモーダルを表示したいのでcssで通常は非表示にしておく。

セレクタ { display:none; }

jQueryでclickイベントを設定し、fadeInメソッドでモーダルを表示する。 例としてid=btnをclickした時に、class=modalを表示したい場合は

$('#btn).click(function(){
  $('.modal').fadeIn();
});

となり、逆にモーダルを非表示にする場合はセレクタに対してfadeOutメソッドで隠します。

hasclassメソッド


hasclassメソッドは引数に指定したクラスをオブジェクトが持っているかを判定する。
持っていればtrue、持っていなければfalseを返す。

$('.answer').hasclass('open')  //結果 false  
$('.answer open').hasclass('open')  //結果 true

判断した後にif文を用いて,結果に応じた処理を行うことも出来る。

jQuery 初級編

初級編クリア


ProgateでjQuery 初級編をクリアしたので簡単にまとめ

jQueryとは


  • javascriptのライブラリの1つ
  • HTMLやCSSでは表現できなかったアニメーションや様々な動きをつけられる

オブジェクトとメソッド


基本的な構造は以下のようにする

$('セレクタ').メソッド(引数);

$(‘セレクタ’)でオブジェクト作成ができ、その後に.メソッドで呼び出す事ができる。

初級編に出てきたメソッド

  • hide ⇢ 要素を隠す(showメソッドは要素を表示する)
  • fadeOut ⇢ 徐々に消えていくアニメーション(fadeInメソッドは逆の効果)
  • slideUp ⇢ 下から上に徐々に消えていくアニメーション(slideDownメソッドは逆の効果)

例としてfadeOutメソッドの使用例

$('セレクタ').fadeOut(slow);
//引数をslowとすると、ゆっくり消えていく

イベントの構文


基本的なイベントの構文は以下のようにする

$('セレクタ').イベント名(function() {
   //イベント発生時に実行したい処理
});

セレクタをクリックした際に、セレクタの入れ子のid = “text"に対し イベント(hideメソッド)を発生させたい場合は

$('セレクタ').click(function(){
   $('# text').hide();
});

以上、忘れる前に備忘録として記録。

本日のまっちゃ

 

本日のまっちゃ #コザクラインコ

宮腰 圭佑さん(@ameroe)がシェアした投稿 -

かなり毛が生え揃ってきました。

ジョギング

ぼちぼちジョギング開始。

冬の期間に5〜6kg増加したので体重も公開してダイエットも開始。

f:id:ameroe:20170320113258p:plain

目標の65kgまで頑張ります。