Svelteとは？｜最新のJavaScriptフレームワークを徹底解説
おはようございます。Shotaです。
最近のフロントエンド開発で、SvelteというJavaScriptフレームワークをよく耳にするようになりました。
ReactやVueのように宣言的にUIを記述できるので、簡単にWEBアプリケーションやUIを開発できるのが最大の特徴です。
フロントエンド開発でJavaScriptを書いている人の中には、
🤨「Svelte？何だそれ」
😥「Svelteを使うメリットって何があるのだろう...」
このように考えている方も少なくないと思います。
そこで、今回の記事では最新のJavaScriptフレームワークSvelteについて詳細に解説します。
それでは早速、本題に入りましょう。
Svelteとは？
Svelteとは、ブラウザ上で動かすUIを構築できるJavaScriptフレームワークです。UI部品を作るためのライブラリやフレームワークであるReactやVueに対抗するべき開発されました。主に、WEBアプリのフロントエンド開発に使われます。
Svelteでは.svelteという拡張子のファイルにHTMLやCSS、JavaScriptを書いてそれをコンパイルすることで動作させることができます。
SvelteはReactのように複雑ではないので、フロントエンド開発の初心者でも学習のコストはそこまで高くありません。また、手軽に開発できるので小規模なアプリを開発するのに向いています。
Svelteの特徴
本章では、Svelteの特徴についてメリット、デメリットに分けてそれぞれ解説していきます。
メリット
Svelteのメリットとして、主に以下のようなものが挙げられます。
- 記述量が少ない
- 非常に構造がシンプル
- 基本的な開発に必要なツールが揃っている。TypeScriptにも対応している
ざっくりまとめると、Svelte簡単にWEBアプリを開発できるフレームワークです。
デメリット
しかし、Svelteにもデメリットがあります。
- VueやReactに比べ情報量が少ない
- 拡張性が高くない
Svelteは高機能なフレームワークですが、まだ発展途上で情報量が少ないです。それだけではなく、拡張性もそこまで高くないので大規模開発には向いていないでしょう。
SvelteとVueの比較
Svelteのコードスタイル
<script> const name = 'world'; </script> <h1 class="title">Hello {name}!</h1> <style> .title { color: red; } </style>
Vueのコードスタイル
<script setup> const name = 'world'; </script> <template> <h1 class="title">Hello {{name}}!</h1> </template> <style> .title { color: red; } </style>
SvelteとVueは書き方が多少似ています。
しかし、SvelteではWebページの状態を保存する際に単に$を変数名の前につけることで別で定型文を用意する必要がありません。(Vueの場合は別でstoreを用意してVuexで記述する必要がある)
SvelteとVueは両方とも少ないコード量で実装できるように設計されていますが、SvelteはVueよりも極力コードを減らして機能を実装できるように設計されています。
まとめ
今回の記事では、最新のJavaScriptフレームワークであるSvelteについて詳細に解説しました。
今回の記事を参考に、Svelteについての理解を深めていただけると幸いです。
今回の記事はこれで終了です。
【参考サイト】
APIとは？｜ソフトウェアやアプリケーションの開発を効率化する画期的な技術を徹底解説
おはようございます。Shotaです。
今回の記事では、APIについて詳細に解説します。
😥「APIって何？」
🤨「APIはどんな場面で使われる？」
😱「APIについて調べてみたけど全然わからない...」
プログラミング初心者にとって、APIは非常に難しい概念です。しかし、APIはプログラミングを学習する上では必要不可欠で、理解することで開発の幅も広まります。
そこで、今回の記事ではAPIについて詳細に解説します。
それでは早速、本題に入りましょう。
APIとは
APIはApplication Programming Interfaceの略称で、ソフトウェアやアプリケーションの機能を共有できる仕組みのことを指します。ソフトウェアの一部をWEB上に公開することで、誰でも外部から利用できるようになります。
これを利用して、自分のソフトウェアに他のソフトウェアの機能を組み込めるのでアプリケーション同士で連携できるようになります。
APIはWEB上に公開されており、基本的には誰でも無料で使えます。また、APIはWeb上で通信するので「WEB API」と呼ばれます。
ただし、外部からソフトウェアの機能を利用するとは言っても、内部のコードまでは公開していません。言い換えれば、外部からは機能の使い方や仕様がわからないので、使い方を予め説明する必要があります。それゆえ、APIは機能だけではなく、WEB上にルールや使い方も合わせて公開されているのです。
APIのメリット・デメリット
メリット
APIを使うメリットは以下の通りです。
- 開発の効率化
- コストの削減
- セキュリティの向上
- 無料で使える
それぞれ順番に解説していきます。
開発の効率化
APIは他のサービスの機能を簡単に埋め込めるので、開発を効率化できるのが最大の魅力です。
例えば、チャット上で株価の動きを知らせるボットを作るとしましょう。本来であれば、株価の動きを確認できるプログラムを一から作る必要があります。しかし、Yahooなどが提供している気象情報APIと連携して機能を一部借りることで、少ないコード量でボットを開発できるのです。
すでに公開されているAPIを活用することで、複雑なプログラミングや高度な処理を省略でき、開発にかかる時間を短縮して効率的に開発を進められます。
コストの削減
APIを使うことで、高度な処理を行うプログラムの実装にかかるコストを抑えられます。基本的にAPIはしようそのものが変更になるといった場合以外は、バグ修正のコストも掛かりません。
システム運用を自動化することで、運用に掛かる負荷を軽減できます。
セキュリティの向上
SNS等のWebサイトに会員登録をしようとした際に、Googleなどのアカウントでログインしたことがありませんか？連携したいサービスのAPIを組み合わせることで、ログイン認証が必要なときに該当のアカウントを利用したログインを実装できます。
自分で会員登録の機能を作るよりも。大手のWEBサービスの企業が制作したアカウント機能のほうがセキュリティも高く、ユーザからの信頼度も高くなるでしょう。
無料で使える
APIで情報をリクエストすれば、誰でも簡単に他のサイトからの最新情報を取得できるようになります。そこで取得した情報を活用すれば、自分のWEBサイトやアプリケーションに新しい機能を追加できます。
デメリット
ここまでAPIのメリットだけを述べてきましたが、逆に以下のようなデメリットもあります。
- プログラム関係の知識がいる
- アップデートで仕様が変わったり、サービス事態が終了したりする可能性がある
それぞれ順番に解説していきます。
プログラム関係の知識がいる
APIを使えばアプリケーションの開発が効率的にできますが、それはプログラムの知識があってこその話です。
例えば、自分のアプリケーションでWEBAPIを活用する際には、外部のアプリケーションのプログラム仕様の許可を取るための認証キーを埋め込む必要があります。その際にどうしても最低限のプログラムの知識が必要になります。
APIはプログラムを全く知らない人でも簡単にアプリを開発できる技術ではないので、誤解しないようにしましょう。
アップデートで仕様が変わったり、サービス事態が終了したりする可能性がある
APIは自社ではない外部サーバにプログラムがあります。また、それらの管理はAPI開発者が行っているので、APIが突然使えなくなることがあります。
APIは自社アプリケーションに導入して終わりだけではなく、自社で管理していないAPIに関するアップデート情報を確認することが大事です。
APIの活用事例
APIの具体的な活用事例には以下のようなものがあります。
現在使われているAPIは数多くの種類がありますので、詳細については以下のサイトを確認ください。
▼おすすめのサイト
APIを開発する方法
自分でAPIを開発する方法については、過去に以下の記事で詳細に解説してありますので参考にしてください。
▼おすすめのサイト
shotanukumizu-1000.hatenablog.com
まとめ
今回の記事では、ソフトウェアやアプリケーションの開発に必要不可欠なAPIについて詳細に解説しました。
今回の記事を参考に、APIについて理解を深めたり、実際にプログラミングでAPIを活用したりしてくれれば幸いです。
今回の記事はこれで終了です。
【参考サイト】
【毎週日曜更新】本の要約・考察第41回~『カエルを食べてしまえ！』~
おはようございます。Shotaです。今日は日曜日なので、本の要約・考察記事を書いていきます。
今回紹介する書籍は、13万部のベストセラー『カエルを食べてしまえ！』です。
大前提となる法則
今回の記事をみて、「カエル」という言葉に引っかかった人もいるかもしれません。本書における「カエル」とは、あなたにとってもっとも難しく重要な仕事で、今すぐにやらないと後回しになってしまうもののたとえです。
そのことを踏まえて、本書では次のような法則を設けています。
【第一原則】もし二匹のカエルを食べなければならないなら、醜いほうから食べよ。
これは言いかえると、重要な仕事があったら難しく大変な方からやり遂げることを意味します。そして、すぐに取り掛かってやり遂げるまでは他のことに手を出してはいけないのです。
【第二原則】もし生きたカエルを食べなければならないなら、座り込んでじっと眺めたりしてはいけない。
高い成果を上げるためのカギは、朝一番に重要な仕事に取り組む習慣をつけることです。言い換えれば、真っ先に「あなたのカエルを食べること」を日課にすることです。
現在のビジネスでは、「実行を伴わないこと」が最大の問題として取り上げられています。多くの人が物事を完成までこぎつけようとしません。「こうしたほうがいい」「ああしたほうがいい」とばかり言うだけで、それを実行する人がいません。
人生の成功は、どんなことを習慣づけるかにかかっています。優先順位を付け、すぐにもっとも重要な仕事に取り掛かる習慣は、精神的かつ身体的なスキルであり、繰り返し実践することで身につけられます。いったん習慣として身につけば、自動的に簡単にできるようになります。
そのことを踏まえて、本書では、素晴らしい生活を送り、仕事で成功を収め、幸せを実感するカギは重要な仕事をやり遂げる習慣を身につけることが強調されています。
練習が習慣につながるカギです。何事も練習で習慣として身につきます。
今回の記事では、カエルを食べる上で個人的に効果的な方法を二つに絞って取り上げます。
それぞれ順番に解説していきます。
常に「ABCD法」を用いる
仕事に取り掛かる前に、じっくり考えて計画を立てて優先順位を見極めれば、より重要なことをより速くやり遂げられるようになります。
ABCD法は、優先順位をつけるのに非常に有効な方法で、日々の生活に活用できます。非常に簡単ですが効果的な方法です。
これは簡単に言えば、明日しなければならない仕事のリストを作ってA, B, C, D, Eの五個にランク付けをすることです。
- A：非常に重要で、これをしなければ重大な支障をきたすタスク。複数ある場合は「A-1」「A-2」...というように順番をつける。「A-1」のタスクが最も重要なタスクになる。
- B：自分が「やるべきこと」だが、しなくても大変なことにならないタスク。Aランクのタスクが終わるまで、Bランクのタスクに手を付けてはいけない。
- C：「したほうがいい」けど、しなくてもいいタスク
- D：「他の人に任せてもいい」タスク
- E：やらなくても何にもならないタスク
このようにして自分のタスクをランク付けすると、より重要な仕事に取りかかれます。
自分のやるべきタスクを熟慮してランク付けし、「A-1」の仕事に専念する習慣をつけられたら、あなたは他の人よりもずっと多くの仕事をやり遂げるようになるでしょう。
テクノロジーによる時間の浪費をやめる
私たちの生活にある様々なテクノロジーは最も良い友人になり得るし、最悪の天敵にもなり得ます。私たちが生きている21世紀には、LINEやTwitterを始めとしたコミュニケーションツールがあまりにも多すぎます。
私たちは朝起きてすぐにスマホをチェックして、Twitterを確認したり、メールの受信ボックスを確認したりするのが癖になっています。何かに集中しているときも、料理をしているときも、寝る準備をしている時もいつも、何かしらスマホをいじっている人は少なくないでしょう。
集中して物事に取り組んで成果を上げたいなら、このようなことは絶対にやめるべきです。
ついついスマホを触ってしまう癖をなくすためにはどうすればいいのでしょうか？
最善の方法は、「ついつい使うこと」をやめることです。朝起きてすぐにスマホに触ってSNSを見るのは絶対にやめましょう。本書には書かれていませんが、寝室にスマホを置くのをやめるだけでも十分に効果が得られます。(スマホを寝室で触ることがなくなるため)
別に私たちが一日Twitterやスマホに触らなくても、何も大変なことは起こりません。
まとめ：意志力で解決せず、環境で解決しよう
今回の記事は、13万部のベストセラー『カエルを食べてしまえ！』を要約しました。
最後に個人的な補足を入れてこの記事を締めくくりたいと思います。
本書では、自分にとって重要な仕事をやり遂げる方法について詳細に書かれていましたが、これを意志力でやろうしていけません。人間の意志力は当てにならないからです。
意志力で解決するのではなく、環境で解決しましょう。例えば、スマホをついつい触るのをやめるために、私は1年前から以下のようなことを実践しています。
これを実践することで、スマホに触る時間を一日15~30分以内まで押さえられるようになりました。
Twitterは自動送信にすることで情報発信を自動化し、スマホのホーム画面を空にしてスマホを開いた時に触る気力をわざと減らすような工夫をこらして、自分が作業に没頭できる環境を作りました。これで最低一日6時間プログラミングやブログ執筆に費やせるようになりました。
長くなりましたが、今回の記事はこれで終了です。
【参考図書】
【Python】「シリアライズ」「デシリアライズ」を詳細に徹底解説
おはようございます。Shotaです。
今回の記事では、Pythonを使ってJSONのシリアライズとデシリアライズの方法について詳細に解説していきます。
JSONのシリアライズ及びデシリアライズの方法を学習することで、
この2つの方法に役立てることができます。
今回の記事を参考に、JSONデータでのシリアライズとデシリアライズの方法について詳細に学ぶことができるようになります。
それでは早速、本題に入りましょう。
シリアライズとは
Pythonを用いたシリアライズの方法について解説する前に、シリアライズの概念を理解しておく必要があります。
言い換えれば、様々な要素を組み合わせた複合的なデータやコンピュータで実行してるプログラムがメインメモリ上に展開しているオブジェクトなどを、一定のデータ形式や変換規則に則って文字列やバイト列に変換させて保存したり送信したりできるようにすることを意味します。
Pythonのオブジェクトや文字列をJSON形式に変換することをシリアライズ、反対にJSON形式のデータをPythonのオブジェクトや文字列に変換することをデシリアライズと言います。
Pythonでの実装
シリアライズ
シリアライズには大きく分けて二種類あります。
シリアライズする際にPythonとJSONの型で差があります。その際に、型や値の形式が変換されます。そのデフォルトの変換形式は以下の通りです。
| Python | JSON |
|---|---|
dict |
object |
list, tuple |
array |
str |
string |
int, float |
number |
True |
true |
False |
false |
None |
null |
dump()でPythonオブジェクトをJSONファイルに保存する方法
# jsonライブラリのインポート import json # dataの定義 data = { "pokemon": { "name": "Mewtwo", "level": 50, "stock": False } } # dataオブジェクトの内容をsample.jsonに出力 def main(file_path): with open(file_path, 'w') as f: json.dump(data, f, indent=4) #indent=4と指定することで、インデントが入った状態で出力できる if __name__ == "__main__": file_path = 'sample.json' main(file_path)
▼sample.jsonの内容
{ "pokemon": { "name": "Mewtwo", "level": 50, "stock": false } }
dumps()でPythonオブジェクトをJSON形式の文字列に変換する方法
import json data = { "pokemon": { "name": "Mewtwo", "level": 50, "stock": False } } def main(): json_string = json.dumps(data, indent=4) print(json_string) if __name__ == "__main__": main()
▼出力
{
"pokemon": {
"name": "Mewtwo",
"level": 50,
"stock": false
}
}
デシリアライズ
Pythonのデシリアライズも、シリアライズと同じように大きく2種類に分けられます。
load()を利用して、JSONファイルからPythonオブジェクトを生成する方法
▼sample.jsonのファイル内容
{ "pokemon": { "name": "Mewtwo", "level": 50, "stock": false } }
import json def main(file_path): with open(file_path, "r") as f: data = json.load(f) print(data) if __name__ == "__main__": file_path = 'sample.json' main(file_path)
▼出力結果
{'pokemon': {'name': 'Mewtwo', 'level': 50, 'stock': False}}
loads()を利用して、JSON形式の文字列からPythonオブジェクトを生成する方法
import json def main(): json_string = """{ "pokemon": {"name": "Mewtwo", "level": 50, "stock": false}} """ data = json.loads(json_string) print(data) if __name__ == '__main__': main()
▼出力結果
{'pokemon': {'name': 'Mewtwo', 'level': 50, 'stock': False}}
まとめ
今回の記事では、Pythonにおける「シリアライズ」と「デシリアライズ」の方法について詳細に解説しました。
今回の記事はこれで以上です。
【参考サイト】
【JavaScript】フロントエンド開発にReactではなくVuejsを利用する理由
おはようございます。Shotaです。
今回の記事では、私がフロントエンド開発にVuejsを活用する理由について詳細に解説します。
🤔「フロントエンド開発にVueを使ってみようかな...」
🤨「フロントエンドでVueを使う目的って何だろう？」
😥「ReactかVueかどっちを使ってみようか迷ってるんだよね.....」
このように考えている方も少なくないと思いますので、今回はフロントエンド開発にReactではなくVuejsを利用する理由について詳細に解説します。
それでは早速、本題に入りましょう。
Vuejsとは
Vuejsは2014年に開発されたUIを構築するためのJavaScriptフレームワークです。
Vuejsの詳細について知りたい方は、以下のサイトをご覧ください。
shotanukumizu-1000.hatenablog.com
Vuejsが実際に使われているサイト
Vuejsは以下のサイトで活用されています。
ここからは、Vuejsの優秀なポイントに付いて詳細に解説します。
Vuejsの優秀なポイント
Vuejsの優秀なポイントは以下の通りです。
- 導入が簡単
- 再利用できるコンポーネント
- 直感でコードを書きやすい
それぞれ順番に解説していきます。
導入が簡単
Vuejsは導入が非常に簡単なので手早く始められます。(この部分はReactも同じです)
拡張性が高い
Vuejsはシンプルに設計されているので、他のライブラリと組み合わせるのが簡単です。既存のプロジェクトの一部にも適用できるので、途中から導入を行うことも可能です。
それだけではなく、Vuejsはアプリ開発に必要な機能をVueのライブラリだけで済ますことができます。それに対して、Reactは外部からライブラリを持ってくる必要があります。
直感でコードを書きやすい
Vueは一つのファイルにコンポーネントごとにHTML/CSS/JavaScriptを記述できます。コンポーネントごとにまとまっているので、サイトとコードの関係性をつかみやすいと思います。
<template> <h1>Hello, {{ getName }}</h1> </template> <script lang="ts"> import { Component, Vue } from 'vue-property-decorator' @Component export default class SampleComponent extends Vue { private name: string = 'hoge' get getName() { return this.name } } </script> <style scoped> h1 { font-size: 3.2rem; } </style>
Reactは、JSXと呼ばれるJavaScriptの中にHTMLファイルのタグを組み込んでコードを書いていきます。JavaScriptとHTMLが混在していてコードの構造を理解しづらいと思います。(あくまで個人的な見解)
ちなみにJSXはVueでも対応しています。
import React, { useState } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }
一言でいうと
Vueは何でもお膳立てしてくれる一方で、Reactは自由度が非常に高いです。言い換えれば、Vueは開発に必要な機能を一式揃えていますが、Reactは全部自分でやらなければいけません。
ちなみに私はフロントエンド開発が非常に苦手なので、デフォルトで開発に必要な機能を一式揃えているVueのほうが使い勝手がいいです。
まとめ：個人的にはVueのほうが簡単。Reactは外部ライブラリと連携する必要があるので多少面倒
今回の記事では、フロントエンド開発でReactではなくVuejsを使う理由について詳細に解説しました。
Vueはシンプルで学習コストが低く、フロントエンド開発に必要な機能を一式揃えているので非常に使い勝手がいいです。
今後もフロントエンド開発ではVueやNuxtを中心に進めていこうと思います。
今回の記事はこれで終了です。
【参考サイト】
