一年間、部長をしてみて

この記事はOIC ITCreate Club Advent Calendar 2016 25日目の記事です。

www.adventar.org

メリークリスマス、OIC ITCreate Club Advent Calendar 2016の最後は、一年間ITCreate部の部長をしてみて感じたことや思ったことを書きたいを思います。

ITCreate部とは?

授業外でもプログラミングやネットワークなどをもっとやりたいひとが集まった部活です。 "つくりたいものを、作りたいときに、造りたいだけ、創る"をモットーにし活動しており、 今年は創立3年目を迎え1年目は十数名だったITCreate部も50名を超える大きな部活となりました。

ITCreate部 公式サイト

反省点

今年は1年生が30名近く入部してくれたのですが、現在残っている1年生は数名となってしまいました。 なぜ多くの1年生がITCreate部から去っていったのか考えてみました。

基本情報フィルタリング

ITCreate部には"基本情報フィルタリング"というものが存在します。名前の通りIPAの資格である基本情報技術者試験の資格(同等以上でも可)をもっていないとITCreate部に在籍できないというルールがあり、今年は合格者が少なかったというのも原因の一つだと考えられます。

今年は上記の結果もあり、"基本情報フィルタリング"は本当に部活に必要なのかと部活内で大きな話題となりました。 そもそもなぜ"基本情報フィルタリング"が存在するのかというと、"自分のやりたいことがある"という志の高い人が集まる部活で「基本情報ぐらいは取れるだろう」というのが"基本情報フィルタリング"の始まりみたいです。現在ではある程度の努力ができる人なのかを図る指標の一つとなっています。

なぜ合格者が少なかったのかを自分なりに考えて見た結果、1年生の基本情報に対しての勉強量や取り組み方を見て、1年生の"やりたいこと"が基本情報の取得ではなかったのではないかと言う一つの結論にいたりました。

"やりたいこと"が基本情報の取得ではない1年生に対し私たちは資格、資格と言いすぎたのかもしれません。もともとITCreate部は"やりたいことをやる"部活、そのやりたいことを一緒に探したり、応援することがITCreate部の部長としての仕事だったのかもしれません。

最後に

一年間、部長をしていてたくさんの得るものがあり、部長に選ばれ良かったと思っています。もうすぐ次の部長に交代しますが、あと一年ITCreate部には所属しているので後輩達が"やりたいこと"を見つけれるようサポートをしたいと思います。

最後まで読んでいただきありがとうございました。

Fluxって?

この記事はOIC ITCreate Club Advent Calendar 2016 18日目の記事です。

www.adventar.org

去年同じタイトルの記事を書けなかったので今年こそは書きます。 Fluxについて調べてみました。

※不完全燃焼です、この記事を読んでもFluxを理解することはできないと思います。

なぜFluxが必要なのか?

有名なアーキテクチャMVC(Model,View,Controller)があります。 Model:データと手続きを担当 View:モデルからデータを受け取り表示を担当 Controller:ユーザーの入力(イベント)をモデルに伝える担当

データのやり取り、表示、ユーザーの入力のハンドリングとそれぞれ役割をわけることで独立性の向上や保守性を保ちます。

MVCには一つ問題点があります。 MVCで調べるとModel,View,Controllerの関係を表す図があるのですが、ModelとViewに双方向の矢印が引かれていることがあります。これはモデルとビューの間に双方向のデータフロー が作られる可能性があるということを示しています。これによりデータの流れが複雑化しフローの理解やデバックが難しくなります。

複雑化の原因は双方向のデータフローにあるので、単方向のデータフローアーキテクチャであるFluxが誕生したようです。

Fluxを使うとどんないいことが?

色々調べてみたのですがメリットがわかりませんでした。 Fluxにメリットがないということではないと思います。自分自身がなんとなくMVCやFluxを使ってきたがために、そういうものがなかった場合どう行った問題・課題があるのかがわからないため、MVCやFluxのありがたさがわからないのだと思いました。

最後に

一度MVCやFluxを使わず開発してみて、それからMVCやFluxの勉強をした方がいいのだと今回調べてみて気付きました。 これはアーキテクチャだけの話でなくフレームワークにも言えるのではないかと思います。 アークテクチャやフレームワークがどう行った問題を解決するためにできたのかということを意識して勉強して行きたいと思います。

変な終わり方になってしまい、すみません。

最後まで読んでいただきありがとうございました。

Vue2.0で変わった所を調べて見た

この記事はOIC ITCreate Club Advent Calendar 2016 1日目の記事です。

www.adventar.org

今年もアドベントカレンダーの季節がやってきましたね。 10月にVue.jsのVer.2.0がリリースされ、現在では公式ドキュメントの和訳も終了しているので、公式ドキュメントを読みながら変更点を調べてみました。よく使いそうな部分をピックアップしたいと思います。

テンプレート

全てのコンポーネントは,1つのルート要素を持たないといけない仕様になりました。 全体を囲う要素が必要です。

<div>
  <p>foo</p>
  <p>bar</p>
</div>

ライフサイクル

削除

  • init (置き換え可)
  • beforeCompile (置き換え可)
  • compile (置き換え可)
  • ready (置き換え可)
  • attached
  • detached

追加

  • beforeCreate
  • beforeMount
  • mounted
  • beforeUpdate
  • updated

DOMを利用する際に利用していたreadymountedとDOMの更新後に実行されるVue.nextTick/vm.$nextTickで置き換えるようになったみたいですね。

とくに新しいライフサイクルが追加されたわけでなく1.0のライフサイクルの名称が変わっていたり、組み合わせで置き換えれるものばかりのようです。

Vue 1.x からの移行#ライフサイクルフック

v-for

  • 引数の順序変更

配列 : (index, value) -> (value, index)

オブジェクト : (key, value) -> (value, key)

JavascriptネイティヴなforEachmap、lodashなどの一般的なイテレータと一貫性を保つように変更されました。

  • $indexおよび$key の削除

暗黙的に割り当てられていた$index$keyは使用できず、明示的に書くように変更されました。

プロパティ

  • twoWayプロパティオプション削除

プロパティは暗黙的な双方向バインディングはされなくなり、全て単方向バインディングになりました。親の値を変更したい場合はv-onなどを使い明示的にイベントを発行する必要があります。

この変更に伴いv-bindへの.once.sync修飾子は削除されました。

組み込みディレクティブ

  • v-bindにおける真/偽

偽となりうる値はnull,undefined,そしれfalseのみとなり、0や空の文字列は真となるようです。

v-ifv-showなどのその他のディレクティブは、JavaScript の一般的な真がまだ適用されます。

コンポーネントがルート要素を持つ仕様になったのでコンポーネントタグでclickイベントなどを設定できるようになりました。 設定する場合は.nativeをつけます。

<my-component v-on:click.native="doSomething"></my-component>

フィルタ

v-modev-onディレクティブ上でのフィルタリングdebounceや、v-for上でのリストフィルタリングのfilterByは使用できなくなりました。

代わりにcomputedで算出された値を使用するようです。

展開

  • 属性内での展開

1.0で下記のように使用していたコードは使えません。

<button class="btn btn-{{ size }}"></button>

代わりにインライン式を使用するようです。

<button v-bind:class="'btn btn-' + size"></button>

リアクティブ

  • Aray.prototype.$removeの削除 代わりにネイティヴのArray.prototype.spliceを使用するようです。

まとめ

変更点をざっと見ましたが、全体的にVue.js独自の書き方やAPIを使わず、JavaScriptネイティヴで出来ることはネイティヴでやる方向になってると感じました。これによりVue.jsを知らない人でも読みやすくなったのではないかと思います。

まだVue2.0でがっつりコードを書いていないので今度Vue2.0で何か作って見たいと思います。

最後まで読んでいただきありがとうございました。

Scala関西サミット2016参加レポート

10月8日に産業創造館で行われた、Scala関西サミット2016にITCreate部の部員7名と参加しました。

summit.scala-kansai.org

参加してみて

参加した部員のほとんどがScalaを触ったことがなかったのですが、Scalaに興味を持ってくれたようで良かったです。 またScalaという言語だけでなくシステム開発の知識やチームでの開発の方法を学べたようです。 私もScalaについて興味を持ち、ScalaのPlayフレームワークを使いWebシステムを作ったり、他の言語の機能をScalaで実装して遊んでみようと思いました。

最後に

イベントの懇親会を終え帰宅中、後輩達が「今回、参加してよかった」、「次回も参加するために基本情報を頑張る」と言ってくれたので、学生スタッフのリーダーとして頑張って良かったなと思います。

勉強会やカンファレンスというものは「今の実力、技術で参加しても大丈夫なのだろうか?」、「話についていけないのではないだろうか」など学生にとってハードルの高いものだと思います。私も最初はそう思っていました。 ですが、参加してみると色んな人と出会うことができたり、知らなかった知識を得ることができたりと、とてもいい経験をすることができました。 なので私がリーダーとして参加し勉強会のハードルを下げることでたくさんの同期や後輩が同じ経験をできるのではないかと活動してきました。

私が中心となってイベントのスタッフをするのは今回が最後になると思います。 今回参加した後輩達が自分の後輩達に、私と同じような活動をしてもらえるよう学生リーダーとして参加した経験を後輩達に伝えていきたいと思います。

GRAND FRONTEND OSAKA2016 スタッフレポート

こんにちは、44です。

8/27,28に大阪イノベーションハブで行われたGRAND FRONTEND OSAKA2016というイベントで運営スタッフとして参加させていただいたのでその感想を書きたいと思います。

はじめに

私が初めて関西フロントエンドUGに参加したイベントは去年行われた「GRAND FRONTEND OSAKA2015」でした。その当時私はjQueryぐらいしか知らずフロントエンドのフの字も知らない状況で、 イベントではAnguler2やWebAssembly,Gulpなど聞きなれないキーワードが飛び交っておりキーワードをメモするので精一杯でした。イベントの後の懇親会に参加し関西フロントエンドUGの温かさを感じ 関西フロントUGに参加しました。 なのでこの「GRAND FRONTEND OSAKA」とイベントは私にとってすこし特別なイベントなのです。

GRAND FRONTEND OSAKA2016とは?

フロントエンド界隈の最先端やホットな話題のセッションが聞けるイベントになっております。

スタッフとして参加した経緯

私は普段から関西フロントエンドUGというコミュニティの勉強会などに参加しており、その流れで今回運営スタッフとして参加させていただきました。

イベントに感想

今回、「GRAND FRONTEND OSAKA」初めての2Daysでした。 1日目は「最新の技術に触れてみよう!」といことで様々なコミュニティや企業がブースを出しセミナーを開催し、学んだ技術で1日ハッカソンをするという内容でした。 思った以上に参加された人たちがもくもくと開発をしており驚きました。私もハッカソンが好きなので次回はスタッフをやりながら参加してみようかなと思います。

2日目はセッション形式でした。今年も参加者を置いていくセッションが多く「GRAND FRONTEND OSAKA」独特の雰囲気を味わえました。その中でもおのうえさんの 「プログラミング言語Rust」は「ここフロントエンドの勉強会だよな?」という内容で参加者を置いていった度が一番高かったのではないかと思いますが私は好きでした!

1日目は初心者や中級者向け、2日目は上級者向けとバランスが取れ、去年とは違った「GRAND FRONTEND OSAKA」になったと思います。

スタッフとして参加して

大きなイベントのスタッフとして参加するのは今回が2回目ぐらいなのですが、スタッフとして参加するたびにイベント企画や運営の難しさを感じます。 ですが、参加していただいた方々に喜んでいただき、企画、運営をする楽しさを感じることが出来ました。

最後に

一年前では何一つわからなかったキーワードが大概わかるようにっており、今回の「GRAND FRONTEND OSAKA」ではこの一年の成長を実感することが出来ました。 次回もスタッフとして、できれば登壇者として参加したいと思います。

みなさん、是非次回の「GRAND FRONTEND OSAKA2017」に参加してください。よろしくお願いします。

Vue-cliでVue.jsを始めよう

44です。最近Vue.jsを触り始めて色んな人にオススメしています。 今回は、コマンド一つでVue.jsのプロジェクトを作成できる「vue-cli」を紹介したいと思います。

Vue.jsとは?

vue-cliを紹介する前にVue.jsの紹介をしたいと思います。 Vue.jsとはJavaScriptのライブラリの一つでMVVMのViewの部分を担当するライブラリです。 双方向バインディングに特化したシンプルなライブラリです。

Vue.jsのいいところ

公式ページの和訳がしっかりしている。

新しい技術を学ぼうとした場合、私のような英語が得意でない人は公式サイトやQiitaの記事が英語だらけだとそれだけでとてもハードルの高いものに思えてしまいます。 Vue.jsは公式ページのしっかりしているので安心です。さらにVue.jsで利用する主要プラグインの日本語ドキュメントも整備されているので学習しやすいのではないかと思います。

様々な規模のアプリケーションで仕様できる

初めに書いた通りVue.jsは双方向バインディングに特化したシンプルなライブラリです。なので簡単なツールを作る場合などに気軽に導入できます。 ルーティング用のプラグインvue-router、Flux や Reduxのようなステートを管理するためのプラグインvuexを入れることでSPAや複雑なアプリケーションなどを作成することができます。

なぜvue-cliが必要なのか

Vue.jsではコンポーネントといい、構造(HTML)、装飾(CSS)、イベント、データ(JavaScript)をひとまとめにして管理することができます。 Vue.jsではtemplateURLなど外部からHTMLファイルを読み込む機能はサポートされていません。その理由はこちら

HTMLをjsファイルに書くとシンタックスハイライトの恩恵を受けれなかったり、ファイルのコード量が増えてしまいます。 また、構造(HTML)、装飾(CSS)、イベント、データ(JavaScript)をひとまとめにかける.vueという便利なファイルがあるのですがWebpackやBrowserifyを使う必要があります。 WebpackやBrowserifyを導入することで学習コストが増えてします。簡単に学べるVue.jsを難しいものにしてしまい挫折してしまう人が出てくるかもしれません。 そういった問題をVue-cliは解決してくれます。

vue-cliとは?

WebpackやBrowserifyの設定ファイルや必要なノードモジュール、ユニットテスト環境をコマンド一つで用意してくれるものです。 vue-cliにより、すぐアプリケーションのコードを書くことができます。

最後に

Vue.jsが全てに対して最適なライブラリだとは思っていません。Vue.jsをJSフレームワークの入門として学習し、用語などを理解しAngulerやReactを勉強するのがいいのではと思っています。 ぜひVue.jsを勉強してみてください。

セイカハッカソン

京都精華大学で6/4,5の2日間開催される学生限定ハッカソンに参加してきました! 音楽、日本画、人文、建築などの様々なコースの方が参加しており、大半が精華大生でした。

驚く事ばかりの美大生とのハッカソン

自己紹介

まず自己紹介をしたのですが、「A3の紙3枚を使って自分を表現してください」っと言われ情報系専門学生の私は「???」となってました。周りを見るとおもむろに紙を織り出す人や、筆を取り出し絵を描き始める人などがいてさすが美大と驚きました。

テーマ発表

自己紹介も終えテーマ発表! 今回のテーマは「新しいバースデーパーティー」。 このテーマを元にアイデアソンとチームビルディングをしました、各々が考えたアイデアに興味がある人同士チームを組むというものでした。 誕生日の人を閉じこめ脱出できないと祝って貰えない誕生日会や和風の誕生日会、日付変更線を越えてもらって2度誕生日を体験してもらう誕生日会、私たちの誕生日会の様子をスクリーンなどでリアルタイム実況をする4つのチームできました。 私達のチーム以外ITの要素がほぼ0でこれはハッカソンだよな?どうするんだろう?と思いました。

ハッカソンスタート!!

そしてハッカソンが始まり案の定パソコンでカタカタしているのは私達のチームのみ! 1日目の途中でアイデア発表!私達はリアルタイムの実況にプラスでチャットの機能とチャットの盛り上がり度によってスクリーン上の誕生日ケーキがグレードアップしていくという誕生日会を盛り上げるツールを発表しました。 そこで精華の先生方からのポジティブな会話やネガティブな会話(悪口など)でケーキにサソリや靴下などゲテモノが追加されるとか、ケーキが性格を持ち出すなどのぶっとんだアドバイスに私は「ポジティブ、ネガティヴ、意味解析どうやったら実装できるのだろう」と実装面を考えすぎて難しい顔をしていました。 いろいろ悩みながらチームのメンバーとアイデアのブラッシュアップをして1日目を終えました。

魔の2日目

前日に先生方に頂いたアドバイスを元にチャットをしていると突然イベントが発生しみんなで提示された回数連打しないとケーキにゲテモノが追加されてしまうというゲームを取り入れようという事になりました。1日目にぐっすり寝てしまい進捗も4割程度、発表まであと5時間ということで焦りながらコードを書いていき、チャットで画像を送る機能、しりとりができる機能、ゲテモノイベント機能を死に物狂いで実装していました。機能が出来てデバックをしている時チームの女の子が作った機能で遊びデバックの邪魔をされたのですが、楽しそうに遊んでる姿に元気をもらいなんとか最後まで実装する事が出来ました。

 最終発表

最終発表が始まり、各チームが考えた「新しい誕生日パーティー」のデモをしたのですが、どのチームのデモも自然と笑いが起こりハッカソンの発表と思えない雰囲気でした。

まとめ

全く違う分野の人とハッカソンをしてみて、常識や発想の違いなど様々な刺激を受ける事ができました。 またどのチームも発表の演出が上手でハッカソンでの「見せ方」の重要性を再認識させられました。 様々な分野の知人、友人ができたことがセイカハッカソンに参加して得た1番の収穫です。

最後まで見ていただきありがとうございました。