スタッフブログ

STAFF BLOG

アプリ開発日誌

2021.08.26

知っているとデザインが楽になるJavaScriptライブラリ5選 

こんにちは ヤマモトです。
夏も本番となり、コロナ以外に熱中症も意識しないといけない季節になってきました。

さて、突然ですが質問です!!

プログラミング言語といわれているものにはPHPやJava、Cなどの様々な種類があると思いますが、
一番多く使われているのはなんでしょうか?
人によって好き嫌いはあると思いますが、少し考えてみてください。

5183268

それでは正解を発表したいと思います。

タイトルで察している方もいると思いますが、正解は。。。。

JavaScriptです!!

これは個人的な見解ではなく、StackOverflowというプラットフォームにて65000人を対象に
調査した結果になります。
Vue.jsやReactなどの多くのフレームワークを持ち、近年はReactNativeやFlutterの登場もあり、今後も注目されていく言語だと思います。

スクリーンショット 2021-07-25 20.46.27参照元:StackOverflow

そこで今回はJavaScriptでデザインが楽になるライブラリを5つ紹介したいと思います!

1.three.js

  three.jsは3Dレンダリングにより、平面ではなく立体的なWebサイトを構築できるライブラリです。立体的にすることにより2Dでは難しかった表現が可能となり、より多彩なWebサイトを作成することができます。3DのWebサイトを見かける機会はそこまで多くないですが、もし作成される際は実装の
敷居を下げてくれるライブラリなので、是非使ってみてください。
また、公式サイトにいくつかthree.jsを使ったサイトがのっているので興味のある方は見てみてください。

スクリーンショット 2021-07-29 13.56.24

2.Base Web

 Base Webはシンプルながらも見やすいデザインをボタン一つからテーブルまで、簡単に実装してくれるライブラリになります。
また、公式サイトでは、デザインをカスタムすることも可能で、カスタムしたUIのコードも表示してくれているので、多数のコンポーネントを低コストで実装することができます
そのため、あまりデザインに手間をかけられない時などでも、ユーザーが使いやすいUIを簡単に実装することができるため、おすすめです!
baseweb

3.Chart.js

  chart.jsは折れ線グラフや円グラフなどのグラフをCSSを使わなくても簡単に描画することができるライブラリです。
図形を描画するライブラリは他にもありますが、他のライブラリなどと比べても少ない学習コストで複雑な表やグラフが作成できるというのが魅力だと感じます。
静的・動的を問わず、魅力的な表や図を実装できるため、Webサイトでグラフなどを作成する際に是非使ってみてください。

ec_chartjs

4.anime.js

  anime.jsは名前の通り、CSSなどでは難しいようなアニメーションを簡単に実装することができ、「CSS」「CSS Transform」「SVG」「DOMの属性」「JavaScriptオブジェクト」など幅広い
アニメーションに対応したライブラリです。アニメーションの種類も多く、CSSやjQueryなどに依存しないことと、簡素な指定で直感的にアニメーションを作成できるのが特徴です。
Webサイトの細々とした動作からHTMLゲームのアニメーションまで幅広く使えるライブラリのため、
アニメーションを使う際は是非使ってみてください。

147185186778975000_08

5.dhtmlx

  dhtmlxはグリッド、チャートのような基本的なものから、カラーピッカー、カルーセル、
カレンダーのようなものまで、様々な機能を簡単に実装することができるライブラリです。
CMSなどよりはできることも限られますが、その分簡単に機能を追加することができるため、簡素な
アプリであれば、これだけでも十分に実装することができると思います。
24種類のコンポーネントが用意されていますが、一部だけを使うことも可能なため、
スケジュール管理やカレンダーなどの機能を実装する際は使用を検討してみてください。

dhtmlx

最後に

冒頭でもお伝えした通り、JavaScriptは様々なフレームワークやライブラリを持ち、覚えることも
多いですが、その分、面白みも深い言語ではないかと感じます。そのため、まだまだわからないことも多いですが、もっと深く理解できるよう学んでいきたいと思います!

ライタープロフィール

【ヤマモト】
エンジニア。システム開発部Webチーム所属。
学生時代にプログラミングを勉強し、SES会社にて資産管理アプリケーションのテスターを経験。その後、エンジニアとしてEDAに入社。

BACK

お問合せ

イーディーエーに興味をお持ちいただいて
ありがとうございます!
スマホアプリに関するご相談、
お見積りや弊社へのご質問など、
お気軽にお問い合わせください。
担当者より折り返しご連絡させていただきます。

    お名前必須
    会社名
    メールアドレス必須
    電話番号必須
    お問合わせ種別必須
    お問合わせ内容必須

    アンケートにご協力ください。
    弊社サイトへはどのようにしてアクセスされましたか?

    個人情報のお取扱いに関する同意事項

    1.事業者の氏名又は名称

    株式会社イーディーエー

    2.個人情報保護管理者の氏名又は職名、所属及び連絡先

    個人情報保護管理者 小宮 保人
    Mail:[email protected]

    3.取得した個人情報の利用目的

    当フォームで取得した個人情報は、お問い合わせに関する回答のために利用し、目的外利用はいたしません。

    4.弊社が取得した個人情報の第三者への委託、提供について

    弊社は、ご本人に関する情報をご本人の同意なしに第三者に委託または提供することはありません。

    5.個人情報保護のための安全管理

    弊社は、ご本人の個人情報を保護するための規程類を定め、従業者全員に周知・徹底と啓発・教育を図るとともに、その遵守状況の監査を定期的に実施いたします。
    また、ご本人の個人情報を保護するために必要な安全管理措置の維持・向上に努めてまいります。

    6.個人情報の開示・訂正・利用停止等の手続

    ご本人が、弊社が保有するご自身の個人情報の、利用目的の通知、開示、内容の訂正、追加又は削除、利用の停止、消去及び第三者への提供の停止を求める場合には、下記に連絡を頂くことで、対応致します。

    株式会社イーディーエー 個人情報お問合せ窓口
    〒106-0032 東京都港区六本木7丁目14番23 ラウンドクロス六本木4F
    TEL:03-5422-7524 FAX:03-5422-7534
    Mail:[email protected]

    7.ご提供いただく情報の任意性

    個人情報のご提供は任意ですが、同意を頂けない場合には、第3項にあります利用目的が達成できない事をご了承いただくこととなります。

    8.弊社Webサイトの運営について

    弊社サイトでは、ご本人が弊社Webサイトを再度訪問されたときなどに、より便利に閲覧して頂けるよう「クッキー(Cookie)」という技術を使用することがあります。これは、ご本人のコンピュータが弊社Webサイトのどのページに訪れたかを記録しますが、ご本人が弊社Webサイトにおいてご自身の個人情報を入力されない限りご本人ご自身を特定、識別することはできません。
    クッキーの使用を希望されない場合は、ご本人のブラウザの設定を変更することにより、クッキーの使用を拒否することができます。その場合、一部または全部のサービスがご利用できなくなることがあります。