aichikun’s blog

(テンプレ)すべて筆者の個人的見解であり、筆者の所属組織とは無関係です。イベントに行ってきたことや勉強してることなど

Web開発における大事な技術を勉強してみた

こんにちは。夏休みに入った愛知くんです。

もちろん研究での開発作業もありますが、授業もないですし夏休み少しだけ暇になったわけですが、何かしら勉強はしたいので今の自分に足りないことってなんだ？？って考えたらいっぱい出てきましたが、Web系の勉強をする必要があると感じました。

 大学3年生の時はVRコンテンツの開発にどハマりしてまして、Web系の知識がかなり浅かったです。就活も終わったので、入社するまでにWeb系技術やスマホアプリ開発などの知識を深めようと思い、参考書買って勉強始めました。

 

大学3年生までWeb開発で使うPHPでは、生のPHPで書いていたんです。優秀な先輩はLaravelとかcakePHPを利用して開発していたのを思い出して、僕も勉強しようと考えました。そして、早速勉強開始。

いろんなフレームワークがあって、cakePHPが圧倒的なユーザー数があるそうですが、Laravelは高機能かつ学習コストが低いらしい。いずれはLaravelに置き換わっていくらしいです。じゃあLaravel勉強しようって思ってこのフレームワークを勉強することを決めました。

MVCというアプリケーションフレームワークでよく使われてるアーキテクチャなのですが、前までそのままの生PHPを書いていた私にとっては慣れるのに少し時間がかかりましたかが、慣れてきた途端、フレームワークの便利さに感動。

 

やっぱり本の説明が分かりやすいとやる気が出ます。他のフレームワークと違って学習コストが低いと言われていますが、それにしてもかなり分かりやすかった。以前初めてRuby on Railsの本を見たときに意味分からん！ってなってたけど、Laravelを理解し始めたらRubyも理解できそう！！

ルート情報を登録して、コントローラーからテンプレートを設定してbladeならレイアウト組み合わせたり特有の構文とか使って便利な処理ができたり。データベースの扱いもかなり簡単になっててめっちゃ感動したし、便利さをかなり実感しました！

 

その後にReactを勉強しました。

Webページにおけるいろんなパーツをコンポーネントとして扱えたり、そのコンポーネントをHTMLタグとして技術できたりします。例えば任意の処理をするHelloコンポーネントを定義したら、<Hello name="愛知" />という感じでHTMLタグとして使えて、プロパティの値を用いた処理ができたりします。

例えば、テキストボックスなどを描画するコンポートと何かしらの計算処理するコンポートを組み合わせれば何かしらの自動計算アプリが作れます。

コンポートの状態の値が変更されれば再描画が行われるので、入力する度に計算結果が更新されるのでいちいち送信ボタンを押さなくてもいい計算アプリも作れるというわけです。(Reactに限った話ではありません)

 

JSX使ってBabelで変換したり、メリットがすごいです。

そのときにVagrantとVirtualBox使って仮想環境の中に開発環境を整えて勉強をはじめました。

他は、Node.jsやwebsocket、JSX、babel、webpack、Electron、React Native、Expressなどを学びました。

感想としては、webpackで複数のJsファイルを一つにまとめたり、リアルタイムにプログラムの変更が反映されたりするのを体験できたのは面白かったです。

また、過去に単純にDBからデータ取得するのみのちょっとしたAPIは作ったことはあったのですが、express使ってデータの取得とか登録とか認証トークン出したり様々な処理をするAPIも意外に簡単に作れたのは驚きでした。

 

意外にAPIというのはWeb系フレームワークのコントローラーみたいにパスを指定して細かく作っていく感じというのを知れてよかったなと思いました。

 

参考書を読みながらですが今回twitterとかマストドンみたいなAPIを作ったのは初めてだったので、こんな感じなんだぁって分かったのは楽しかったです。

 

また、デスクトップアプリ開発で用いるElectronを初めて使ってみると、Reactと同じ感覚で簡単にデスクトップアプリが作れたのは驚きでした。。。

プラットフォーム指定するだけで簡単にMac、Win、linux向けなどすぐにビルドできて感動しました。。。(Unityのあの感覚を感じた)

 

Reactでは部品ごとに自分でコンポーネントを作って組み立てる感じだったのですが、React Nativeに関してはあらかじめ用意されてるコンポーネント(Textとか)を利用して組み立てる感じでした。まさにUnityでもTextコンポーネントあるしAudioコンポーネント、Rigidbodyコンポーネントとかをオブジェクトにつけたりするので、Unityでの開発経験があったのですぐにイメージを掴むことができました！

 

「HTML、CSS、JavaScript、PHPなどの言語のみで開発」するのと、「フレームワークや便利なツールを用いた開発」とではこれほど違うのか！と実感しました。

ある程度勉強した頃にはwebpackやBabelはもう古いみたいな記事も出てきて、マジかぁ、、、って思ったけど新しい技術を勉強し続ける日々をエンジニアとして楽しもうと思います。