paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

JavaScriptだけでTrello風タスク管理ボードを開発できるライブラリ「jKanban」を使ってみた!

f:id:paiza:20180418115937j:plain
どうも、まさとらん(@0310lan)です!

今回は、簡単なJavaScriptコードだけでTrello風の「タスク管理ボード」を開発することができるライブラリのご紹介です!

非常にカスタマイズ性が高く、自分好みのタスク管理アプリを構築したい人などには最適でしょう。

コードも簡単で初心者の方もすぐに理解できると思うので、ぜひ参考にしてみてください!

jKanban

f:id:paiza:20180418120030j:plain

■「jKanban」の使い方

それでは、まず最初に「jKanban」を利用するための準備から始めていきましょう!

必要になるのは専用の「JS / CSS」ライブラリで、GitHubからそれぞれ取得して読み込むだけなのでお手軽です。


これらのライブラリは次のようにHTMLへ追記しておけば準備完了です。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jkanbanサンプル</title>
    <link rel="stylesheet" href="/css/jkanban.min.css">
</head>
<body>


    <!-- ここにタスク管理ボードが表示される -->
    <div id="mykanban"></div>




    <script src="/js/jkanban.min.js"></script>
    <script>


        //ここにプログラムを書いていく!


    </script>
</body>
</html>

「divタグ」を1つ配置していますが、ここにあとから「タスク管理ボード」を表示させるようにしたいと思います。

今回は、id属性名として「mykanban」を設定しています。

導入準備としてはこれだけです。…簡単ですね。

■「タスク管理ボード」を作ってみよう!

準備が整ったところで、いよいよ「タスク管理ボード」を作成していきましょう!

まず最初にやることは、「jKanban」のインスタンスを作ることです。

const kanban = new jKanban({ オプション });

インスタンスを作る際に、オプションを指定することである程度の初期設定ができるようになっています。


今回は、サンプルとして次のようなオプションを設定してみました。

const kanban = new jKanban({


    element: '#myKanban',   //タスク管理ボードを表示させたいHTML要素


    gutter: '15px',   //ボード同士の間隔


    widthBoard: '250px',   //ボードのサイズ


    boards: defaultBoards   //初期状態のボードの中身をJSONで指定


});

基本的なオプションとしては、タスク管理ボードを表示させたいHTML要素の指定やボードのサイズ・間隔などがあります。(オプションの詳細はコチラ


注目していただきたいのは「boards」というプロパティに指定するJSON形式のデータです。

これは、必要な「タスク」や「管理ボード」をあらかじめJSONデータで用意しておけば、読み込むだけですぐに独自のタスク管理ボードを表示させることができる機能になります。


そこで、今回は次のようなJSONデータを作ってみました!

const defaultBoards = [


    {
        "id": "sample-board-1",
        "title": "タスク",
        "item": [
            { "title": "報告書の作成" },
            { "title": "14時から打ち合わせ" }
        ]
    },




    {
        "id": "sample-board-2",
        "title": "進行中",
        "item": [{ "title": "○○案の企画書作成" }]
    },




    {
        "id": "sample-board-3",
        "title": "完了",
        "item": [{ "title": "日報の提出" }]
    }


];

この例だと「defaultBoards」という名称でJSONデータを作成しており、3つのタスクボードを表示できるようにしています。

「id」は固有の英文字を指定するようになっており「title」がそのままボードのタイトルで「item」は各ボードの中身となる1つずつの「タスク」になります。


実行するとこんな感じです!

f:id:paiza:20180418120327j:plain


タスクの移動もドラッグ操作で簡単にできるようになっています!

f:id:paiza:20180418120341g:plain

もちろん、オプション設定でカラー配色なども好きなように変更できるし、ボードの数やタスクを動的に増やすことも可能です。


このサンプルのソースコードは以下のリンクから閲覧可能です!

【 JSONを使ったサンプルデモ|GitHub 】

■タスクを入力して追加できるようにしてみよう!

今度は、Trelloみたいに自分でタスクを入力して追加できるようにしてみましょう!

この方法だとJSONを用意していなくても利用できるので、さらに応用範囲が広くなります。


まず最初にオプション設定で、以下のように新しく2つの項目を追加します。

const kanban = new jKanban({


        ・
        ・
        ・
    addItemButton   : true,


    buttonClick: (elem, id) => addFormElement(id)


});


「addItemButton」というプロパティを「true」にすると、ボードにタスクを追加できるボタンが表示されます。

f:id:paiza:20180418120559j:plain

そして、このボタンをクリックした時の処理を「buttonClick」というメソッドに記述すればOKです。


今回は「addFormElement()」という関数を作って指定しました。

関数の中身ですが、フォーム要素を作ってタスク入力用の「inputタグ」を配置してあげるだけです。

function addFormElement( id ) {


    const formItem = document.createElement('form');


    formItem.innerHTML = '<input type="text">';
    kanban.addForm( id, formItem );


}

ボード固有のIDを受け取れるようになっているので、それを「addForm()」メソッドに指定すればOK!


あとは、タスク登録用のイベント処理を記述すれば完成です!

function addFormElement(id) {
        ・
        ・
        ・


    formItem.addEventListener('submit', (e) => {
      e.preventDefault();


      //入力された「タスク」をボードに登録
      kanban.addElement(id, {"title": e.target[0].value});


      //フォーム要素を非表示にするため削除
      formItem.parentNode.removeChild(formItem);
    }) 


}

「addElement()」メソッドに入力された文字列を指定すればボードにタスクが追加されます。

最後に生成したフォーム要素を削除すれば、Trello風タスク管理ボードの完成です!


実行するとこんな感じです!

f:id:paiza:20180418120648g:plain

ここまでのサンプルコードは、以下のURLから閲覧できるので参考にしてみて下さい!

【 タスクを入力して追加するサンプルデモ|GitHub 】

■「jKanban」のカスタマイズについて

「jKanban」には多彩なメソッドやAPIが提供されているので、自分好みにボードを細かくカスタマイズすることが可能です。

例えば、オプション設定の「click」メソッドを以下のように追記します。

const kanban = new jKanban({


        ・
        ・
        ・
    click: (elem) => kanban.removeElement(elem)


});


「removeElement()」にタスク要素(elem)を指定するだけで、以下のようにクリック操作で削除できるようになります!

f:id:paiza:20180418120758g:plain


また、JSONデータを用意する際に「dragTo」へ移動可能なボードを指定することができます!

{
        "id": "sample-board-1",
        "title": "タスク",


        "dragTo": ['sample-board-2'], 


        "item": [
            { "title": "報告書の作成" },
            { "title": "14時から打ち合わせ" }
        ]
},

上記の場合だと、IDが「sample-board-2」のボードにだけタスクをドラッグ移動できるという意味になります。


これを上手く活用すると、以下のようにタスクをいきなり「完了」ボードに移動できないルールを簡単に作れるわけです!

f:id:paiza:20180418120847g:plain

他にも、「addBoard() / removeBoard()」でボード自体を追加・削除できたり、「findElement()」でタスクを横断検索する機能なども簡単に作れます。(APIの詳細はコチラ


これらのカスタマイズも含めた最終的なサンプルデモのソースコードを以下のリンクから閲覧できますので、ぜひ参考にしてみてください!

【 jKanbanのサンプルデモ|GitHub 】

JavaScript入門編は全編無料!動画で学べるpaizaラーニング


動画でプログラミングが学べるpaizaラーニングでは、JavaScript入門編はもちろんPython、Java、C言語、C#、PHP、Ruby、SQL、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。

JavaScript入門編」「Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。

また、普段有料の「Java入門編」が、4/17(火)~4/23(月)の期間限定で【全編無料】となっております。この機会にぜひごらんください。

■まとめ

今回は、JavaScriptで独自の「タスク管理ボード」を簡単に開発できるライブラリ「jKanban」を駆け足でご紹介しました!

ピュアなJavascriptだけで作られたライブラリなので導入が簡単であり、さらにCSSフレームワークなどと組み合わせればオシャレなボードをすぐに構築できます。

個人やチームのプロジェクト管理などにも応用できるので、ぜひみなさんもオリジナルのタスク管理ボードを作って試してみて下さい!


<参考>



paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

paizaのスキルチェック

Pythonしかやりたくない!?一つの言語にこだわる未経験者がエンジニアとして採用されない理由

f:id:paiza:20180417180318j:plain
Photo by Ray Bouknight
f:id:paiza:20140916135428p:plainこんにちは、谷口です。

「Python最高!」
「Pythonってほかの言語と比べて何がいいの?」
「ほかの言語は知らんけどPython最高!」
「……」
みたいな若いエンジニア(もしくはエンジニア志望者)、皆さんの周りにもいませんか?

エンジニアとして「好きな技術がある」のはもちろんとてもよいことですが、

  • 実務経験もないのに「Pythonの求人にしか応募したくない」
  • 「ほかの言語は使ったことがない」と言って好きな言語しかやりたがらない

みたいな感じで、経験が浅いにもかかわらずこだわりが強すぎる人は、転職活動ではマイナスになってしまうケースがよくあります。(別にこれはPythonに限った話ではないのですが、特にPythonにこだわりたがる人があまりにも多いので例にしました…)

今回は、「この言語しかやりたくない!」と言う人が勘違いしていることと、エンジニアとして転職するためにすべきことについてお話しします。

■「この言語しかやりたくない!」と主張する実務未経験者が勘違いしていること

◆言語にこだわりすぎると敬遠される理由を知らない

開発エンジニアは技術を使う仕事なのに、なぜ好きな技術にこだわりすぎると応募先に敬遠されてしまうのでしょう?

企業にとって開発言語とは、あくまで目的を達成するための手段にすぎないからです。

たとえば、「うちの会社の目的は、Pythonを使ってプロダクトを作ること!」という会社は、まあ、ほとんどありません。

それよりも、多くの企業は「こんなサービスを作りたい→その開発に適しているから、Pythonを選んで使っている」と思ったほうがいいでしょう。

企業の目的は「Pythonを使うこと」ではありませんから、もっと便利な言語が出てきたら、Pythonから乗り換える可能性もあります。「うちのサービスのスマホアプリを作ろう」となったら、スマホアプリに適した言語を勉強して使う必要も出てきます。

そんなときに「作りたいものに対して最適な技術」を調べたり、選定したりするのも含めてエンジニアの仕事です。ただ「好きな言語を使うこと」だけが仕事ではありません

ですから、「この言語しかやりたくない!」といった主張が強い人は「目的を理解していなさそう」「手段と目的を取り違えそう」に見えて敬遠されてしまうのです。その言語を既に極めたスペシャリストならまた別ですが…。

「自分はPythonが好きだからPythonの求人しか受けたくない」みたいな人は、ふしぎと実務未経験者が多いです。逆に経験もスキルも豊富な人は、特にメイン言語にこだわりはない人も多くいます…。

◆一つの言語だけを追求すればスペシャリストになれると思っている

なれません。

たとえば、Pythonしか使えない人が、Pythonのスペシャリストになれる可能性はありません。

スペシャリストというのは、「他の言語と比べて、Pythonはこれが得意だがこれは不得意なので、こんな開発をする場合に適しているが、こんな開発をするなら別の言語のほうが適している」「C言語で書かれているPythonライブラリの内容も読み解ける」などの知識を網羅しているレベルの人です。

現役のPythonスペシャリストで「ほかの言語は全然知らないんだけど…」なんて人はまずいません。

◆現実的な求人数や求められるレベル感を理解していない

Pythonばかり例に挙げて申し訳ないですが……近年Pythonエンジニアの平均給与が高いとか、需要が高まっているとか言われていますよね。

これは間違いではありませんが、Pythonエンジニアの平均給与がなぜ高いかというと、「Pythonが機械学習の分野で使われているケースが多い」からです。で、もっと言うと平均給与や需要が高い要因のひとつとして、機械学習系の業務は難易度が非常に高いため、実務で結果を出せる人はそれだけで価値があるからです。

だから、別にPythonさえできるようになれれば、エンジニアとしての需要が高まるわけでも、給与が高くなるわけでもありません。

ここをすっ飛ばして「時代はPythonだ!」と思い込んだままPythonだけを勉強しても、あまり思うような転職結果には結び付かないかと思います。

Pythonって初心者でも書きやすい・勉強しやすい言語ですよね。これって、裏を返せば「ちょっと勉強したら誰でも書けるようになれる」ということですから……「Pythonがちょっと書ける」だけのことが、ものすごい付加価値になるわけではありません。

◆一つの言語でプログラミングするだけの仕事があると思っている

メイン言語ひとつで成り立っているサービスなんて、まずありません。

Webサービスを作って運営しようと思ったら、たとえばRubyをメイン言語として、フロントエンドを作るのにJavaScriptやHTML/CSSを使ったりしますし、データベースを使うためにSQLを書けるようになる必要も出てきます。ほかにも、もっとサブ言語を駆使して複雑な処理を実装しているサービスもあるかと思います。

加えて、エンジニアの業務は「一人でもくもくとPCに向かってコードを書く」ことだけではありません。

グループでの開発やミーティング
サービス企画から考える開発
エラー処理やセキュリティ対策
あらゆるパターンを網羅した動作テスト
人のコードを読んで修正するリファクタリング
…などなど、これに限らずさまざまな仕事も発生します。

■エンジニアとして転職するにはどうすべきか

◆実務に使われている技術を全体的にもっと知る

「一つの言語しか使いたくない!」という未経験者の場合、開発実務の全体像や、ほかに必要とされる技術について把握していないケースが多いので、まずはそこから学んだほうがいいです。

たとえば、簡単なWebサービスを自分で作ってみると、Rubyで作るならRailsやSinatraといったフレームワークがあって、フロントエンドはこう作って、DBを操作するにはこうする……みたいな感じで、Webサービスを作って公開するまでの一連の流れ、それぞれのツールの使い方、どこにどんな技術が必要で、何の作業が必要になるのか……などがわかります。

特に「未経験から目指したい」ジャンルがあるのであれば、転職先が決まるのを待たずに、自分で勉強して実際に動くものを完成させてみたほうが手っ取り早いですし、採用選考ではよいアピールにもなります。

いろいろな技術に触れてみるのも、よい情報収集になります。同じ未経験者で「PythonしかやったことないのでPythonがやりたい」という人と、「Pythonが好きだけど、情報収集のためにRubyやPHPも使ってみたことで、それぞれの特徴や違い、何に向いているかがわかった」という人が応募してきたら、企業がどちらを採用したいかは明らかですよね。

先日、paizaのエンジニアが勉強のためにスライド作成用のmarkdownエディタを開発した話を書きましたが、現役エンジニアでも「とりあえず動くものを作ってみる」のは有効な勉強方法です。
paiza.hatenablog.com

上記の記事の内容が全然わからん……という初心者の方でも、paizaラーニングだとプログラミング未経験者から始められる「Ruby入門編」「Java入門編」などから、実際に動くWebアプリが作れる「Webアプリ開発入門」まで公開していますので、そのあたりから始めてみるのがいいかと思います。

ちなみにpaizaラーニングでは、現在期間限定で「Java入門編」を全編無料公開しています。

◆求人情報を集め、複数企業に応募をして現実を知る

paizaでなくてもさまざまな求人票を見まくって業務内容や必須要件をチェックしていると

  • 自分がやってみたいと思う求人では、どんなレベルのスキルや経験が求められているのか
  • 自分が応募できる求人では、どんな開発環境が使われているのか

といったことがつかめてきます。

また、転職活動中は気になる企業があれば実際に応募をしてみるとよいのはもちろんですが、特に未経験や経験が浅い方ほど、いろいろな企業に応募してみて、情報や比較材料を集めたほうがいいかと思います。

paizaでは、事務局にご相談いただければ応募者の方のレベルにあった求人をご紹介することもできます。

paizaの転職ステップについて詳しくはこちら

■まとめ

好きな技術、使いたい技術があるのは、エンジニアとしてよいことです。

ただ、実務においてそれにこだわりすぎると、手段と目的が逆になってしまうので、それはエンジニアとして最適ではない……という話です。

「これが好き、これしか使いたくない」で止まらず、そこからさらに自分ができる範囲を広げていくにはどうすべきか、を考えて実行に移していったほうが、エンジニアへの転職が成功しやすいでしょう。


paizaは、開発経験の浅い方や開発業務が未経験の方へ向けて、エンジニアとしての転職をサポートするサービス「EN:TRY」をスタートしました。

実際に、開発業務未経験からエンジニアになった方、採用を担当された方のインタビュー記事も掲載しています。
詳しくはこちら


EN:TRY」は、エンジニア職未経験者や経験が浅い方をITエンジニアキャリアへ導く転職サービスです。

これまでのpaiza同様、EN:TRYもプログラミング力、コーディング力で転職をする「コーディング転職サイト」です。転職希望者には「プログラミングスキルチェック」を受けていただき、提出していただいたコードをもとにスキルランクを評価します。求人には必要なスキルランクが設定されており、評価がそれを満たしていれば書類選考なしで応募が可能です。

詳しくはこちら
“EN:TRY"

まずはスキルチェックだけ、という使い方もできます。すぐには転職を考えていない方でも、自分のプログラミングスキルを客観的に知ることができますので、興味がある方はぜひ一度ご覧ください。

詳しくはこちら
paizaのスキルチェック

初心者向け・Javaが動画やクイズで学べる!プログラミング学習コンテンツ6選

f:id:paiza:20180416203713j:plain
Photo by Barney Moss
f:id:paiza:20140916135428p:plainこんにちは。谷口です。

Java初心者の皆さんは、普段どうやって勉強をしていますか?

  • Web上で学習サービスを探す
  • 教えてくれる人を探して聞く
  • スクールに通う
  • 書籍や学習サイトに書いてある情報を読む

などの方法があるかと思いますが、「学習サイトやYouTubeなどの動画」でも、Javaについて学ぶことができます。

動画を使えば、無料、もしくは安価で楽しく・効率よくJavaについて勉強できます。

今回は、そんな動画やスライドなどを見ながらJavaを学べる学習コンテンツを6つご紹介します。


【目次】

■Javaが動画やクイズで学べる学習コンテンツ

◆ProgrammingKnowledge:Java Tutorial For Beginners

※英語

www.youtube.com

さまざまな言語のチュートリアル動画が公開されているチャンネルで、Java以外にもPython、PHP、Scalaなどのチュートリアル動画があります。

◆伊沢剛:Java入門

※日本語

www.youtube.com

伊沢さんによるプログラミング解説動画は、ほかにもC言語、Python、Swiftなどがあります。

Pocket Programming - Android/Java編

※日本語

f:id:paiza:20180416200857j:plain

Javaの基礎とAndroidアプリ開発手法が学べるAndroidアプリです。(Ruby/Rails編はiOS版とAndroid版がありますが、Android/Java編はAndroid版のみのようです)

f:id:paiza:20171219142653j:plain

JavaとAndroid開発について、2週間ずつの学習セットが公開されています。1問1答の3択クイズ形式で、隙間時間でもスマホで勉強できます。

ドットインストール

※日本語

f:id:paiza:20171205170439j:plain

動画を通してJavaの書き方、環境構築方法などが学べます。

paizaラーニング「Java入門編」

※日本語

オンラインでプログラミング学習ができる「paizaラーニング」には、JavaはもちろんPython、Ruby、C#、PHP、C言語、JavaScript、HTML/CSS、SQLなどなど多数の言語から、Webアプリ開発入門、ITエンジニアのキャリア入門などのレッスンもございます。

Java入門編」は、ふだんは一部有料ですが、本日から一週間限定で【全編無料】となっております。ご興味のある方はぜひごらんください。

コードガールこれくしょん

※日本語

paizaが公開しているコードガールこれくしょん略してガルこれは、ナビゲーターと一緒にプログラミング問題を解き、「コードガール」を集めながらストーリーを進めていく、プログラミング学習ゲームコンテンツです。JavaはもちろんPyhton、Ruby、PHP、C、C++、C#、JavaScriptに対応しています。

ゲーム内ではクエスト報酬やログインボーナス・ミッションクリア等の各種特典として手に入る「コイン」や「ダイヤ」を使って、ガチャでさまざまな「コードガール」を収集することができます。クエストで有利になる特殊スキルを発動させたり、「これくしょん」に入れてマイページに飾ったりと、コードガールをたくさん集めるほど楽しみ方が広がります。

■まとめ

Javaエンジニアの求人は、かつては金融関係のシステム(ATM等)などの比較的大規模開発案件が中心でしたが、近年はAndroidのネイティブアプリ開発現場などでも増加しています。Javaは長年にわたって世界中の幅広い開発分野で使用されているため、求人数も非常に多く、エンジニアを目指す人であれば勉強しておいて損はありません。

「興味がわいてきた!」という方は、学習サイトでも、書籍でも、自分が気になるところから挑戦して、ぜひJavaプログラミングに触れてみてください。

そしてある程度の基礎が身につきましたら、ぜひpaizaでご自分のスキルをはかってみてくださいね。


Java入門編」は、ふだんは一部有料ですが、本日から一週間限定で【全編無料】となっております。この機会にぜひごらんください。




paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

paizaのスキルチェック