【文系 SE】おススメのプログラミングフレームワークーAngularー

ご機嫌いｋがでござるか、こじろうでござる。

別記事でJavaやPythonを使ったWebアプリの作成方法をお伝えしましたが、非常に味気ないアプリケーションだったと思います。。
参考：【文系SE】プログラミング～Python Webアプリ作成方法伝授！～

ということで、今回はそれなりにカッコいい(?)特に見栄えの良いアプリを作ってみたいと思います。(まだダサかったらごめんなさい。。)

具体的には、HTMLやCSS、Java script、Type Scriptを、できるだけ小さい工数で、かっこよく書いていく方法をお伝えしていこうと思うのですが、ここでは、Angularというフレームワークを紹介したいと思います。

この記事では文系SEやIT初心者でも比較的簡単に取り組めるAngularでのWebアプリケーションを紹介・作成方法をお伝えしたいとと思います。

AngularでのWebアプリの書き方(サンプル)

なぜAngulerでWebアプリ作成を紹介しようと思ったか

以下、2点が主な理由になります。

環境は以下

• OS：Windows 10
• NodeJSがインストール済み
• Anguler CLIがインストール済み
• Visual Studio Codeインストール済み

NodeJS、Anguler CLI、Visual Studio Codeのインストールは、以下の釣りキチエンジニアさんの記事に分かりやすく記載があるので、是非、ご覧ください。

Angular開発環境構築手順(for Windows)

具体的な手順

まず、Angulerを使って、Webブラウザに画面を表示してみる。※更新中

再び、釣りキチエンジニアさんの記事をご覧ください。

AngularでHello Worldしてみる(for Windows)

商品画面を作成してみる。

Angularでコンポーネントを作成する

上記の通り、Angulerの画面が作成できましたが、表示する項目を以下のように変えてみましょう。

具体的には、以下のファイルを修正します。

上記を実施した僕の現在

僕はサーバ構築等のシステムインフラ側の人間なのですが、アプリ側を自分で作ってみると「あーもうすぐアプリ側からこういうお願いがくるだろうな」とかが分かってきます。さらに「このチーム、ここを担当する人がアプリチームにいなさそうだから、やっちゃおうかな」ってな具合に自分で仕事を見つけられるようにもなります。自分の居場所を見つけられるっていうのは、かなり大事な能力です。

プログラミング初心者の方におススメですね。

プログラミングは習うより慣れろです。

かといってやみくもにやっても挫折するので、完成物をコピペや写経して実際にどんな風に動くか確認しながら、覚えていくのが良いと思います。

また、こちらの記事ではより詳細な説明を書いているので、興味がある方は是非こちらもごらんください。

参考：【文系SE】Angularアプリ作成～詳細解説

Angularを扱えるようになった僕の現在

ITコンサルタントとしての現場において、プロジェクト内でアプリケーションも理解しているシステムインフラ担当として最も頼られる存在になり、安定した案件・プロジェクトアサインが実現できるようになりました。
参考：コンサルファームでアベイラブルになったら

文系SEであっても、こういった知識があると一目置かれた存在になれますし、キャリアアップの一助になります。

実際、僕はプログラマ➡SE(ネットワークエンジニア)➡ITコンサルタントとキャリアップしてきましたが、ITコンサルタントとして活動している今も本記事の様な技術的な部分を大事にしているため、’他のコンサルタントとは差別化された人材になれているな’と感じています。

本記事は技術的な内容でしたが、キャリアに関する情報をお探しの方はこちらも是非、ご覧ください。
参考：【文系 SE】ネットワークエンジニアのすすめ

また、エンジニアを飛び越えてコンサルタントにジャンプアップしたい方は、こちらの記事を是非ごらんください。
参考：【文系SE】ITコンサルへの挑戦～どのくらい大変なのか？～

それでは、これにて御免。Tchau◎

こじろう